티스토리 뷰
CSS 속성 강좌 3번째 포스팅입니다. 오늘 포스팅 할 내용은 box-sizing 속성인데요. 해당 속성은 특정 엘리먼트의 크기를 어떻게 결정 할 것인지를 선택 할 수 있도록 해주는 속성입니다.
div 태그로 정의 된 박스형태의 레이어가 있고 CSS 속성부여로 박스 영역의 width와 height 크기를 각각 200px로 지정하였다고 가정 해보겠습니다. 이 때 box 영역 사이즈에 영향을 끼칠 수 있는 border 값과 padding 값도 지정을 하였다면 border값과 padding 값도 전체 영역 크기에 포함이 되면서 의도했든 의도하지 않았든 200px 보다 더 큰 width와 height 크기를 가지는 영역이 설정이 됩니다.
box-sizing 속성은 padding이나 border 값을 전체 영역크기에 포함 시킬지 말지를 선택 할 수 있게 해줍니다. 따로 지정하지 않으면 크기를 포함시킵니다.
1. content-box 와 border-box 속성 값
- content-box : 고정 크기 이외의 다른 요소들에 의해 전체 영역 크기 변경
- border-box : 고정 크기 이외의 다른 요소들에 의해 전체 영역 크기 변경이 안됨
box-sizing 속성이 default 값은 content-box로 고정 크기 이외의 다른 요소들에 의해 전체 영역의 크기에 영향을 받습니다. border-box로 지정을 하게 되면 고정 크기 이외의 다른 요소들에 의해 고정 된 전체 영역의 크기에는 영향을 주지 않습니다. 즉, width와 padding을 200px로 지정을 하고 border 값을 지정을 한다고 해도 전체 크기는 200px로 변화가 없습니다. 아래 샘플 예제로 살펴 보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>boxsizing 속성</title> <style> div { background-color : red; margin-top : 5px; width : 200px; height : 200px; text-align : center; line-height: 200px; border : 10px solid black; } .contentbox { box-sizing : content-box; } .borderbox { box-sizing : border-box; } </style> </head> <body> <div class = "contentbox"> contentbox 영역</div> <div class = "borderbox">borderbox 영역</div> </body> </html> | cs |
▼ <div> 태그를 통해 두 개의 영역을 정의 하였습니다. 두 영역다 공통적으로 width와 height 그리고 border 값을 지정을 해주고 box-sizing 속성값만 다르게 하였습니다. 아래 웹 페이지에서 나오는 형태를 보겠습니다.
▼ 분명히 두 개의 영역에 같은 size를 적용했음에도 불구하고 size가 다른 것을 확인 할 수 있습니다. contentbox 영역의 경우는 border 크기가 합쳐져 전체적인 영역의 크기가 더 커지는 것을 확인 할 수 있습니다. box-sizing 속성값에 따라 border가 적용 된 형태를 알면 더 이해가 쉬운데 contentbox 영역은 고정 사이즈 box 영역 바깥으로 border가 생긴 것이고 borderbox 영역의 경우는 고정 사이즈 box 영역의 안쪽으로 border가 적용이 되면서 기존의 200px를 유지하고 있는 형태입니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] CSS 속성 강좌 #4 - border 속성 (0) | 2019.04.04 |
|---|---|
| [HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이 (0) | 2019.03.31 |
| [HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility (0) | 2019.03.29 |
| [HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자 (0) | 2019.03.28 |
| [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자 (0) | 2019.03.27 |