본문 바로가기

분류 전체보기235

구글크롬 -webkit-scrollbar 찾기 body 찍고 밑으로 쭈욱 2022. 9. 29.
css -webkit-scrollbar 스크롤바 변경 크롬 및 최신 브라우저에만 적용 /* 크롬,엣지 스크롤바 */ ::-webkit-scrollbar { width:10px; background: #eee; } /* 스크롤버튼 */ ::-webkit-scrollbar-thumb { background: #999; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #000; } 초기화 코드에서 바꾸기 크롬에서도 확인 가능! 2022. 9. 29.
크롬 font 주소 역추적 다운 사이트에서 글씨체를 찾아볼때 F12 크롬 개발자 모드 > sources 모드 > css 폴더 > resources 찾기 오른쪽 더보기 > search > 하단 @font-family 검색 그럼 아래처럼 사용한 폰트가 검색이된다. 폰트부분 링크 복사한후 주소창에 좌표를넣고 검색해준다. http://www.cj.co.kr/resources/fonts/CJ%20ONLYONE%20NEW%20body%20Light_2350.woff2 주소 역추적 완성링크 2022. 9. 28.
복합 애니메이션 @keyframes 복합애니메이션 : 여러번에 걸쳐서 동작, 자동애니메이션 적용법 @keyframes moveBox (함수명) 예시 @keyframes moveBox { 50% { transform:translateX(500px); } } 이름지정 함수명은 카멜표기법 = 동사+명사로 표현 moveBox (대문자를 두번째 명사부터) (중복불가) ex. moveBox, changeColor, fadeCover, moveBox02 % 애니메이션시간에 대한 백분율, 애니메이션시간이 1초인 경우 50%는 0.5초임 0%, 100%는 적지않을경우 최초상태 (0%로 적을시 최초위치로 적용되므로 생략한다) 속성정의 animation: name duration timing-function delay iteration-count direct.. 2022. 9. 26.
css transition ,transform 메뉴 바 효과 넣기 +hover #header .gnb_wrap .gnb>li>a:hover:after { opacity: 1; } header 상단 메뉴 nav 메뉴 부분에 커서를 가져가면, 밑줄로 메뉴바가 나오는 효과를 넣어보자! 1. 먼저 강조할 선 만들기 #header .gnb_wrap .gnb>li>a:after{ content: ''; position: absolute; left: 0; bottom: 0; height: 1px; background: #1f5dab; width: 100%; } 자식 선택자로 class를 지정해 준 후, 꾸며주는 요소이기 때문에 :after 로 선을 만든다. 메뉴의 길이는 글씨에 꽉 찰 수 있게 width:100% 를 넣어주고 영향을 받지 않도록 position으로 띄운다. 1-1 상위클래스에 .. 2022. 9. 25.
active 버튼 누르는 효과 active 는 활성이란 뜻 , 태그와 함께 사용되며 누르면 딸깍 같은 효과를 준다. KO KO EN JP html에서 클래스로 active를 넣어줬을때 딸깍이는 느낌이 나게 할 수 있다. (영상으로 담을 수 없어서 아슙,...) 2022. 9. 24.
비주얼스튜디오 코드 / 세로줄 한번에 선택 수정하기 한번에 여러개를 수정하고 싶을때 단축키 1. alt + 더블클릭 더블클릭으로 띄어쓰기 전까지 텍스트가 전체 잡힘 여러개 선택가능 2. alt + shift + 드래그 시작점에 커서를 두고 alt + shift 를 누른상태에서 드래그를 해주면 새로로 원하는 지점까지 선택이 가능하다. (단 세로로 코드가 나열되어 있을경우에만 사용가능) 3. ctal + f 단어검색 후 수정 참조링크 https://hyojinny.tistory.com/35?category=1094359 비주얼스튜디오 태그 한번에 수정하기 변경할 지점 잡고 ctal + f Replace 에 넣고 엔터 (빈칸은 놔두기) hyojinny.tistory.com 2022. 9. 24.
단일 애니메이션 단일애니메이션 - 한번만 동작 transition:all 또는 개별속성명 1s [지연시간] [ease] ease 처음과 끝이 느리고 중간이 빠름, 주로사용 ease-in(가속) 처음은 느리고 끝에서 빨라짐 ex. 우주선이 밖으로 나갈때 - ease-out(감속): 처음은 빠르고 끝에서 느려짐 ex. 화면밖에서 안으로 들어올때 - ease-in-out: ease와 같지만 중간속도가 ease보다 부드러움 ex. 반복애니메이션에 사용 - steps(5) ex. 타이핑 애니메이션에 사용 - cubic-bezier(1,0,0,1) /* easeInOutExpo*/ ex. 특수한 움직임 (스프링, 다이나믹한움직임)이 필요한 경우 사용 크롬개발자모드로 커스텀, https://easings.co/ 이용 - linear.. 2022. 9. 23.
애니메이션1 2022. 9. 23.
css3 코드지원 브라우저 찾기 https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com ex) gradient 검색했을때 css 코드 지원안되는 브라우저 볼수잇음 브라우저마다 자바스크립트 css 지원이 다름 특수속성 코드 사용할때 꼭 검색하기 (익스호환안댐) 2022. 9. 23.
css gradient 그라디언트 효과 .main_section01{ background: rgb(238,174,202); background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); } .main_section01{ background: linear-gradient(45deg,red,green,blue); } .main_section01{ background: linear-gradient(45deg,red 40%,green 50%,blue) 60%; } 퍼센트로 조절가능 https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient gener.. 2022. 9. 23.
css 가시속성(사라지게 하기) hover, transdition 등 영역정리 1. display: none; 영역사라짐 display: none은 컨텐츠를 안보이게 하고 영역도 같이 사라지나, transdition 이 사용 불가하다. 따라서 hover 등 transdition : all 2s 같은 효과를 쓰고 싶을때 사용 불가. display none 으로 컨텐츠를 사라지게 했다면? hover 적용 컨텐츠에 display: block; 을 적용, 마우스를 가따댔을때 다시 보이는 효과 가능 2. opacity:0; 으로 투명하게 만들기 opacity: 0; 영역 남아있으나 내용없어짐 선택가능 hover에서 쓸때는 opacity 값을 1로 주어 다시 나타나게한다. 꼭 visibility: hidden; 와 같이 사용 3. visibility: hidden; 영역은 남아있으나 선택안됨 2022. 9. 23.

티스토리툴바