KorSA

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;

1. preload 속성 preload="none" 미리 다운 X preload="auto" 미리 다운 O preload="metadata" 미리 다운 적당히

1. SASS CSS 대용언어 CSS + 프로그래밍 기법 = SASS 반복적인 부분을 쉽게 처리할 수 있다. 2. SASS Plugin Live Sass Compiler 3. SASS 자주 쓰는 거 -> @mixin, @include css 스타일을 함수처럼 다룸

1. shadow DOM 브라우저에서 보려면 브라우저 설정에서 show shadow DOM 설정해줘야 함

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; }

1. Bootstrap Grid 레이아웃 반응형에 쓰기 좋다. Hi Hi

1. transition-timing-function -> transition 세부 조정 가능

1. 크롬 개발자 도구를 사용하면 CSS 버그 찾는 데 도움됨. 2. 크롬은 자동으로 업데이트가 되는데 IE는 권장사항일 뿐 자동으로 업데이트되질 않음 display: flex; 등은 IE 11이상에서만 사용 가능함 IE는 호환성을 따로 처리해줘야 함 3. IE > 요소 검사 > 에뮬레이션 탭에서 IE 버전별로 웹사이트가 어떻게 보이는지 확인 가능함 3. IE 호환성 잡으려면 IE를 위한 CSS 파일을 별도로 제공해주어야 함

1. media query -> 반응형에 사용 CSS 파일 최하단에 적음!! 여러개 써도 됨 // 현재 브라우저 폭이 1200px이하면 font-size를 30px로 @media screen and (max-width: 1200px){ .main-title { font-size: 30px; } } 2. media query 쓸 때 다른 사람들이 많이 쓰는 breakpoint 기준 px값을 사용하는 게 좋음 1200px 992px 768px 576px 단위를 많이 사용함 보통 breakpoint는 3개정도, 많으면 4개 정도가 적당함. 너무 많으면 복잡하고 관리도 어려움. 3. CSS 덮어쓰기 1) 그냥 같은 클래스명 하단에 쓰기 2) 우선순위 높이기 3) specificity 높이기

1. 반응형 웹 만들땐 vw, vh 유용함 vw -> 브라우저 폭에 비례 vh -> 브라우저 높이에 비례 rem -> 기본 폰트사이즈에 비례, 처음 기준으로 1rem == 16px .font { font-size: 1rem; } 2. 모든 단위를 rem으로 맞추면 폰트 크기가 늘거나 줄때에 레이아웃이 덜 깨짐 But, 요즘엔 그냥 ctrl 누르고 화면 크기 키우니까 많이 쓰진 않음.. 그래도 typography 디자인 할때는 rem을 쓰면 유용함 3. em 단위 -> 내 폰트 사이즈의 X배 em도 많이 쓰진 않음