레이아웃 스타일 관련 CSS - 박스 모델 / width, height 속성

레이아웃 관련 스타일 CSS - 박스 모델

• 블록 레벨 요소나 인라인 레벨 요소처럼 스타일 시트에서 박스 형태인 요소를 박스 모델 요소라고 합니다.
• 웹 문서 안에서 여러 요소들을 원하는 위치에 배치하려면 CSS 박스 모델에 대해 잘 알고 있어야 한줄에 배치할지, 줄을 바꾸어 배치할지, 요소와 요소 사이의 간격을 어떻게 조절할지 결정할 수 있습니다.
• 박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다.
• 마진이나 패딩은 웹 문서에 하나의 콘텐츠만 표시한다면 반드시 필요하지 않을 수도 있지만 다른 콘텐츠들과의 간격이나 배치 등을 고려한다면 필요한 박스 모델의 중요한 개념입니다.

레이아웃 관련 스타일 CSS - width, height 속성

• 박스 모델에서 콘텐츠 영역의 크기를 지정할 때는 너비를 지정하는 width 속성과 높이를 지정하는 height 속성을 사용합니다.
• 기본형 : width : < 크기 > / < 백분율 > / auto
• 기본형 : height : < 크기 > / < 백분율 > / auto
• width, height 속성을 픽셀(크기)로 지정할 경우 브라우저 창의 크기와 상관없이 크기가 유지되지만 백분율로 지정할 경우 브라우저 창에 따라 크기가 달라지게 됩니다.

속성 값	설명
< 크기 >	너비나 높이 값을 px(픽셀)이나 cm(센티미터)같은 단위와 함께 수치로 지정합니다.
< 백분율 >	박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정합니다.
auto	박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정됩니다. (기본 값)