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 &amp; CSS</div>
	</div>
</body>
</html>

 

[출력 결과 2]

▶ auto를 이용해 예제 코드1의 child3처럼 직접 width와 height를 계산하지 않고도 부모요소의 크기와 자식요소의 크기를 맞출 수 있다.

728x90

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

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

+ Recent posts