height보다 min-height를 사용하면 내부의 컨텐츠 양이 늘어날 경우에 해당 박스의 크기가 유연하게 늘어난다. 하지만 height로 높이를 고정값을 주면 컨텐츠의 양이 늘어나면 overflow하게 된다.

CSS unit

px(pixel)

em

container block 사이즈 기준 % 적용

%

container block 기준으로 사이즈 적용

vh(viewport height)

viewport 기준으로 %가 적용된다.

vw(viewport weight)

background-size

background-size: cover; : 배경 이미지가 짤릴지언정 빈공간 없이 화면에 가득 채우는 속성
background-size: contain; : 배경 이미지 전체가 보여지게 채우는 속성

cover는 background-position property의 영향을 많이 받는다.
background-size: 100% 100%;를 주게되면 이미지의 깨짐과 상관없이 브라우저에 딱 맞게 채울 수는 있다. 하지만 이미지의 형태가 원하는 방향이 아닐 수 있기 때문에 주의해야한다.

selfclosing tag

닫는 태그가 없이 사용 가능한 태그

span

z-index

z축을 기준으로 컨텐츠의 위치를 조정하는 속성

position의 영향을 받는다.

box-sizing

border-box;