오늘은 CSS에서의 박스 모델에 대해 알아보자!
모든 콘텐츠는 그림과 같이 고유한 영역이 존재한다.
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다.
박스는 직사각형이고 너비(width)와 높이(height)를 가진다. CSS를 이용해 속성과 값으로 그 크기를 설정할 수 있다.
박스의 종류
| 줄 바꿈이 되는 박스 | 옆으로 붙는 박스 |
| block | inline , inline-block |
여기서 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부른다.
줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.
코드를 통해 박스의 종류에 대해 알아보자 !
HTML 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="boxEx.css">
</head>
<body>
<div id="block">block</div>
<div id="inline">inline</div>
<div id="inline-block">inline-block</div>
</body>
</html>
CSS파일
#block{
display: block;
background-color: blue;
width: 500px;
height: 100px;
}
#inline{
display: inline;
background-color: aquamarine;
width: 500px;
height: 100px;
}
#inline-block{
display: inline-block;
background-color: blueviolet;
width: 500px;
height: 100px;
}결과는 ?
앞에서 말한 것 처럼 block과 inline-block은 크기 조절이 가능하고 inline은 불가능하다 . 또한 block은 줄바꿈이 되지만 inline 과 inline-block은 줄바꿈이 되지 않는것을 볼 수 있다.
우리가 자주쓰는 태그 중 줄바꿈이 되는 요소와 그렇지 않은 요소가 있다.
| 줄 바꿈이 되는 요소 | 줄 바꿈이 되지 않는 요소 |
| <h1> , <p> ,<div>,<footer>,<hr>,<form> 등등.. | <span> , <a> ,<button> 등등 .. |
따라서 박스 모델의 특징을 정리해보면 아래 표와 같다.
| block | inline-block | inline | |
| 줄바꿈 여부 | 줄바꿈이 일어남 | 줄바꿈이 일어나지 않음 | 줄바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
박스를 구성하는 요소
박스를 구성하는 요소로는 content, padding, border, margin 이 존재한다.
border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 존재한다.
박스를 구성하는 요소로는 위의 4가지만 기억하면 되고 각각의 속성을 통해 박스를 디자인 할 수 있다.
만약 margin 의 위 쪽의 공간을 늘리고 싶다면 margin-top: 10px; 이렇듯 코드를 작성하면 된다.
padding도 margin과 같은 규칙으로 디자인 할 수 있다.
궁금증이 하나 생긴다. 만약 콘텐츠의 크기를 박스의 크기보다 더 많이 차지하게 하면 어떻게 될까 ?
정답은 박스 크기보다 콘텐츠가 큰 경우 콘텐츠가 박스 바깥으로 빠져나온다. 하지만 이런 경우를 원하는 사람은 많지 않으므로 이런 난감한 경우에는 overflow: auto; 속성을 사용하면 된다. 박스안에 스크롤을 추가해준다.
박스 크기 측정 기준
박스 크기를 측정하는 기준은 아래의 코드와 함께 설명해보겠다.
<div id="container">
<div id="inner">
안쪽 box
</div>
</div>#container {
width: 300px;
padding: 10px;
background-color: yellow;
border: 2px solid red;
}
#inner {
width: 100%;
height: 200px;
border: 2px solid green;
background-color: lightgreen;
padding: 30px;
}처음 이렇게 코드를 짠 사람은 contnainer의 width에 300px의 크기를 지정했으므로 너비가 300px라고 생각할 수 있다. 하지만 해당 요소의 너비는 324px이다.
그 이유는 width는 콘텐츠 영역의 너비를 의미하고 padding으로 좌우 10px , border로 좌우 2px를 늘려주었기 때문에 이를 모두 더한 300 + 10 + 10 + 2 + 2 = 324 의 값을 가진다.
따라서 처음 레이아웃을 디자인 할 때 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인 하는 실수를 범한다.
그러므로 우리는 여백과 테두리 두께를 모두 포함하여 박스 크기를 계산하게 만들 수 있도록 모든 요소를 선택해
box-sizing 속성을 추가해 border-box 라는 값을 추가해 줄것이다.
*{
box-sizing: border-box;
}위와 같이 적용을 하게 된다면 모든 박스에서 여백과 테두리를 포함한 크기로 계산하기 때문에 여백과 테두리를 고려하지 않고 우리가 생각했던 크기로 박스 사이즈를 지정해 줄 수 있을 것이다.
'HTML-CSS-JavaScript' 카테고리의 다른 글
| 👀 브라우저의 렌더링 원리에 대해 궁금해졌다 .. ! (0) | 2024.03.10 |
|---|---|
| [javascript] 배열 split 사용하기 (0) | 2023.02.27 |
| [CSS] CSS selector (0) | 2023.02.15 |
