html/css - CSS박스 모델
업데이트:
CSS박스 모델
블록 레벨 요소와 인라인 레벨 요소
블록 레벨 요소
태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. <div>태그나 <p>태그가 대표적인 태그이다.
인라인 레벨 요소
줄을 차지하지 않는 요소이다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. <img>태그나 <strong>태그 등이 인라인 레벨 요소를 만드는 태그이다.
박스 모델(box model) - 박스 형태의 콘텐츠
블록레벨 요소들은 모두 박스 형태이다. 스타일 시트에서는 이렇게 박스 형태인 요소를 박스 모델(box model)요소라고 부른다. 웹 문서 안에서 여러 요소들을 원하는 위치에 배치하려면 CSS박스 모델에 대해 잘 알고 있어야 한다. 그래야만 한 줄에 배치할지, 줄을 바꾸어 배치할지, 요소와 요소 사이의 간격을 어떻게 조절할 지 결정할 수 있기 때문이다.
그림에서 보는 것 처럼 패당과 테두리, 마진은 각각 상하좌우 네 방향으로 나뉘어져 있어 네 방향의 스타일을 따로 설정할 수 있다.
width, height속성 - 콘텐츠 영역의 크기
박스 모델에서 콘텐츠 영역의 크기를 지정할 때 콘텐츠 영역의 너비를 결정하는 width속성과 콘텐츠 영역의 높이를 결정하는 height속성을 사용한다.
| 속성 값 | 설명 |
|---|---|
| <크기> | 너비나 높이 값을 px이나 cm같은 단위와 함께 수치로 표현 |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정 |
| auto | 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. (기본 값) |
px로 값을 직접 지정한 박스는 고정이지만 %로 지정한 박스는 웹 문서 창의 크기에 따라 달라진다.
display 속성 - 화면 배치 방법 결정하기
display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다.
이 방법은 어떤 때 필요한가?
- 세로로 표시되는 목록을 가로 네비게이션으로 바꿀 때, 한 줄로 표시되는 이미지에 여백과 테두리를 추가해 갤러리로 표시할 때 이 방법을 사용한다.
1. block 속성 값
display:block;으로 지정하면 해당 요소를 블록 레벨로 지정한다.
-
인라인으로 배치된 이미지
-
블록으로 배치된 이미지
<head>
<meta charset="utf-8">
<title>display 속성</title>
<style>
div {
margin:20px;
border:1px solid #ccc;
border-radius:5px;
}
#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>
2. inline 속성 값
display 속성을 inline으로 지정하면 블록 레벨 요소를 인라인 레벨로 바꿀 수 있다.
서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시하기 위해 사용되는데 주로 목록에서 사용된다. <li>태그는 블록 레벨 요소이기 때문에 각 항목은 수직으로 배치되지만, display속성을 사용하여 항목을 한 줄로 배치할 수 있고 목록을 수평 내비게이션용으로 사용할 수 있다.
3. inline-block 속성 값
웹 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶다면 display속성 값 중 inline-block을 사용하면 된다. 이 속성은 블록 레벨 요소와 인라인 레벨 요소 두 가지 특성을 모두 가진다.
<head>
<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>
<h2>애완견 종류</h2>
</nav>
- display:inline;으로 지정했을 경우
4. none속성 값
이 속성 값을 지정하면 해당 요소를 화면에 아예 표시하지 않는다. visibility:hidden;도 비슷한 역할을 하는데 visibility속성은 화면에서 감추기만 할 뿐 원래 요소가 있는 공간은 그대로 차지하지만 display:none;은 아예 공간조차 차지하지 않는다.
웹 사이트를 반응형 웹 디자인 기법으로 작성할 때 PC용 화면에서는 표시하지만 모바일 화면에서는 보이지 않도록 하고 싶은 부분이 있다면 그 부분을 display:none;으로 처리하면 된다.
반응형 웹 디자인 기법이란, 사용자가 접속하는 브라우저 화면 크기에 따라 PC용 웹 사이트를 보여 주거나 모바일용 웹 사이트를 보여 주도록 작성하는 방법을 말한다.
테두리 관련 속성들
border-style 속성 - 테두리 스타일 지정하기
테두리 스타일을 지정하는 border-style속성은 기본 값이 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다. 따라서 테두리를 그리기 위해서는 맨 먼저 테두리 스타일을 지정해야 한다.
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-width:5px; /* 테두리 굵기 */
}
.box1 { border-style:solid; } /* 실선 */
.box2 { border-style:dotted; } /* 점선 */
.box3 { border-style:dashed; } /* 선으로 된 점선 */
</style>
border-width 속성 - 테두리 두께 지정하기
이 속성을 이용하면 테두리 두께를 지정할 수 있다.
border-top-width: <크기> | thin | medium | thick
border-right-width: <크기> | thin | medium | thick
border-left-width: <크기> | thin | medium | thick
border-bottom-width: <크기> | thin | medium | thick
border-width: <크기> | thin | medium | thick
border-color속성 - 테두리 색상 지정하기
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border-style:dashed; /* 테두리 스타일 - 선으로 된 점선 */
border-width:2px; /* 테두리 굵기 - 2px */
}
.box1 { border-color:red; } /* 색상 - 빨강 */
.box2 { border-color:blue; } /* 색상 - 파랑 */
</style>
border 속성 - 테두리 스타일 묶어 지정하기
두께와 색상, 스타일 순서는 상관 없다.
border-top : <두께> <색상> <스타일>
border-bottom : <두께> <색상> <스타일>
border-right : <두께> <색상> <스타일>
border-left : <두께> <색상> <스타일>
border : <두께> <색상> <스타일>
<style>
nav {
width:100%;
height:60px;
background-color: #069;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
margin:20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
</style>
border-radius 속성 - 박스 모서리 둥글게 만들기
<style>
div {
width: 300px; /* 너비 */
height: 200px; /* 높이 */
margin : 20px; /* 영역간 마진 */
display: inline-block; /* 가로로 배치 */
}
.round {
border:2px solid red; /* 2px짜리 빨강 실선 */
border-radius:20px; /* 모서리 20px 만큼 라운딩 */
}
#bg {
background:url(images/pic1.jpg) no-repeat; /* 배경 이미지 */
background-size:cover; /* 영역을 다 채우게 */
}
</style>
위 예시는 네 모서리가 모두 둥글지만 특정 모서리만 둥글게 하고 싶다면 border-top-left-radius, border-top-right-radius와 같이 지정한다.
타원 형태로 둥글게 만들기
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border:2px solid black;
background:#ffd800;
}
.round1 { border-top-left-radius:100px 50px; } /* 왼쪽 위 라운딩 */
.round2 { border-bottom-right-radius:50% 30%; }
.round3 { border-top-right-radius:50px;}
</style>
box-shadow속성 - 선택한 요소에 그림자 효과 내기
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
width:200px;
height:100px;
display:inline-block;
margin:15px;
border:2px solid;
border-radius:20px;
}
.box1{ box-shadow:2px -2px 5px 0px black;}
.box2{ box-shadow:5px 5px 15px 5px gray;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
여백을 조절하는 속성들
margin속성 - 요소 주변 여백 설정하기
마진(margin)은 현재 요소 주변의 여백이다. 따라서 마진을 이용하면 한 요소와 다른 요소 사이의 간격을 조절할 수 있다.
| 속성 값 | 설명 |
|---|---|
| <크기> | 너비나 높이 값을 px(픽셀)이나 cm(센티미터)같은 단위와 함께 수치로 지정한다. |
| <백분율> | 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정한다. |
| auto | display속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. |
.box1 { margin:30px 50px 30px 50px;} /* 마진 - 30px 50px 30px 50px */
.box2 { margin:30px 50px;} /* 마진 - 30px 50px 30px 50px */
.box3 { margin:50px;} /* 마진 - 50px 50px 50px 50px */
.box4 { margin:30px 5px 10px; } /* 마진 - 30px 5px 10px 5px */
만약 margin-left와 margin-right를 auto로 지정하면 요소의 너비 값을 뺀 나머지 공간의 좌우 마진을 똑같이 맞춘다. 이 방법은 웹 요소를 중앙에 배치하려고 할 때 자주 사용한다.
<style>
.box {
width:200px; /* 너비 */
height:300px; /* 높이 */
background:#ff6a00; /* 배경색 */
margin:0 auto; /* 마진 - 0 auto 0 auto */
}
</style>
마진 중첩(margin overlap)현상
박스 모델의 마진 속성을 사용할 때 주의할 점이 있다. 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것이다. 이런 현상을 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 한다.
<div>태그를 사용해 영역을 만들고 그 영역의 네 방향 margin값을 30px로 지정한 후 사각형 3개를 세로배치했을때 중간 마진은 60px일 것이다. 결과대로 나오는지 한번 확인해보자.
<style>
* {
box-sizing:border-box;
}
div {
width:200px; /* 너비 */
height:100px; /* 높이 */
margin:30px; /* 마진 */
}
#box1 {
background:rgb(0, 77, 243);
}
#box2 {
background:rgb(255, 72, 0);
}
#box3 {
background:rgb(18, 219, 0);
}
</style>
하지만 예상한 결과대로 출력되지 않고 마진이 30px로 균등하게 나오는 것을 볼 수 있다. 이렇게 된 이유는 여러 요소를 세로로 배치할 때 맨 위의 마진과 맨 아래 마진에 비해 중간에 있는 마진들이 너무 커지는 것을 방지하기 위한 것이다.
display:inline-block을 사용해서 div요소를 가로로 배치하면 각 요소의 마진이 그대로 유지되어 각 사각형 사이에는 총 60px의 마진이 생기게 된다.
<style>
* {
box-sizing:border-box;
}
div {
width:200px; /* 너비 */
height:100px; /* 높이 */
margin:30px; /* 마진 */
display:inline-block; /* 가로로 배치 */
}
#box1 {
background:rgb(0, 77, 243);
}
#box2 {
background:rgb(255, 72, 0);
}
#box3 {
background:rgb(18, 219, 0);
}
</style>
padding 속성 - 콘텐츠 영역과 테두리 사이 여백 설정하기
패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 다시 말해 테두리 안쪽의 여백이라고 생각하면 편하다.
<style>
div {
width:200px; /* 너비 */
height:auto; /* 높이 */
background:#0094ff; /* 배경색 */
display:inline-block; /* 가로로 배치 */
margin:15px; /* 마진 - 15px 15px 15px 15px */
color:white; /* 글자색 */
}
.box1 { padding:10px 30px 10px 30px;} /* 패딩 - 10px 30px 10px */
.box2 { padding:10px 30px;} /* 패딩 - 10px 30px 10px 30px */
.box3 { padding:10px;} /* 패딩 - 10px 10px 10px 10px */
</style>
</head>
<body>
<div class="box1">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. </div>
<div class="box2">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. </div>
<div class="box3">패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. </div>
</body>
댓글남기기