CSS -box 모델

박스모델(BoxModel) : 텍스트 또는 이미지를 출력하기 위해 태그를 이용하여 생성한 사각형 모양의 영역

선택자 {
	/* margin : 박스모델과 박스모델의 간격 관련 스타일 속성 */
	/* => margin-top, margin-right, margin-bottom, margin-left */
	/* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */
	margin-top: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	
	margin: 15px 15px 15px 15px;/* top right bottom left */
	margin: 15px 15px;/* top&bottotm right&left */
	margin: 15px;/* top&bottotm&right&left */
	
	/* border-style : 박스모델 외곽선의 모양 관련 스타일 속성 */
	/* => border-style-top, border-style-right, border-style-bottom, border-style-left */
	/* 속성값 : none(기본), solid(실선), dotted(점선), double(이중선) 등 */
	border-style: solid;
	
	/* border-width : 박스모델 외곽선의 굵기 관련 스타일 속성 */
	/* => border-width-top, border-width-right, border-width-bottom, border-width-left */
	/* 속성값 : px, 키워드(thin, medium, thick 등) */
	border-width: 2px;

	/* border-color : 박스모델 외곽선의 색 관련 스타일 속성 */
	/* => border-color-top, border-color-right, border-color-bottom, border-color-left */
	border-color: red;
	
	/* border : 박스모델 외곽선 관련 모든 스타일 속성값 설정 */
	border: 2px solid red; 
	
	/* padding : 박스모델 외곽선과 콘텐츠(Content) 영역의 간격 관련 스타일 속성 */
	/* => padding-top, padding-right, padding-bottom, padding-left */
	/* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */
	padding: 10px;
}

선택자 {
	/* width : 박스모델 폭 관련 스타일 속성 */
	/* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */
	width: 400px;

	/* height : 박스모델 높이 관련 스타일 속성 */
	/* 속성값 : px(절대값 - 고정크기), %(상대값 - 유동크기) */
	/* => 박스모델의 높이를 변경할 경우 태그내용은 박스모델 중앙(Middle)에 미출력 */
	/* => 박스모델의 높이보다 태그내용이 큰 경우 박스모델의 높이는 자동 변경 */
	height: 50px;

	/* vertical-align : 세로 방향 정렬 관련 스타일 속성 */
	/* 속성값 : top(기본), bottom, middle 등*/
	vertical-align:  middle;
}