Page Layout


Home > Document > Web design > CSS > Layout > Page layout

Web Page Layout

이 번 페이지에서는 문서 전체의 Layout에 대해 알아 보도록 하겠습니다. 문서 전체의 Layout 이란 브라우저 창에 Display 되는 Element 중 최상위 Element 인 body element 를 위시해서 브라우저 창에 표시되는 모든 element 들의 간격, 수평 수직 배치, 여백 등에 대한 지정이 되겠습니다. 사실 이러한 것 들에 별 관심을 갖지 않는 경우가 많은데, 만약 그렇다면 이는 매우 중요한 부분을 놓치고 있는 것 입니다.

일반 종이에 인쇄되어 나오는 문서나 웹 페이지 문서나 우리가 문서를 만드는 이유를 함 생각해 봅시다. 왜 만들까요? 자기 자신이 두고 두고 보려고 만들까요? 그렇지 않다는 것을 잘 알 겁니다. 문서 작성의 목적은 거의 대 부분이 남에게 보여 주기 위해서 만들게 됩니다. 그렇다면 문서 Layout 이야말로 문서에 있어서 가장 중요한 부분 중에 하나라는 말 입니다. 말이 필요 없고, 우선 아래의 box 를 브라우저 창이라고 생각하고 아래의 버튼을 클릭하며 비교를 해 보시죠.

브라우저 창에 margin 없이 나타나는 본문
재즈의 역사를 체계적으로 정리한 책 `재즈북'(원제: DAS JAZZBUCH)이 국내에 출간됐다.

이 책은 재즈 비평의 권위자인 독일의 요하임 E. 베렌트가 1953년 발행한 동명비평서에 80∼90년대 재즈의 역사까지 망라해 개정판으로 펴낸 것.

유럽 각국과 미국, 일본 등 전세계 10여개국에 번역돼 150만부 이상이 팔린 베스트셀러이기도 하다.

저자는 재즈 관련 서적 23권을 펴낸 베테랑으로 재즈음반 시리즈 `재즈와 세계의 만남'을 제작하기도 했다. 그는 이 책의 집필 의도를 "재즈의 태동기부터 현재에이르기까지 재즈 전체를 펼쳐보이는 것"이라고 정의했다.

그러나 1980년대 이후 엄청나게 확장된 재즈의 외연으로 인해 귄터 훼스만, 팀네빌, 케빈 화이트헤드 등 다른 재즈 비평가들과 공저가 필요했다.

이 책은 재즈의 스타일, 대표적인 뮤지션들, 재즈의 구성 요소, 재즈 악기, 보컬리스트, 빅밴드, 캄보 등 재즈에 관한 분야별 지식을 구체적으로 분류해 상세하게설명하고 있다.

두드러진 점은 기존 비평서에서 최초의 재즈 발생지로 미국 뉴올리언스를 꼽는것이 관례지만 그 이전인 1890년대 이미 기본적인 스윙을 하는 래그타임(Ragtime)시대가 있었다고 지적하고 있다는 것.

100년이 넘는 재즈사에서 빛을 발했던 뮤지션 2천여명에 대해 체계적으로 정리해놓은 것도 장점으로 꼽힌다. 뉴올리언스 시대를 열었던 루이 암스트롱을 비롯해오케스트라 스윙을 대표하는 듀크 엘링턴, 캄보 스윙을 대변하는 콜맨 호킨스와 레스터 영, 쿨 재즈부터 70년대 음악의 총체적인 발전 과정을 대표하는 마일스 데이비스, 80년대 재즈 고전주의를 대표하는 데이비드 머레이와 윈튼 마샬리스 등 거장들의 업적을 구체적으로 분석하고 있다.

재즈 악기 부분에서는 악기에 관한 자세한 설명과 색깔, 명연주자들의 연주 기법 등이 녹아 있으며 마지막으로 재즈를 `저항의 음악이면서 가장 인간적인 음악'으로 정의내리고 있다.

부록으로 케빈 화이트헤드가 정리한 재즈 명반에 대한 `디스코그래피'에는 참가세션들의 명단도 실어 거장들이 젊은 시절부터 어떤 방식으로 발전해 왔는지의 발자취도 뒤돌아볼 수 있다. 프리랜서 번역가 한종현이 우리말로 옮겼다. 이룸 펴냄. 760쪽. 4만7천원.

