박스 모델과 속성

✒️ 2025-05-16 12:50 내용 수정

박스모델.png

1. 크기 지정

속성 설명
height 높이 설정
width 너비 설정
max-width 해당 HTML 요소가 가질 수 있는 최대 너비 설정
기본값은 none, 값을 설정하면 창이 너비보다 작아질 때 스크롤 바 생성
min-width 해당 HTML 요소가 가질 수 있는 최소 너비 설정
기본값은 100%, 창이 너비보다 작아질 때 스크롤 바 생성
max-height 해당 HTML 요소가 가질 수 있는 최대 높이 설정
기본값은 none, 값을 설정하면 요소가 최대 높이 보다 클 때 스크롤 바 생성
min-width 해당 HTML 요소가 가질 수 있는 최소 높이 설정
기본값은 0, 요소가 최소 높이 이하로 낮아지지 않게 설정함

2. padding

속성 설명
padding 모든 padding 속성 설정
padding-top 위쪽 padding 설정
padding-bottom 아래쪽 padding 설정
padding-left 왼쪽 padding 설정
padding-right 오른쪽 padding 설정 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			p{border: 5px solid red;
			  background:yellow;}
			  
			  .box1{padding:20px;}
			  .box2{padding:20px 50px;}
			  .box3{padding:20px 50px 30px;}
			  .box4{padding:20px 30px 50px 70px;}
			  .box5{padding-left:20px}
		</style>
	</head>
	<body>
		<p class="box1">padding:20px; 상, 하, 좌, 우 여백 20px 설정</p>
		<p class="box2">padding:20px 50px; 상 20px, 좌 50px 적용</p>
		<p class="box3">padding:20px 50px 30px; 상 20px, 좌우 50px,  하 30px 적용</p>
		<p class="box4">padding:20px 30px 50px 70px; 상 20px, 우 30px, 하 50px, 좌 70px 적용</p>
		<p class="box5">padding-left:20px; 왼쪽 여백만 지정할 수 있습니다. 다른 위치도 가능합니다.</p>
		<p class="box6">여백을 지정하지 않으면 이렇게 보입니다.</p>
	</body>
</html>

css 예제5.png

3. border

