1. 박스모델

실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin)등의 요소로 구성됨

1) width, height 속성

실제 콘텐츠 영역의 크기 지정

종류	설명
<크기>	너비나 높이의 값을 px나 em단위로 지정
<백분율>	박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정
auto	박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됨. 기본값이다

<style>
.box1 {
  width: 400px;	/*고정 너비*/
  height: 100px; /*고정 높이*/
}
.box2 {
  width: 50%;	/*가변 너비 - 웹 브라우저의 50%*/
  height: 100px; /*고정 높이*/
}  
</style>

2) box-sizing 속성

실제 박스 모델의 너비를 계산할 때 어디까지 포함할지 결정하는 속성

종류	설명
border-box	테두리까지 포함해서 너빗값을 지정
content-box	콘텐츠 영역만 너빗값을 지정. 기본값이다

<style>
  .box2 {
    box-sizing: border-box;
	width:200px;
	height:100px;
    padding:20px;
    border:10px solid #00f;
  }
</style>

3) box-shadow

종류	설명
수평 거리	그림자가 가로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다. 필수속성
수직 거리	그림자가 세로로 얼마나 떨어져 있는지를 나타낸다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만든다. 필수속성
흐림 정도	이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시한다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없다.
번짐 정도	양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시된다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보인다. 기본값은 0
색상	한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있습니다. 기본값은 현재 검은색
insert	이 키워드를 함께 표시하면 안쪽 그림자로 그림

<style>
  .box1 { box-shadow: 2px 2px 5px 0px; }
  .box2 { box-shadow: 5px 5px 15px 5px blue; }  
</style>