3.1 BOX 모델 기본

block 또는 inline-block 특성을 가지는 요소는 box 형태를 가지며,여러 가지 설정을 할 수 있다.

Box Model 프로퍼티

content

요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역,witdth,height 프로퍼티를 가진다.

padding

안쪽에 위치하는 요소의 내부 영역을 의미한다.
기본색은 투명이므로 요소에 적용된 배경의 컬러,이미지가 패딩 영역에 적용한다.

border

테두리영역,border 프로퍼티 값으로 테두리 두께를 지정할 수 있다.

margin

border 바깥쪽 외부에 위치하는 외부 영역이다.
기본색은 투명이고 배경색 지정이 불가능하다.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
	<style>
		p{
			/* 배경색 지정: content 와 padding 영역에 적용 */
			background-color: orange;
			/* 디폴트로 content 영역 너비, box-sizing 프로퍼티를 통해 변경 가능(추후 설명) */
			width: 300px;
			/* 패딩 영역 두께 */
			padding: 20px;
			/* 테두리: 두께 형태 색상 (테두리는 색상도 지정 가능) */
			border: 10px solid yellow;
			/* 마진 영역 두께 */
			margin: 20px;
		}
	</style>
</head>
<body>
	<div>
       <p> 
           안녕하세요 반갑습니다.
       </p>
</div>
</dody>
</html>