📌 박스의 유형
1. 블록 박스
- 양옆으로 공간 100% 사용 ; 수직 정렬
- width, height 속성 사용하여 스타일 건트롤 가능
- padding, margin, border 이용하여 스타일 컨트롤 가능
2. 인라인 박스
- 컨텐츠 박스만큼의 크기 가짐 ; 수평 정렬
- width, height 속성 사용할 수 없음
- padding, border 사용할 수 있지만 margin은 좌우만 조절 가능
3. 인라인 블록 박스
- inline 처럼 수평 정렬 가능
- block 처럼 width, height, margin, padding, border 지정 가능.
📌 박스의 유형 결정하는 속성 : display
1. 외부 디스플레이 타입
- 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미침
div{ display:inline }
div{ display:block }
div{ display:inline-block }2. 내부 디스플레이 타입
- flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축 혹은 Y축의 단방향으로 설정
- grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치
📌 마진 겹침 현상 (margin collapsing)
- '인접하는' 블럭요소 '상하단' 마진 겹치는 것 (좌우는 X)
- 큰 값을 가진 margin 값으로 겹친다.
마진겹침 해결 방법
📌 대체 css 박스 모델
표준 css 박스 모델에서 요소의 크기는 컨텐츠 박스 + 보더 박스 +패딩값을 모두 더해 정해짐
대체 박스 모델을 사용하여 width값과 height 값으로 박스 크기 정해짐/
box-sizing
<head>
<style>
* {margin: 0;}
h1 {
width: 100px;
height: 30px;
border: 3px solid #228B22;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1></h1>
</body>
생각이 길면 용기는 사라진다.