1.의의

  1. Box Model 프로퍼티

    KakaoTalk_20220726_153446296.jpg

    1)content

    2)padding

    3)border

    4)margin

<!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>
  1. 주요 프로퍼티(property)

1)width / height 프로퍼티

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      p {
        width: 200px;
        height: 200px;
        background-color: yellow;
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <div>
         <p> 
               안녕하세요 반갑습니다.
         </p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      div {
        max-width: 1200px; /* max-width 로 변경 테스트해보기 */
        background-color: yellow;
        border: 5px solid red;
      }
    </style>
  </head>
  <body>
    <div>
      p{lorem30}
    </div>
  </body>
</html>

2)margin / padding 프로퍼티

4개의 프로퍼티 값 설정시