Article Layout & Formatting

이제 PLS 도 후반부에 다달은 것 같습니다. 그 동안 주변의 혹자(어떤 사람)는 '지금까지 진행 한 1 ~ 7 편까지의 페이지 분량이 쩜 긴게 아니냐.', '요새는 성질들이 급해서 그렇게 길게 만들면 끝까지 안 본다.' 라는 우려섞인 충고를 하더군요. 물론 충분히 이해가 가는 말 입니다. 하지만 사람이라는 게 자기 자신의 사고 범위를 벗어 나기는 힘든 모양 입니다. 욕심인지 습관인지 제가 설명하고 싶은 부분을 다 설명하려다 보니 페이지가 길어지게 되었는데, 그나마 예제 code 속에 나오는 DHTML button 들을 넣어서 길이를 줄인다고 줄인게 그 정도 분량이 되는군요.

돌이켜 보건데 제가 처음 웹 언어들을 접했던 90년대 말 쯤에는 마땅히 참고할 강좌나 메뉴얼 사이트 들이 없어서 어쩌다 그런 사이트를 만나면 그게 얼마나 고마웠는지 모릅니다. 그런데 한 가지 아쉬운 것은 예제가 많지 않은 것 이었죠. '아! 딱 한가지 사용예만 보여주면 확실히 알 수 있을 것 같은데...' 라는 생각이 절실 했었습니다. 그래서 인지 이 사이트의 문서를 만들 때도 그 때의 기억 때문에 가급적이면 많은 예제를 보여 드리려고 하고 있습니다. 또한 이 사이트 HTML 의 첫 페이지인 '사이트 소개' 에서도 밝힌 것 처럼 이 사이트의 주 대상은 초보자 입니다. 초보자를 대상으로 문서를 만들면 당연히 모든 사람들이 이해 할 수 있지 않을까요? 어쩌면 그야말로 '쌩초보'의 입장이라면 이 사이트의 문서에 나오는 설명 정도로도 '나는 아직도 배 고프다' 라고 느낄지도 모릅니다. 따라서 혹시 실력있는 분이 이 문서를 보시면서 '뭐 다 아는 얘길 이렇게 길게 하고 있어.' 라고 생각하신다면 이와 같은 제 생각을 이해 하시기 바랍니다. 그럼 본론으로 들어가겠습니다.

'Article' 이란 신문 등에 나오는 기사(記事 : 어떤 사실이나 내용을 알리는 글)를 뜻 하는 단어로서 웹 페이지 중에서는 본문에 해당되는 부분 입니다. 본문 layout design 에 대해 별 신경 안쓰시는 분들은 '아니 본문이 내용만 충실하게 전달하면 되는 것 이지 그 것도 무슨 design을 하나?' 라고 생각 하실 지도 모르겠습니다. 물론 내용도 부실하고 design도 신경 안 쓰는 것 보다야 비교할 수 없을 정도로 좋지만 '보기 좋은 떡이 먹기도 좋다' 는 말 처럼 '보기 좋은 본문 디자인이 눈에도 잘 들어오고 내용을 이해하기도 쉽습니다. 또한 본문 design을 전혀 신경쓰지 않고 문서를 작성한 사람들 마저도 사실은 자기도 모르는 사이에 본문 디자인을 하고 있는 것 입니다.

예를 들어 띄어 쓰기 같은 것은 다들 하고 있지 않습니까. 띄어 쓰기가 대표적인 본문 디자인 중에 하나인 문단 design 입니다. 즉, 우리가 말로 어떤 내용을 전달하지 않고 종이나 컴퓨터 화면같은 media를 통해 내용을 전달할 경우 이 '띄어 쓰기' 라는 것은 글자와 글자간의 여백(margin)이 되는 것 입니다. 또한 줄을 바꾸어서 하나의 '문단'을 구분 짖는 것, 문단 중에 강조 하고픈 단어에 bold, italic 등의 처리를 하는 것도 엄연히 문단 design 이라고 할 수 있습니다. 이런 것이 범위를 넓혀 나가면 본문 design이 되는 거죠. 따라서 누가 아무리 신경 안쓰고 문서를 만든다고 해도 이미 그 문서는 default 값으로 본문 design이 되어 있는 것 입니다. 하지만 물론 default값 만으로 문서를 만들었을 경우에는 같은 내용을 신경써서 design한 결과와는 비교할 수 없이 시각적 가독력이나 문장의 이해도가 떨어질 수 밖에 없습니다.

