📦 Box model
CSS 원칙 1
모든 요소는 네모(박스모델)이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다 = Normal flow
(좌측 상단에 위치)
모든 HTML 요소는 box 형태로 되어있다
하나의 박스는 네 부분으로 이루어졌다
- content
- padding
- margin
(마진과 모두 상하좌우 순서로 줄 수 있다)
(숫자가 두개 있다면 상하, 좌우)
(숫자가 세개 있다면 위, 가운데, 아래) - border
기본적으로 모든 요소의 박스 사이징은 content-box
다만 우리가 일반적으로 필요한 것은 border 까지의 영역
- 박스 사이징을 border-box로 설정
CSS 원칙 2
모든 요소는 네모(박스모델)이고, 좌측상단에 배치
display에 따라 크기와 배치가 달라진다
- display: block
줄바꿈이 일어나는 요소
화면 전체의 가로폭 차지
블록 레벨 안에 인라인 레벨 요소가 들어갈 수 있다 - display: inline
줄바꿈이 일어나지 않는 행의 일부 요소
content를 마크업 하고 있는 만큼만 가로폭 차지
width, height, margin-top, margin-bottom을 지정할 수 없다
상하 여백은 line-height로 지정 - display: inline-block
block과 inline 레벨 요소의 특징을 모두 가짐
inline 처럼 한 줄에 표시 가능하고, block 처럼 width, height, margin 속성을 모두 지정 - display: none
해당 요소를 화면에 표시하지 않고 공간조차 부여되지 않음
visibility: hidden은 해당 요소가 공간은 차지하나 화면에 표시만 하지 않는다
만약 block의 크기를 줄인다면(너비를 가질 수 없다면) 자동으로 margin이 부여된다
속성에 따른 수평 정렬
내(inline)가 정렬하는게 아닌 부모(block)가 정렬해 주는 것이다
CSS Position
문서 상에서 요소의 위치를 지정
어디를 기준으로 어떻게 배치시킬까?
- static
모든 태그 기본 값
요소 배치 순서에 따름(좌측 상단)
요소 내에서 배치될 때는 부모 요소 위치 기준으로 배치 - relative: 상대 위치
자기 자신의 static 위치를 기준으로 이동
normal flow 유지
레이아웃에서 요소가 차지하는 공간은 static일 때와 같음 - absolute: 절대 위치
주는 순간 부모를 찾는다 (포지션이 static이 아닌 부모)
요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않음
normal flow 벗어남
static이 아닌 가장 가까이 있는 부모/조상 요소 기준으로 이동 (없는 경우 body) - fixed: 고정 위치
일반적 문서 흐름에서 제거 후 레이아웃 공간 차지 하지 않음
normal flow 벗어남
부모 요소와 관계없이 뷰포트 기준으로 이동
스크롤 시에도 항상 같은 곳에 위치 - sticky: 스크롤에 따라 static > fixed로 변경
속성을 적용한 박스는 평소에 문서 안에서 static 상태와 같이 일반적인 흐름에 따르지마
스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정