비교해 보면 알겠지만 margin이 없이 작성된 문서는 시각적으로 답답한 느낌을 주지만 20px 10px 의 margin을 가진 문서는 시각적으로 안정되고 편안한 느낌을 갖게 됩니다. 저는 잘 모르지만 동양화에 여백의 미 라는게 있다지요?...^^ 그럼 이 번 페이지의 주제인 여백에 대해 자세히 알아 보도록 하겠습니다.



여백 (margin & padding)

이 사이트 CSS의 Layout 메뉴를 보면 padding(내부 여백), border(경계선 또는 두께가 있으면 경계면), margin(외부 여백) ... 이렇게 3 페이지로 나열해 놓았습니다. 이 순서는 알파벳 순이 아니죠. 이 순서는 내용물(contents : text, image 등...)을 기준으로 내용물이 담겨있는 box 내부에서 외부로 여백이 생기는 순서가 되겠습니다. 반대로 최상위 element인 body 를 기준으로 한다면 margin, border, padding 순이 되겠져... 이 때 border의 경우도 두께가 0px 이상이 되면 분명히 면적을 차지하므로 아래에서 경계선이 아닌 area(면적)으로 표시했습니다. 아래의 그림에서 처럼 body 속에 있는 box가 margin을 가지게 되면 box의 margin은 body의 margin과 box의 margin을 합한 만큼이 되겠습니다.

그렇다면 이 쯤에서 이런 의문을 가지게 됩니다. padding이 내부 여백이고, margin 이 외부 여백이라면 왜 body의 내부에 생기는 여백이 padding이 아니고 margin 이냐고 말입니다... 결론 부터 말하면 margin, padding 둘다 똑 같이 듣습니다. 당연한 말이지만 body는 최상위 element 이므로 외부 여백이 있을 수 없기 때문에 margin과 padding 모두 body 내부로 작동 됩니다.

body
body의 margin 또는 padding

  margin-top  
margin-left
  border-top  
border-left
padding-left padding-top padding-rigth
content
padding-bottom
border-right
  border-bottom  
margin-right
  margin-bottom  



content area padding area border area margin area
content edge padding edge border edge margin edge




CSS 로 문서 여백 지정하기

body Tag 에 여백에 대한 지정을 하지 않으면 상단(topmargin)에 15px, 좌우(leftmargin)에 각각 10 px의 여백이 기본 값으로 지정됩니다. 물론 이 상태로 문서를 만든다고 해서 그 걸 나쁘다고 할 수는 없습니다. 하지만 필요에 따라 장래에 모든 문서에 일괄적으로 여백의 변경을 주거나, Percentage 로 여백을 주거나 할 때 문서의 여백을 CSS로 지정하는 일은 매우 중요하다고 할 수 있습니다. 설사 상단 15px, 좌우 10px 의 기본 값을 그대로 사용한다 할지라도 반드시 CSS로 지정해야 됩니다. 그래야만 나중에 현재의 Layout 에 싫증이 날 때 변경을 간단히 할 수 있으니까요...

만약 CSS 로 문서 여백을 지정하지 않았을 경우 문서 여백을 수정하기 위해서는 모든 페이지를 열어서 일일히 수정하는 수 밖에 없기 때문 이죠. 그러므로 Linked style sheet 방식으로 문서 여백을 지정하는 작업은 필수적이라 하겠습니다. 아래의 표는 모두 body Tag에 아래와 같이

<body leftmargin="0" topmargin="0">

으로 지정한 상태 에서의 외부 CSS file에 type selector 를 사용하여 margin을 지정한 예 입니다. 각 면에 다른 값을 지정하는 방법을 잘 모르면 4 면에 각각 다른 값의 여백을 지정하는 방법 부분을 참고하세요. 다음 페이지에서는 본문 Layout 에 대해 다루겠습니다.

CSS 로 문서 여백 지정하기
수치로 지정 body{
color:#000000;
font:11px/1.5 Verdana;
background:#EFEFEF;
margin:25px 20px; /* 상하 25px, 우좌 20px로 지정 */
.......
.......
}
Percentage로 지정 body{
color:#000000;
font:11px/1.5 Verdana;
background:#EFEFEF;
margin:10% 8%; /*일반적으로 percentage를 사용할 경우
8 ~ 10%가 적당하다고 합니다. */

.......
.......
}





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색