1. box
box의 기본 넓이는 부모(브라우저 창 자체)를 가득 채우고, 높이는 자신이 포함하고 있는 내용만큼만 차지한다.
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box1{ background-color: tomato; }
#box2{ background-color: green; }
#box3{ background-color: powderblue; }
</style>
</head>
<body>
<div id="box1">빨간 박스</div>
<div id="box2"></div>
<div id="box3">파란 박스</div>
</body>
</html>
[출력 결과]
▶ box의 기본 높이는 자신이 포함하고 있는 내용만큼인데, box2는 내용이 없기 때문에 출력되지 않는다.
1-1. box의 크기를 구성하는 속성
| 속성 | 내용 | 표현방법 |
| width | 가로폭 | px, % |
| height | 높이 | px, % |
| border | 박스의 테두리 | 굵기, 종류, 색상 |
| padding | 테두리와 내용 영역 사이의 여백 | 여백 사이즈에 대한 px 단위 |
***padding 속성에 대한 좀 더 자세한 내용
- 내용 영역과 border 사이의 여백의 크기
- 표시 위치에 따라 값이 세분화되어 있다.
padding-top : 상단 여백 px
padding-right : 우측 여백 px
padding-bottom : 하단 여백 px
padding-left : 왼쪽 여백 px
ex. padding : 10px 5px 3px 8px(상단 10px, 우측 5px, 하단 3px, 왼쪽 8px) - 공백으로 구분하여 2개의 값을 지정할 경우, 첫 번째 값은 "상/하", 두 번째 값은 "좌/우"로 지정된다.
ex. padding : 10px 5px(상/하 여백 10px, 좌/우 여백 5px) - 값 1개는 상하좌우 모두 같은 크기의 여백 지정을 뜻함
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 200px;
height: 50px;
margin: 10px;
}
.box1{
background-color: tomato;
}
.box2{
background-color: green;
border: 10px solid #000000;
}
.box3{
background-color: powderblue;
padding : 20px;
}
.box4{
background-color: gray;
border: 10px solid #000000;
padding : 20px;
}
</style>
</head>
<body>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>
</body>
</html>▶ margin은 border 바깥쪽의 여백을 의미한다.
[출력 결과]
▶ box1 | (콘텐츠 영역 : 넓이 200, 높이 50) = 넓이 200, 높이 50
▶ box2 | (콘텐츠 영역 : 넓이 200, 높이 50) + (border : 상하좌우 10) = 넓이 220, 높이 70
▶ box3 | (콘텐츠 영역 : 넓이 200, 높이 50) + (padding : 상하좌우 20) = 넓이 240, 높이 90
▶ box4 | (콘텐츠 영역 : 넓이 200, 높이 50) + (border : 상하좌우 10) + (padding : 상하좌우 20) = 넓이 260, 높이 110
1-2. box-sizing
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성
- content-box : 콘텐츠 영역을 기준으로 크기를 정한다.(기본 default값)
▶ 넓이(width)를 주면 콘텐츠 영역에 지정된다. padding, border 값에 따라 box 크기가 달라진다. - border-box : 테두리를 기준으로 크기를 정한다.
▶ 넓이(width)를 주면 box에 지정된다. padding, border 값이 주어진 box 크기 내부에서 설정되고 box의 크기는 달라지지 않는다.
[ 예제 코드 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
margin: 10px;
width: 150px;
}
#content-box{
border: 10px solid black;
}
#small{
box-sizing: border-box;
border: 10px solid black;
}
#Large{
box-sizing: border-box;
border: 50px solid black;
}
</style>
</head>
<body>
<div id="content-box">Hello</div>
<div id="small">Hello</div>
<div id="Large">Hello</div>
</body>
</html>
[ 출력 결과 ]
1-3. 크기 속성에 백분율 사용
box의 속성 크기(width, height)를 백분율로 지정할 경우, 비율에 대한 기준이 되는 것은 부모 요소의 width와 height이다.
[예제 코드 1]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.parent{
background-color: tomato;
border: 10px dotted red;
width: 200px;
height: 50px;
margin: 30px;
}
.child1{
background-color: powderblue;
width: 100%;
height: 100%;
}
.child2{
background-color: powderblue;
width: 100%;
height: 100%;
padding: 10px 20px;
border: 5px solid purple;
}
.child3{
background-color: powderblue;
width: 150px;
height: 20px;
padding: 10px 20px;
border: 5px solid purple;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">child1</div>
</div>
<div class="parent">
<div class="child2">child2</div>
</div>
<div class="parent">
<div class="child3">child3</div>
</div>
</body>
</html>
[출력 결과 1]
▶ child1과 child2 모두 width, height 100%로 부모요소의 크기를 그대로 상속한다.
▶ 다만, child2는 padding과 border를 지정해줌으로써, 부모의 크기에 여백과 테두리의 크기를 더하므로, 부모보다 커진다.
▶ child3의 width와 height를 100%가 아닌 px로 조절함으로써 부모 요소의 크기와 맞출 수 있다.
[예제 코드 2]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*
auto : width, height, margin에 대하여 적용할 수 있는 특수한 값이다.
*/
.parent{
background-color: tomato;
border: 10px dotted red;
/* width: 200px; */
/* height: 50px; */
margin: 30px;
/* 브라우저 기준 */
width: 90%;
/* height는 내용이 늘어나면 자동으로 늘어난다 */
height: auto;
}
.child{
background-color: powderblue;
/*
부모의 width에서 자신의 padding과 border 값을 제외한 나머지를 자동으로 계산한다.
*/
width: auto;
/* width: 150px; */
/* height: 20px; */
padding: 10px 20px;
border: 5px solid purple;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">HTML & CSS</div>
</div>
</body>
</html>
[출력 결과 2]
▶ auto를 이용해 예제 코드1의 child3처럼 직접 width와 height를 계산하지 않고도 부모요소의 크기와 자식요소의 크기를 맞출 수 있다.
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220506 CSS 5 (0) | 2022.06.17 |
|---|---|
| 220506 CSS 4 (0) | 2022.06.17 |
| 220504 CSS 2 (0) | 2022.06.14 |
| 220503~04 CSS 1 (0) | 2022.06.13 |
| 220503 HTML3 (0) | 2022.05.28 |