CSS 박스 모델 이해하기

 

CSS 박스 모델 이해하기                                                      

 

CSS의 기능은 단순하게 텍스트, 이미지 그리고 다른 부분의 형식을 정의하는데 사용하는 것보단 웹 페이지의 레이아웃을 잡는데 더 강력한 힘을 발휘합니다.

 

CSS를 이용해서 HTML  코드를 작성하다 보면 <div> 라는 태그를 쉽게 보실 수 있습니다. <div> 태그는 자체 의미는 전혀 없다고 보시면 됩니다. 즉 이 태그는 형식정의를 위해서 사용하는 것이 아니라, 엘리먼트의 논리적 구분이나 경계를 나타나는 데 사용된다고 보시면 됩니다. 또한 div 태그와 유사한 태그가 span 이라는 태그입니다. div 태그가 하나의 큰 틀을 잡을 때 사용한다고 보면 span 태그는 인라인 태그입니다. 한 줄에 위치한 특정 엘리먼트에 속성을 부여할 때 사용한다고 보시면 됩니다. div 태그를 사용하게 되면 <p> 태그를 사용한 것과 같은 효과를 줘 버리게 됩니다. 그래서 div 태그를 사용할것인지, span 태그를 사용할 것인지는 상황에 맞게 처리해 주시면 됩니다.

 

여기서 div 태그를 사용해서 모든 엘리먼트를 처리한다고 했는데 div 태그가 만능은 아닙니다. 무슨 말인가 하면 일반적인 html 코드 자체에도 속성을 줘서 해당 값을 지정할 수 있는데 굳이 <div> 태그로 감쌀 필요는 없다는 것입니다.

 

즉 <div class=”red1”> <p>텍스트문자</p></div>를 처리하는 것 보단  <p class=”red1”>텍스트 문자</p> 이렇게 처리하는 편이 훨씬 효율적이라고 할 수 있는 것입니다.

 

CSS 박스모델은 크게 고정폭 디자인과 유동폭 디자인 이렇게 두개의 디자인으로 나눌 수 있습니다.

 

고정폭 디자인은 브라우저의 창의 크기에 관계없이 전체 레이아웃의 크기가 고정되어 있는 것을 말합니다.

 

고정폭 디자인은 디자이너들이 가장 선호하는 방식 중 하나입니다. 왜냐하면 고정된 방식으로 디자인을 설계한 디자이너들이 정확하게 딱 맞는 사이즈로 화면에 보여주기 때문입니다.

특히 일반적으로 요즘 디자인된 사이트들은 1024 X 768 픽셀의 사이즈를 기본 폭으로 디자인 작업을 하게 됩니다. 이 사이즈들의 사이트들은 정확하게 말하면 폭이 1024 사이즈 보단 950픽셀 정도의 폭으로 디자인을 하게 되는데 그 이유는 모니터의 해상도가 1024 픽셀일 경우 우측에 나오는 스크롤바 정도의 여유는 남겨두고 작업을 해야 하기 때문입니다.

 

 

 

대표적인 포털 사이트인 네이버와 다음의 경우에도 초기 페이지는 고정폭 디자인을 적용했다는 것을 알 수 있습니다.

 

 

 

 

 

 

 

 

 

 

위의 다음 사이트와 같이 브라우저의 크기가 커지더라도 해당 사이트의 크기는 변동되질 않고 있습니다. 이는 물론 네이버도 동일하게 적용됩니다.

유동폭 디자인은 브라우저의 크기가 변하면 사이트 디자인의 크기도 변화가 되는 것을 말합니다. 이 디자인의 장점은 어떤 해상도의 모니터로 사이트를 보더라도 해상도에 맞게끔 사이트의 크기가 변화되어 한눈에 보기가 쉬워진다는 것입니다.

 

아래의 예를 한번 보겠습니다.

 

네이버의 뮤직 섹션입니다.

현재의 화면은 1024 픽셀일 경우 나타나는 화면입니다.

 

하지만 브라우저 크기를 늘렸을 경우 어떻게 나타나는지 한번 살펴보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

 

 

이 화면의 경우에는 해상도가 1680의 해상도에 본 네이버 뮤직 섹션입니다.

 

상단과 왼쪽 메뉴 부분의 크기는 변화가 없지만, 앨범을 소개하는 부분은 더 많은 내용을 보게 되어집니다.

 

이렇게 브라우저의 크기에 따라서 보여지는 내용도 더 많아지게 되는 것을 유동폭 디자인이라고 합니다.

 

하지만 디자이너들은 사이트 디자인을 할 경우 전체적인 레이아웃을 해치는 것을 원치 않으며. 또한 고정폭 디자인을 하는 것이 작업시에도 훨씬 수월한 면이 많기 때문에 많은 사이트들이 고정폭 디자인을 선호합니다.