Knowledge Wiki/HTML&CSS (34) 썸네일형 리스트형 [ HTML/CSS ] 복잡한 애니메이션 1. 복잡한 애니메이션 정의할 땐 @keyframes @keyframes key-ani { 0% { transform: translateX(0px); } 50% { transform: translateX(-100px); } 50% { transform: translateX(100px); } 100% { transform: translateX(0px); } } 2. 물건 앞뒤를 구별해서 애니메이션 적용하고 싶을 때 conatiner => transform-style: preserve-3d; 사용 front => backface-visibility: hidden; [ HTML/CSS ] <video>, <audio> 1. preload 속성 preload="none" 미리 다운 X preload="auto" 미리 다운 O preload="metadata" 미리 다운 적당히 [ HTML/CSS ] SASS 1. SASS CSS 대용언어 CSS + 프로그래밍 기법 = SASS 반복적인 부분을 쉽게 처리할 수 있다. 2. SASS Plugin Live Sass Compiler 3. SASS 자주 쓰는 거 -> @mixin, @include css 스타일을 함수처럼 다룸 [ HTML/CSS ] shadow DOM 1. shadow DOM 브라우저에서 보려면 브라우저 설정에서 show shadow DOM 설정해줘야 함 [ HTML/CSS ] pseudo-element 1. pseudo-element 내부의 일부분만 스타일링할 때 사용 .main-button::first-letter { color: red; font-size: 30px; } 2. 기존에 만들어서 clear: both 했던 것들도 pseudo-element로 처리 가능 .product-container::after { content: ''; display: block; clear: both; float: none; } [ HTML/CSS ] 반응형 웹 레이아웃 1. Bootstrap Grid 레이아웃 반응형에 쓰기 좋다. Hi Hi [ HTML/CSS ] transition-timing-function 1. transition-timing-function -> transition 세부 조정 가능 [ HTML/CSS ] 크롬, IE 개발자 도구 활용법 1. 크롬 개발자 도구를 사용하면 CSS 버그 찾는 데 도움됨. 2. 크롬은 자동으로 업데이트가 되는데 IE는 권장사항일 뿐 자동으로 업데이트되질 않음 display: flex; 등은 IE 11이상에서만 사용 가능함 IE는 호환성을 따로 처리해줘야 함 3. IE > 요소 검사 > 에뮬레이션 탭에서 IE 버전별로 웹사이트가 어떻게 보이는지 확인 가능함 3. IE 호환성 잡으려면 IE를 위한 CSS 파일을 별도로 제공해주어야 함 이전 1 2 3 4 5 다음