브라우저 기본 배치 방식은 FlowLayout으로, 코드 순서대로 요소를 배치한다.
요소 배치 방식
- padding: 부모가 자식의 위치 지정
- margin: 스스로 위치 지정
- position, transform: CSS 표준 방식
position
좌표값
- (x → left, y → top)으로 위치를 지정하며, 종류에 따라 원점이 다르다.
- static: 기본값, FlowLayout 방식, 좌표값 사용 불가
- absolute: 절대 좌표, 직계 조상 중 position이 static이 아닌 첫 번째 요소를 원점으로, 원래 공간 사라짐
- relative: 상대 좌표, 원래 공간 유지한 채 이동
- fixed: 고정 좌표, 브라우저 좌측 상단 원점, 원래 공간 사라짐
- sticky: 영역이 보일 때 relative, 안 보일 때 fixed
좌표 속성
- left, right, top, bottom
- z-index로 요소의 쌓이는 순서 지정
box model
-
width/height: 콘텐츠 영역의 크기
실제 보이는 크기: width(height) + padding + border -
box-sizing 정책
content-box(기본값): width/height == 콘텐츠 영역 크기
border-box: width/height == 콘텐츠 + padding + border, 실제 보이는 상자의 크기