09 박스모델(BOX MODEL)과 박스 사이징
박스 모델 (BOX MODEL)
- 모든 HTML요소는 박스 모양으로 구성된다.
- 박스 모델이라고 부른다
- 박스 모델은 HTML요소를 패딩, 테두리, 마진, 내용으로 구분한다.
내용(content)
텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.
패딩(padding)
내용과 테두리 사이의 간격이다.
| padding-top | 위쪽 간격을 설정한다. |
| padding-right | 오른쪽 간격을 설정한다. |
| padding-bottom | 아래쪽 간격을 설정한다. |
| padding-left | 왼쪽 간격을 설정한다. |
| padding | 모든 패딩 속성을 한꺼번에 설정한다. 방향은 위부터 시작해서 시계방향으로 설정한다. |
[예시]
div{padding-top: 20px;}
div{padding-right: 20px;}
div{padding-bottom: 20px;}
div{padding-left: 20px;}
이렇게 위의 설명처럼 방향별로 각 각 패딩값을 줄 수도 있지만 한번에 적용도 가능하다
[문법] ★ 중요
선택자{padding: top패딩값 right패딩값 bottom패딩값 left패딩값;}
선택자{padding: top패딩값 right와left패딩값 bottom패딩값;}
선택자{padding: top과bottom패딩값 right와left패딩값;}
선택자{padding: 4방향패딩값;}
[예시]
<div id="padding">안녕하세요</div>
div#padding{padding: 20px 50px 30px 10px;}
/*top:20px, right:50px, bottom:30px, left:10px*/
div#padding{padding: 20px 50px 30px;}
/*top:20px, right&left:50px, bottom:30px*/
div#padding{padding: 20px 50px;}
/*top&bottom:20px, right&left:50px*/
div#padding{padding:20px;}
/*top&bottom&right&left:20px*/
테두리(border)
내용(content)과 패딩(padding) 주변을 감싸는 테두리이다.
1) border-style
테두리를 다양한 모양으로 설정한다.
| solid | 직선 |
| dotted | 점선 |
| dashed | 길쭉한 점선 |
| double | 두줄 |
왼쪽부터 순서대로 solid, dotted, dashed, double이다.
2) border-color
테두리 색상을 설정한다. (기본은 검정)
[문법]
선택자{border-color: 색상값; }
[예시]
.border1 {
border-style: solid;
border-color: red;
}
3) border-width
테두리의 두께를 설정한다.
[문법]
선택자{border-width: 굵기값;}
[예시]
div{border-width: 5px;}
마진(margin)
테두리(border)와 이웃하는 요소 사이의 간격이다.
* 세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택한다.
[예시]
.margin1 {margin: 30px 50px 30px 50px;}
.margin2 {margin: 30px 50px 50px 50px;}
위 사진처럼 겹치는 bottom과 top 마진이 각각 적용되는것이 아니라 둘 중 큰 값으로 결정된다.
박스 사이징(box-sizing)
박스 사이징 속성의 특징은 아래와 같다.
- width,height값에 padding이나 border의 영역은 포함되지 않는다
- width가 100%로 설정되었을 경우 padding이나 border속성을 추가 할 수 없다
- css3 부터는 box-sizing 속성을 추가(padding과 border를 width와 height값에 포함)
| content-box | 기존 계산법이다. width,height값에 padding과 border를 포함하지 않는다. |
| border-box | width,height값에 padding과 border를 포함 |
[예시]
<style>
div {
width: 300px;
height: 150px;
margin: 10px;
padding: 30px;
border: 3px solid red;
}
.boxsizing1{ box-sizing: content-box;}
.boxsizing2{ box-sizing: border-box;}
</style><body>
<h2>박스사이징</h2>
<div class="boxsizing1">box-sizing = "content-box"</div>
<div class="boxsizing2">box-sizing = "border-box"</div>
</body>
[결과]
content-box를 적용한 왼쪽 사진을 보면, width,height값에 padding과 border를 포함하지 않기 때문에
contents의 크기가 300x150이다.
하지만, border-box를 적용한 오른쪽 사진을 보면 width,height값에 padding과 border를 포함하기때문에
contents의 크기는 234x84로 padding과 border의 값을 합쳐야만 300x150이 된다.
사진 출처: www.tcpschool.com/
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>