그렇다면 본문 design에 필요한 형태적인 요소들에는 어떤 것 들이 있을까요. 물론 디자인 하려고 하는 사이트의 contents가 어떤 것이냐에 따라 달라지겠습니다만 크게 나누면

목록의 정리

로 분류 할 수 있습니다. 우선 목록에 대해 알아 보면, 목록이란 작게는 이 사이트의 HTML > 중급 과정 > Anchor의 현재 문서에서의 Bookmark(책갈피) 에서 설명한 것 처럼 문서 내부의 link 로서 <a name="책갈피 이름">링크 이름</a> 으로 구성되고, 한 단계 확장하면 <a href="문서의 uri">링크 이름</a>을 사용하는 문서들의 목록, 크게는 사이트 전체의 문서 목록(Site map)이 될 것 입니다. 이러한 목록을 정리하는데는 여러 가자 방법이 있겠지만 뭐니 뭐니 해도 <ol> 이나 <ul> 로 정리하는 방법이 가장 보편적이면서도 좋은 방법이라고 생각합니다. 따라서 한 가지 예제를 보면

이렇게 위와 같이 정리할 수 있습니다. 다만 여기서 주의해야 할 것은 위의 code중에 굵게 표시한 부 항목이 들어가는 li 의 end tag을 반드시 닫아야 XHTML 의 문법에 맞는다는 사실 입니다.

문단의 정리

본문의 문단에 사용하는 tag은 P(Paragraph) tag 입니다. 어떤 block level box 문서에 배치(layout) 하는데 있어서 알고 있어야 할 중요한 사실은 그 block level box가 가지고 있는 초기값이 얼마나 되느냐 하는 것 입니다. 초기값을 모르고서는 여러 개의 block level box 들이 문서에 나열 되었을 때 서로 간의 위치나 여백의 크기 등을 정확히 조절할 수 없기 때문 입니다. 따라서 block level box가 화면 상에 차지하는 면적(width, height)과 여백(margin)을 눈으로 확인할 수 있어야 되는데 아래와 같이

처럼 coding을 하면 p tag 자체의 면적 조차도 눈으로 확인할 수 없습니다. 따라서 block tag 자체의 면적을 눈으로 확인하기 위해서는 border나 background-color를 CSS로 지정하는 것이 가장 확실한 방법이라 할 수 있습니다.

실행 결과를 보면 p tag의 경우 따로 지정하지 않아도 margin-top, margin-bottom 이 '어떤' 값을 가지는 것을 알 수 있습니다. 그런데 이 값은 브라우저 마다 약간 씩 다릅니다만 대략 font-size를 지정하지 않은 상태의 글씨 크기인 12pt 에 아래 위로 1pt 정도의 공간을 합쳐서 14pt 정도의 margin이 상하에 생기게 됩니다. 그러면 p tag을 연속적으로 2개 이상 사용하면 어떻게 되는지 아래의 code를 실행 해 봅시다.

위의 실행 결과를 보면 p tag과 p tag 사이에 생기는 margin의 크기와 상 하에 생기는 margin의 크기가 같은데 그 이유는 수직으로 생기는 margin은 포개어지기 때문으로 이미 PLS Part V의 collapsing margins 부분에서 설명한 바 있습니다.

