[CSS] Box Model 속성 지정

1) content 영역

✔ box-sizing

• content-box : content 만 포함 (기본값)
• border-box : padding + border 까지 포함

✔ width, height

• px, em 단위로 너비와 높이 지정 가능
• 백분율 ( 부모요소 기준 )
• auto ( 자동 결정 , 기본값 )

✔ box-shadow

.box2{ box-shadow:5px 5px 15px 5px blue;}

• 수평거리 수직거리 흐림정도 번짐정도 색상 inset

• inset : 안쪽 그림자로 만드는 키워드

2) Padding 영역

✔ padding

✔ padding-top, padding-down, padding-right, padding-left

• padding 영역을 지정할 수 있다.

3) border 영역

✔ border-style

• none - 없음
• hidden - 감추기
• solid - 실선
• dotted - 점선

✔ border-color

• 테두리 색상 지정

✔ border-width

• px로 두께 지정
• thin, medium, thick 등 예약어로 선택 가능

✔ border-top, border-right, border-bottom, border-left

• 4개 방향 테두리 스타일을 각각 다르게 지정하고 싶다면 border-top, border-right처럼 속성 + 방향으로 지정

	<style>
		h1 {
			padding-bottom: 5px;
			border-bottom: 3px solid rgb(75, 70, 70); /* 아래쪽 테두리만 3px짜리 회색 실선*/
		}
		p {
			padding: 10px;
			border: 3px dotted blue; /* 모든 테두리를 3px짜리 파란 점선 */
		}
	</style>

✔ border-radius

• 박스 모델 테두리를 둥글게 만드는 속성
• 크기(px/em), 백분율

	<style>
		#round {
      border-radius: 25px;  /* 모든 꼭짓점을 둥글게 */
    }    
	</style>

4) Margin 영역

✔ margin

✔ margin-top, margin-bottom, margin-right, margin-left

• 마진을 이용하여 요소 간 간격을 조절 가능

✔ 웹 문서 정렬

• 웹 문서 전체를 화면 중앙에 배치하려면 width를 지정한 후, margin-left, margin-right를 auto로 지정하면 된다.

    #container {
      background-color:#fff;
      width:600px;
      margin:20px auto;
      padding:20px;
    }

• 위아래 마진 20px, 좌우 마진 자동계산