CSS박스 모델이란 웹문서의 내용을 박스 형태로 정의하는 방법을 가리킵니다. 이 박스 모델들이 모여 웹문서를 이루며 그 안에는 마진과 패딩, 테두리 등 여러 겹의 박스가 들어있습니다. 이 개념은 CSS에서 자주 사용되는 개념이므로 잘 기억해두어야 합니다.
블록 레벨 요소와 인라인 레벨 요소
박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라집니다.
그러므로 먼저 블록 레벨 요소와 인라인 레벨 요소에 대해 알아보도록 하겠습니다.
블록 레벨(block-level)요소란
태그를 사용해 요소에 삽입했을 때 혼자 한 줄을 차지하는 요소입니다.
한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미입니다.
즉, 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄 바꿈이 된 것처럼 보입니다.
따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야만 합니다.
<div> 태그나 <p> 태그 등이 대표적인 블록 레벨 요소입니다.
인라인 레벨(inline-level) 요소란
줄을 차지하지 않는 요소입니다.
즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.
block과 달리 줄 바꿈이 되지 않고, width와 height를 지정할 수 없습니다.
word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다.
문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄 바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있습니다.
<img> 태그나 <strong> 태그 등이 인라인 레벨 요소를 만드는 태그입니다.
다음은 블록 레벨 요소와 인라인 레벨 요소를 만드는 대표적인 태그들입니다.
박스 모델
앞에 배운 웹 문서의 블록 레벨 요소들은 모두 박스 형태입니다.
예를 들어 <p> 태그를 사용하는 텍스트 단락은 블록 레벨 요소인데 텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가집니다.
스타일 시트에서는 이렇게 박스 형태인 요소를 '박스 모델 요소'라고 부릅니다.
CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다. 하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역은 안쪽부터 순서대로 콘텐츠 영역, padding(패딩) 영역, border(테두리) 영역, 그리고 margin(바깥 여백) 영역이라고 부릅니다.
이때 마진이나 패딩은 웹 문서에 하나의 콘텐츠만 표시한다면 반드시 필요하지 않을 수도 있지만 다른 콘텐츠들과의 간격이나 배치 등을 고려한다면 필요한 박스 모델의 중요한 개념입니다.
width, height 속성 - 콘텐츠 영역의 크기
박스 모델에서 콘텐츠 영역의 크기를 지정할 때는 너비를 지정하는 width속성과 높이를 지정하는 height속성을 사용합니다.
두 속성의 속성 값은 다음과 같습니다.
max-width 속성
max-width 속성은 해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정합니다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.
width 속성으로 너비를 설정하면, 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성하게 됩니다.
하지만 max-width 속성으로 너비를 설정하면 다음과 같이 좀 더 유연한 결과를 얻을 수 있습니다.
max-width 속성으로 너비를 설정하면 줄어드는 웹 브라우저의 크기에 맞춰 해당 HTML 요소의 너비도 자동으로 줄어듭니다.
min-width 속성
min-width 속성은 해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정합니다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 너비에 제한을 두지 않겠다는 의미입니다.
min-width 속성이 설정된 요소에 width 속성 값을 따로 설정하지 않으면 초기 너비(width)는 100%를 가지게 됩니다.
이때 웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어듭니다.
하지만 웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성하게 됩니다.
max-height 속성
max-height 속성은 해당 HTML 요소가 가질 수 있는 최대 높이(height)를 설정합니다.
이 속성의 기본 설정값은 none이며, 해당 HTML 요소의 크기에 따라 높이가 자동으로 설정됩니다.
max-height 속성으로 최대 높이를 설정하면, 해당 HTML 요소의 높이를 설정된 높이 이하로 제한합니다.
만약 해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성하게 됩니다.
min-height 속성
min-height 속성은 지정된 HTML 요소가 가질 수 있는 최소 높이(height)를 설정합니다.
이 속성의 기본 설정값은 0이며, 해당 HTML 요소의 높이에 제한을 두지 않겠다는 의미입니다.
min-height 속성을 설정하면 해당 HTML 요소의 높이를 설정된 높이 이하로 제한합니다.
즉 height 속성 값이 min-height 속성 값 이하로 낮아지지 않도록 합니다.
이러한 min-height 속성 값은 max-height 속성 값과 height 속성 값보다 먼저 적용됩니다.
실제 콘텐츠 크기 계산하기
CSS 박스 모델의 width 속성은 콘텐츠 영역의 너비를 말하기 때문에 여러 요소를 웹문서에 배치할 때 실제 박스가 차지하는 너비는 width값에 좌우 패딩 두께와 좌우 테두리 두께를 함께 계산합니다.
즉, HTML 요소의 전체 너비(width)를 계산하는 공식은
width + left padding + right padding + left border + right border + left margin + right margin입니다.
또한, HTML 요소의 전체 높이(height)를 계산하는 공식은
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin입니다.
왜냐하면 마진이란 테두리(border)와 이웃하는 요소 사이의 간격이면서, 배경색의 영향을 받지 않기 때문입니다.
하지만 HTML 요소가 차지하는 크기에는 포함됩니다.
display속성-화면 배치 방법 결정하기
블록 레벨 요소와 인라인 레벨 요소는 변할 수 없는 성격이 아닙니다
display속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 그 반대로 적용도 가능합니다.
세로로 표시되는 목록을 가로 내비게이션으로 바꾸거나, 한 줄로 표시되는 이미지에 여백과 테두리를 추가해 갤러리 형태로 표시할 때 display속성을 많이 사용합니다.
블록 레벨 요소와 인라인 레벨 요소를 지정할 때 display속성을 이용하지만, 원래 display속성은 해당 요소가 화면에 어떻게 보일 지를 지정할 때 사용하는 것입니다.
이렇게 HTML 요소의 display 속성 값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경할 수 있습니다.
<예제 문법>
|
1
2
3
|
<style>
li { display: inline; }
</style>
|
cs |
block 속성 값
display:block;로 지정하면 해당 요소를 블록 레벨로 지정합니다.
블록 레벨 요소는 기본적으로 마진 패딩 값을 가집니다.
여러 개의 div를 쌓을 때 디자인이 벌어지지 않게 하기 위해서는 마진, 패딩 값을 0으로 세팅하는 것이 좋습니다.
예제를 보며 설명하겠습니다.
|
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
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>display 속성</title>
<style>
#inline img {
margin:10px;
}
#block img {
display:block;
margin:10px;
}
</style>
</head>
<body>
<div id="inline">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
</div>
<div id="block">
<img src="images/pic1.jpg">
<img src="images/pic2.jpg">
<img src="images/pic3.jpg">
</div>
</body>
</html>
|
cs |
<결과>
① 첫 번째 <div>에는 <img> 태그에 display속성을 따로 지정하지 않았기 때문에 이미지 3개가 인라인으로 배치됩니다.
② 두 번째 <div>에는 display:block;을 지정했기 때문에 블록 레벨 요소처럼 한 줄에 이미지 하나씩, 즉 세로 배치됩니다.
inline속성 값
display 속성을 inline으로 지정하면 블록 레벨 요소를 인라인 레벨로 바꿀 수 있습니다.
서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시하기 위해 사용되는데 주로 목록에서 사용됩니다.
|
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
34
35
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>display 속성</title>
<style>
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
padding:10px 15px;
margin-right:20px;
border-top:3px solid #222;
}
nav ul li:hover {
background-color:rgb(196, 196, 196);
}
nav ul li a {
color:black;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</body>
</html>
|
cs |
<결과>
이처럼 목록 항목에 display:inline;을 지정하면 항목을 한 줄로 배치할 수 있고 목록을 수평 내비게이션용으로 사용할 수 있습니다.
inilne-block 속성 값
웹 요소를 위 예제와 같은 display:inilne;으로 지정하면 한 줄로 배치할 수는 있지만 너비나 높이, 위아래 마진, float 같은 값이 정확히 적용되지 않습니다.
요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶다면 display 속성 값 중 inilne-block;을 사용하면 됩니다.
이 속성은 블록 레벨 요소와 인라인 레벨 요소 두 가지 특성을 모두 가집니다. 따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용됩니다.
|
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
34
35
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>display 속성</title>
<style>
nav {
width:100%;
height:60px;
background-color: #069;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
margin:20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</body>
</html>
|
cs |
<결과>
none 속성 값 - HTML 요소 숨기기
이 속성 값을 지정하면 요소를 렌더링 하지 않도록 설정하며 해당 요소를 화면에 아예 표시하지 않습니다.
visibility: hidden;도 비슷한 역할을 하는데 visibility은 화면에서 감추기만 할 뿐 원래 요소가 있는 공간은 그대로 차지하지만 display:none;은 아예 공간조차 차지하지 않습니다.
웹사이트를 반응형 웹 디자인 기법으로 작성할 때 pc용 화면에서는 표시하지만 모바일 화면에서는 보이지 않도록 하고 싶은 부분이 있다면 display:none;를 사용하도록 합니다.
참고) visibility 속성
visibility 속성은 HTML 요소가 웹 페이지에 표현될지 아닐지만을 결정합니다.
따라서 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 여전히 존재하게 되며, 코드 내에도 당연히 존재하게 됩니다.
visibility 속성을 자바스크립트와 함께 사용하면 매우 복잡한 메뉴나 레이아웃을 손쉽게 만들 수 있습니다.
visibility 속성에 사용할 수 있는 속성 값은 다음과 같습니다.
- visible : 해당 HTML 요소를 웹 페이지에 나타냅니다.
- hidden : HTML 요소를 웹 페이지에 나타내지 않습니다. 하지만 여전히 웹 페이지의 레이아웃에는 존재합니다.
- collapse : 이 속성값은 동적인 테이블에서만 사용할 수 있으며, 테이블의 테두리를 한 줄만 보여줍니다.
'CSS' 카테고리의 다른 글
| float속성 / float,clear (0) | 2020.04.13 |
|---|---|
| 여백을 조절하는 속성 / margin,padding (0) | 2020.04.12 |
| 가상 선택자 (0) | 2020.04.07 |
| 속성 선택자 (0) | 2020.04.07 |
| CSS3 기본 사용법 (0) | 2020.03.23 |