그런데 여러분들이 자신의 사이트 문서를 만들 때 위와 같이 각 tag에 일일히 style로 border나 background-color를 지정하기란 여간 번거로운데 아닐 겁니다. 또한 더 귀찮은 것은 일단 style로 지정하고 면적을 확인한 후에 더 이상 border 등을 볼 필요가 없을 때는 그 것들을 지워야 된다는 사실 입니다. 따라서 제가 그런 귀찮은 방법 말고 아주 간단하게 문서 내의 모든 tag에 border를 지정하는 방법을 알려 드리겠습니다. 일종의 tip 이랄 수 있겠네요. 그 간단한 방법이란 아래와 같이

type selector를 사용하여 HTML tag에 style을 지정하면 아무리 많은 p, div 가 있다고 하더라도 한 번에 border를 지정할 수 있겠습니다. 만약 p, div 이외의 tag 면적을 보고 싶어서 border를 지정 할 때, 위의 방법 처럼 지정하면 사용된 tag의 종류 만큼 type selector를 넣어야 되는데, 위와 같이 일일히 type selector를 지정 하는 것도 귀찮다면 아래와 같이 universal selector를 사용하면 되겠습니다.

본문의 정리

다음은 본문에 대한 정리를 하도록 하는데 본문이 들어갈 부분은 PLS Part V Positioned layout 마지막 부분에 sample flie로 보여 드렸던 'width 770px 로 column 3개를 화면 가운데 정렬시킨 layout' 중에서 'mainText' 부분 입니다. 그러므로 그 file의 가운데 부분을 본다고 생각하면 되겠습니다.

우선 본문에 text 만 있는 경우를 예로 들어 보겠습니다. 아래의 사용예에는 margin 이나 padding 등의 여백을 지정하지 않고 p tag을 그대로 사용했습니다. p tag 속의 box가 테두리에 붙어 있어서 답답한 느낌을 줍니다. 예제 아래의 button들을 클릭해서 padding, text-align 등을 변경해 봅시다.

text 만 있는 본문

다양한 기능을 제공하는 텍스트 입력 방식의 HTML 에디터 HTML-Kit 입니다. HTML 태그에서는 head, body, title, meta, frame, frameset, 텍스트 편집과 관련된 태그 등 거의 모든 태그를 지원하고 ASP, PHP 블러킹, ASP, CGI, SSI 변수값을 사용할 수 있습니다. 이외에도 스타일시트, 이미지 삽입, 버튼, 자바 스크립트, 자바 애플릿 함수 폼, 비주얼 베이직, TCL 스크립트, 각종 마우스 이벤트, 등을 제시해주며, 다양한 form과 input type을 지원합니다.

위의 DHTML 을 보면 알 수 있겠지만 block box 안에 padding을 주면 내부에 여백이 생겨서 테두리와 붙어 있을 때 보다 눈이 쉴 곳이 생겨서 문장 전체를 보기가 쉽다는 것을 알 수 있습니다. 그리고 text-align : justify 의 경우는 사용하는 것이 좋다는 뜻은 아니고 개인의 취향에 따라 취사 선택을 하면 되겠습니다. 그러면 이 번에는 text 와 image 가 block 안에 같이 있을 경우를 보도록 하겠습니다.

text 와 image가 있는 본문

일반적으로 image를 문서에 넣을 때 위와 같이 image가 수평으로 하나의 block을 차지하는 경우가 많습니다. 물론 image를 수평으로 하나의 block으로 처리하느냐 마느냐는 문서 작성자가 알아서 판단할 일이지만 image가 '비교적' 큰(가로 사이즈의 반 이상이 되는) 경우 주로 가로로 한 block을 할당하게 되고, image가 작아서 하나의 block 을 할당하기에는 좀 썰렁하다고 판단이 되면 image를 text의 왼쪽이나 오른쪽에 넣게 되는 경향이 있는 것 같습니다. 이 두 가지의 경우 IMG tag과 P tag이 어디에 위치하는지 알아 보겠습니다. 우선 image를 하나의 block level로 처리할 경우는 아래의 code와 같이

