박스 모델을 이용한 CSS의 적용

"박스 모델에 대해 알고 싶다"

HTML 요소 하나하나는 브라우저의 화면에 표시 될 때 그 요소의 콘텐츠를 표시하기 위해서 '표시 영역'을 확보하는데 그것이 '박스'이다. 하나의 박스에는 콘텐츠를 표시하기 위하여 확보되는 '콘텐츠 영역'을 중심으로 그 주위를 패딩(padding) 영역, 보더(border) 영역, 마진(margin, 여백)이 있습니다.

박스 모델

CSS의 속성을 사용하여 박스의 너비와 높이를 설정할 수 있으나, 설정할 수 있는 것은 '콘텐츠의 너비와 높이'입니다. 그 바깥에 있는 패딩, 보더, 마진의 각 영역은 각각 전용 속성에서 다시 크기를 지정해야 합니다. 

그리고 박스에는 크게 '인라인 박스'와 '블록 상자'라는 두 종류가 있습니다. HTML의 각 태그는 어떤 상자를 표시할지 미리 결정합니다( CSS에서는 나중에 변경도 가능)

인라인 박스

'인 라인 박스'는 텍스트의 줄에 녹아 있는 박스입니다. 인라인 박스 바로 옆에는 텍스트나 다른 인라인 박스가 놓일 수 있습니다. 또한 장소에ㅔ 따라서는 인라인 박스는 도주에 줄바꿈 할 수 도 있습니다.

인라인 박스에 표시되는 요소의 예:<span>, <strong>, <br>, <img>, <input>

인라인 박스에는 일부를 제외하고, 콘텐츠 영역의 너비와 높이, 상하 여백을 설정할 수 없습니다.

블록 박스

브록 상자는 CSS에서 너비를 지정하지 않는 한, 부모 요소의 콘텐츠 영역에 가득 채우고 확장할 수 있는 종류의 박스입니다. 너비, 높이, 패딩,보더, 마진, 모든 영역의 사이즈를 CSS로 설정할 수 있습니다.

블록 박스에 표시되는 요소의 예:

<div>, <section>, < header>, <footer>, <p>, <ul>, <li>, <form>

만일 블록 박스에 너비를 지정하면 그 박스 옆에 여백이 만들어 집니다. 히지만 그 여백에는 다른 박스를 배치할 수 없습니다.  만약 블록 상자 옆에 박스를 배치하고 싶을 때 는 CSS의 플롯(flot)과 플렉스밧스(flexbox) 등을 사용해야 합니다.

'box-sizing:border-box;'

현대적인 웹 디자인에서는 페이지의 폭을 고정하지 않고 창의 크기와 화면 크기에 맞게 유동적으로 만들어지고 있습니다. 이렇게 창의 크기와 화면의 크기에 맞추어 유동적인 페이지를 만드는 기법 및 CSS기술을 '플루이드 디자인(Fluid Design)'이라고 합니다.

특히 스마트폰 레이아웃에서는 페이지를 플루이드 디자인으로 만드는 것이 일반적입니다. 또 스마트폰  전용에서도 어떤 단말기에서 표시해도 최적의 레이웃으로 표시하는 리스 폰 시브 웹 디자인을 웹 디자인을 채용하는 경우도 페이지를 유동적으로 만듭니다. 

하지만 페이지를 플루이드 디자인으로 제작하면 일반적인 박스 모델에서는 박스 크기를 지정할 수 없거나 정확하게 배치할 수 없게 됩니다. 그럴 때는 요소의 CSS에 'bos-sizing:border-box;"를 지정 합니다.  이 속성으로 값을 지정하면 박스 모델이 변경됩니다. 일반적인 박스 모델이라면 콘텐츠 영역의 너비와 높이를 지정하는 width 속성, height 속성 값이 보더와 패딩을 포함한 길이를 표시합니다. 

박스가 유동적으로 확장 또는 축소되는 데 많은 위력을 발휘하므로 잘 이해하고 그 사용법을 익혀두면 좋습니다.