<Web> 노마드코더 코코아클론 10일차 (CSS)

CSS 기본 설정

:root - 자주 쓰는 CSS 내용 전역변수 설정

Reset CSS 2.0 - HTML 기본 특성들 없애고 시작하기

 

BEM (Block Element Modifier)

__ : element

-- : modifier

https://cssguidelin.es/#bem-like-naming

CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS

 

transition & animation

state selector(ex. a:hover) 사용시 transition 없으면 확확 바뀜(중간과정없음)

cubic-bezier

animation > forwards - 애니메이션 완료시점 고정

animation-delay - 애니메이션 시작시점 연기

will-change: transform - 브라우저가 컴퓨터 그래픽카드를 활용하여 가속

 

기타

inherit?

box-sizing: border-box;

inline 요소는 margin 값을 가질 수 없음

여러 컬럼 중 가운데 요소를 가운데 맞추는 방법 : width: 33%

z-index - 값이 클수록 화면 앞쪽을 차지함

화면 맨위로 올리기 - position: fixed; top: 0;

flex 자식 순서 조정 - flex children > order 속성 또는 flex-direction: row-reverse;

static 웹사이트 - HTML + CSS + JS