< BOX : 콘텐츠가 자리하는 영역 >
이 BOX는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다.
브라우저는 박스 모델의 크기와 속성, 위치를 근거로 하여 렌더링을 실행한다.
웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS를 통해 스타일(배경, 폰트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.
1. width, height : 가로 크기, 세로 크기
| 전체 너비 width + left padding + right padding + left border + right border + left margin + right margin 전체 높이 height + top padding + bottom padding + top border + bottom border + top margin + bottom margin |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOX MODEL - 요소의 크기</title>
<style>
p{width: 600px; height: 100px; border: 20px solid yellow}
</style>
</head>
<body>
<h3>BOX MODEL</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta in officiis ipsum, itaque placeat voluptates, fuga neque perspiciatis maxime, ducimus repellat sit. Porro similique modi officiis amet illum dolorum consequatur.</p>
</body>
</html>
| Width 640px = 0px + 20px + 0px + 600px + 0px + 20px + 0px Height 172px = 16px + 20px + 0px + 100px + 0px + 20px + 16px |
| box-sizing 기본값 : content-box 적용 |
2. padding : 요소의 안쪽 여백 / margin : 요소의 바깥 여백
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOX MODEL - 요소의 여백</title>
<style>
p{width: 600px; height: 100px; border: 20px solid yellow;
margin: 40px 30px 20px 10px; /* top right bottom left */
padding: 15px;
}
</style>
</head>
<body>
<h3>BOX MODEL</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta in officiis ipsum, itaque placeat voluptates, fuga neque perspiciatis maxime, ducimus repellat sit. Porro similique modi officiis amet illum dolorum consequatur.</p>
</body>
</html>
| p 요소의 바깥쪽 여백 | p 요소의 안쪽 여백 |
| margin-top : 40px margin-right : 30px margin-bottom : 20px margin-left : 10px |
padding : 15px |
| top, right, bottom, left 같은 값으로 동시 적용 |
3. border : 박스의 테두리
- border-style, width, color : 테두리의 형태(모양), 굵기, 색상 지정
| 각각 지정 | border-style: solid; border-width: 1px; border-color: #000 |
| 한번에 지정 | border : 1px solid #000 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOX MODEL - 요소의 테두리</title>
<style>
div.border{
border-top: 2px solid #000;
border-bottom: 2px dashed #000
}
div.b{
display: inline-block; width: 140px;
padding: 10px; margin: 10px 8px;
text-align: center; background: lightgray;
}
div.b1{border: 13px solid skyblue}
div.b2{border: 13px dotted coral}
div.b3{border: 13px dashed blue}
div.b4{border: 13px double purple}
div.b5{border: 13px groove hotpink}
div.b6{border: 13px ridge green}
div.b7{border: 13px inset gold}
div.b8{border: 13px outset darkred}
</style>
</head>
<body>
<div class="border">
<div class="b b1">solid 실선</div>
<div class="b b2">dotted 점선</div>
<div class="b b3">dashed 긴 점선</div>
<div class="b b4">double 두 줄 실선</div>
<div class="b b5">groove 액자형태</div>
<div class="b b6">ridge 액자형태</div>
<div class="b b7">inset 액자형태</div>
<div class="b b8">outset 액자형태</div>
</div>
</body>
</html>solid 실선
dotted 점선
dashed 긴 점선
double 두 줄 실선
groove 액자형태
ridge 액자형태
inset 액자형태
outset 액자형태
- border-radius : 박스 테두리 네 모서리를 둥글게 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOX MODEL - 요소의 둥근 모서리 테두리</title>
<style>
span.radius{
display: inline-block;
text-align: center;
line-height: 100px;
}
span.radius1{
width: 100px; height: 100px; background-color: lightcoral;
border-radius: 100px;
}
/* width, height, border-radius를 같은 값으로 지정 */
span.radius2{
width: 200px; height: 100px; background-color: lightskyblue;
border-radius: 100px 100px 0 0;
}
/* 가로 길이가 긴 박스에 둥글게 처리할 부분만 width 값의 1/2 지정 */
span.radius3{
width: 100px; height: 100px; background-color: lightgreen;
border-radius: 200px 0 0;
}
/* 둥글게 처리할 부분만 width, height 값의 2배로 지정 */
span.radius4{
width: 200px; height: 100px; background-color: lightpink;
border-radius: 40px 30px 20px 10px;
}
/* 네 모서리에 각각 따로 지정 */
</style>
</head>
<body>
<span class="radius radius1">정원</span>
<span class="radius radius2">반원</span>
<span class="radius radius3">1/4 원</span>
<span class="radius radius4">각각 다른 둥근 테두리</span>
</body>
</html>
정원
반원
1/4 원
각각 다른 둥근 테두리
- outline : border 영역 외곽에 테두리 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOX MODEL - 요소의 테두리 outline</title>
<style>
div.out{
width: 600px; height: 100px;
padding: 10px;
border: 5px solid #999;
outline: 3px solid red;
outline-offset: 3px;
}
</style>
</head>
<body>
<div class="out">outline은 두께가 늘어나도 주변에 공간을 확보하지 않으므로 레이아웃이 흐트러지지 않게 그저 영역 밖에 테두리를 표시할 뿐이다. <br> border와 outline 사이 간격은 outline-offset 속성을 사용한다.</div>
</body>
</html>outline은 두께가 늘어나도 주변에 공간을 확보하지 않으므로 레이아웃이 흐트러지지 않게 그저 영역 밖에 테두리를 표시할 뿐이다.
border와 outline 사이 간격은 outline-offset 속성을 사용한다.
border와 outline 사이 간격은 outline-offset 속성을 사용한다.
'CSS' 카테고리의 다른 글
| CSS- Vendor Prefix (벤더 프리픽스) (0) | 2020.08.20 |
|---|---|
| CSS-BOX MODEL 2 (box-sizing, box-shadow) (0) | 2020.08.20 |
| CSS-배경(background)2 (0) | 2020.08.17 |
| CSS-배경(background) (0) | 2020.08.16 |
| CSS-display, visibility, opacity 속성 (0) | 2020.08.13 |
댓글