속성 설명
border 모든 border 속성을 한 줄에 표시할 수 있음
border-style 테두리 모양을 설정
border-width 테두리 두께를 설정
border-color 테두리 색을 설정
border-radius 둥근 테두리 옵션
border-top 위쪽 테두리 속성을 설정
border-bottom 아래쪽 테두리 속성을 설정
border-left 왼쪽 테두리 속성을 설정
border-right 오른쪽 테두리 속성을 설정
box-shadow 박스 그림자 설정
syntax : insert 가로 세로 번짐정도 색상
box-sizing 박스 너비 기준을 정하는 속성
기본값 content-box : 내용 영역, padding, border를 별도로 계산
border-box : 내용 영역에 padding과 border를 포함하여 계산. 내용 영역이 감소하지만 더 자주 사용함 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			p{border-width:5px;
			border-color:blue;}
			
			.box1{border-style:none;}
			.box2{border-style:hidden;}
			.box3{border-style:dotted;}
			.box4{border-style:dashed}
			.box5{border-style:solid}
			.box6{border-style:double}
			.box7{border: 10px groove red}
			.box8{border: green ridge 10px}
			.box9{border: inset 10px green}
			.box10{border: 10px outset #F00;}
			
			.div1{border: 10px solid #0F0;}
			.div2{border: 10px solid red;
					width:200px;
					height:100px;}
			.div3{border-top: 10px dotted green;
					border-bottom: 10px solid blue;
					border-left: 10px inset red;}
			span{border: 5px solid #aaf;
				width: 500px;
				height: 100px;}
		</style>
	</head>
	<body>
		<p class="box1">border-style:none 은 테두리 없음</p>
		<p class="box2">border-style:hidden 은 테두리 숨김</p>
		<p class="box3">border-style:dotted 는 점선</p>
		<p class="box4">border-style:dashed 는 긴 점선</p>
		<p class="box5">border-style:solid 는 실선</p>
		<p class="box6">border-style:double 은 이중선</p>
		<p class="box7">border-style:groove 는 그림자가 있는 테두리</p>
		<p class="box8">border-style:ridge 는 groove와 조명이 반대인 테두리</p>
		<p class="box9">border-style:inset 은 버튼을 누른 형태의 테두리</p>
		<p class="box10">border-style:outset 은 버튼을 안 누른 형태의 테두리</p>
		
		<div class="div1">
			div에 실 선 테두리 추가
		</div>
		
		<div class="div2">
			div에 실 선 테두리를 추가하고 block 사이즈를 변경
		</div>
		
		<div class="div3">
			div에 위는 점선, 아래는 실선, 왼쪽은 inset으로 변경
		</div>
		
		<span>inline 요소는 다른 요소 경계를 침범할 수 있습니다.</span>
		<span>위쪽 block과 border가 겹쳐집니다.</span>
		
	</body>
</html>

css 예제4.png

/* input 태그의 테두리와 선택 시 나오는 테두리 제거 */
input {
	border : none;
	outline : none;
}

4. margin

속성 설명
margin 모든 margin 속성 설정
margin-top 위쪽 margin 설정
margin-bottom 아래쪽 margin 설정
margin-left 왼쪽 margin 설정
margin-right 오른쪽 margin 설정 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			p{border: 2px solid red;
				background:aqua}
			#box1{margin:0;}
			#box2{margin:20px 50px;}
			#box3{margin:30px 50px 30px} 
			#box4{margin:50px 30px 40px 70px} 
		</style>
	</head>
	<body>
		<p id="box1"> margin:0; 상, 하, 좌, 우 적용</p>
		<p id="box2"> margin:20px 50px; 상하 20px, 좌우 50px 적용</p>
		<p id="box3"> margin:30px 50px 30px; 상 30px, 좌우 50px, 하 30px 적용</p>
		<p id="box4"> margin:50px 30px 40px 70px; 상 50px, 우 30px, 하 40px 좌 70px</p>
	</body>
</html>

css 예제6.png

5. overflow 속성

속성 속성값 설명
overflow 모든 overflow 속성 설정
visible 모든 내용을 표시(기본값)
hidden block을 넘어가면 요소를 가림
scroll 내용의 넘침과 관계 없이 스크롤 생성
auto 내용이 넘칠 때만 스크롤 생성 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			p{border: 1px solid black;
			  width: 150px;
			  height: 70px;
			  padding: 5px;}
			.a1{overflow: hidden;}
			.a2{overflow: scroll;}
			.a3{overflow: auto;}
			.a4{overflow: visible;}
		</style>
	</head>
	<body>
		<p class="a1">챗gpt를 사용한 overflow의 특성에 따르면 overflow는 css 속성 중 레이아웃과 박스모델에 관련된 속성에 속한다. overflow 속성은 요소의 내용이 요소의 경계를 넘칠 때의 처리 방법을 결정한다. 속성값으로는 visible, hidden, scroll, auto등이 있다.</p>
		<p class="a2">챗gpt를 사용한 overflow의 특성에 따르면 overflow는 css 속성 중 레이아웃과 박스모델에 관련된 속성에 속한다. overflow 속성은 요소의 내용이 요소의 경계를 넘칠 때의 처리 방법을 결정한다. 속성값으로는 visible, hidden, scroll, auto등이 있다.</p>
		<p class="a3">챗gpt를 사용한 overflow의 특성에 따르면 overflow는 css 속성 중 레이아웃과 박스모델에 관련된 속성에 속한다. overflow 속성은 요소의 내용이 요소의 경계를 넘칠 때의 처리 방법을 결정한다. 속성값으로는 visible, hidden, scroll, auto등이 있다.</p>
		<p class="a4">챗gpt를 사용한 overflow의 특성에 따르면 overflow는 css 속성 중 레이아웃과 박스모델에 관련된 속성에 속한다. overflow 속성은 요소의 내용이 요소의 경계를 넘칠 때의 처리 방법을 결정한다. 속성값으로는 visible, hidden, scroll, auto등이 있다.</p>
	</body>
</html>

overflow 예제.png

6. outline 속성

속성 설명
outline 모든 outline 속성을 한 줄에 표시할 수 있음
outline-style outline 모양을 설정
outline-width outline 두께를 설정
outline-color outline 색을 설정
outline-offset border와 outline 사이의 여백 설정