단순히 하나의 block으로 처리합니다. 경우에 따라 IMG와 P의 순서가 바뀔 수도 있겠죠. 그런데 IMG와 P를 각각의 block으로 처리하지 않고 text가 image 주변으로 흐르도록 처리하려면 아래와 같이

IMG tag을 P tag 속에 넣습니다. 그렇지만 위의 code와 같이 IMG tag이 반드시 text 보다 앞에 있어야 되는 것은 아닙니다. 그럼 어디에 있어야 되느냐구요? 그건 순전히 coding 하는 사람 마음에 달려 있습니다. 즉, text 앞에 오거나 뒤에 오거나 혹은 중간에 오더라도 상관 없습니다. 어차피 float:left 나 float:right 으로 image를 처리하면 그림 왼쪽이나 오른쪽에 그림의 위치가 지정되게 됩니다. 즉, image나 table 등의 block box를 float으로 처리할 경우 floating된 block box가 center에 위치하지는 않는다는 뜻 입니다.

아래의 box 속에 있는 pen 그림은 drag이 됩니다. 물론 IE 에서만 drag이 됩니다만, 아래의 그림을 drag 해서 '다양한' 이라는 단어의 '다' 와 '양' 사이로 cursor를 끌어다 놓아 보시져. 그리고 float:left 나 float:right button을 클릭하면 image가 두 번째 줄로 내려가 있는 것을 알 수 있습니다. 이건 무엇을 의미 할까요. 이 결과는 image 를 아래의 code와 같이

처럼 coding을 해도 '다' 자가 한 줄을 차지하고 다음 줄에 image 가 위치하는 것이 아니고, IMG tag이 들어간 줄이 주어진 width 만큼을 text로 채우고 image는 다음 줄에 위치한다는 것 입니다. 아래의 DHTML로 padding, float 등이 지정 되었을 때와 아무 것도 지정하지 않았을 경우를 비교해 보시죠.

text 와 image 그리고 image의 제목이 있는 본문

다음은 text와 image 뿐만 아니라 image에 제목이 붙는 경우를 보겠습니다. 이 경우에는 아래의 code과 같이 div를 사용해서 image와 제목이 들어갈 div를 하나로 묶습니다. image 제목에 div를 사용하는 이유는 별 다른게 아니고, 예를 들어 P tag을 사용하게 되면 위에서 실험해 본 것 처럼 p tag의 아래 위로 margin이 생기기 때문에 p tag 에 margin:0 을 지정해서 위와 아래의 margin이 없어지도록 해야 되기 때문 이죠. 그렇다고 span tag을 쓰면 span tag은 inline text level box이기 때문에 줄이 바뀌지 않고 그림 오른쪽에 image 제목이 위치하게 됩니다. 따라서 margin 이 없는 div를 사용하는 것이 가장 손이 덜 간다는 말 입니다.

Pen

text와 table(도표)가 있는 경우

이 경우는 text와 image가 있는 경우와 동일 하고, source code와 출력 결과는 아래와 같습니다.

R1 C1 R1 C2

R2 C1 R2 C2

다양한 기능을 제공하는 텍스트 입력 방식의 HTML 에디터 HTML-Kit 입니다. HTML 태그에서는 head, body, title, meta, frame, frameset, 텍스트 편집과 관련된 태그 등 거의 모든 태그를 지원하고 ASP, PHP 블러킹, ASP, CGI, SSI 변수값을 사용할 수 있습니다. 이외에도 스타일시트, 이미지 삽입, 버튼, 자바 스크립트, 자바 애플릿 함수 폼, 비주얼 베이직, TCL 스크립트, 각종 마우스 이벤트, 등을 제시해주며, 다양한 form과 input type을 지원합니다.

그러면 PLS Part VIII 는 이 쯤에서 마치도록 하고 다음의 PLS IX 에서는 모서리가 둥근 box와 bullet 같이 문서에 사용되는 Accessory 들에 대해 알아 보도록 하겠습니다...

Article Layout & Formatting | Page Layout Series Part VIII