02. 퍼블리싱

여러가지 방법이 있겠지만 아래와 같이 자르도록 하겠습니다.

위와 같이 목적을 가지고 자르도록 합니다.

자를때는 아래에서 소개하는 파일 포맷을 잘 이해하여 정교하게 하는 것이 좋습니다.

이미지 파일은 gif, jpg, png등이 일반적으로 사용됩니다.
각각 목적과 효과가 다릅니다.

gif
상대적으로 작은 용량으로 저장할 수 있고 투명/ 애니메이션 효과가 가능하지만 큰 이미지에는 사용을 자제하는 것이 좋음
그리고 gif파일은 color index를 포함하므로 가능한 색상 수가 적을 수록 파일 크기가 작아짐
jpg
이미지를 압축 저장하기 때문에 큰 파일 저장할때 유리하고 직접 압축질을 선택할 수 있어서 상황에 따라 파일 크기 조절 가능
다만 압축 저장이 되어 원본이 훼손 될 수 있으니 연결되는 분위를 자를 경우 색상의 변화가 생길 수 있음
png
gif처럼 투명 효과도 제공하고 특히 alpha값, 즉 투명도를 반영할 수 있어서 매우 편하고 강력히 사용할 수 있지만 IE6에서 제대로 지원이 되지 않는다는 단점이 있음.
단 zbXE에서는 iePngFix등과 같은 className을 부여할 경우 정상적으로 투명/알파채널의 값이 반영이 됨

먼저 잘 잘라진 이미지를 이용하여 형태를 구성하여야 합니다.

HTML 문서는 여러가지 DocType(document type)을 가지고 그에 따라 조금씩은 다른 모습을 보여줍니다.

zbXE에서는 XHTML 1.0 Transitional 을 이용하고 있습니다.

먼저 손쉽게 작업하기 위해서 layout_sample.zip 파일을 다운로드 받으세요.

이 파일에는 레이아웃을 생성하기 위한 가장 기본적인 파일들이 있습니다.

각 파일들의 구성 요소는 다음과 같습니다.

layout_sample.zip 파일을 다운로드 받아서 압축을 풀어 적당한 곳에 놓으세요.

그리고 layout.html 파일을 더블클릭하거나 브라우저에 끌어다 놓으면 아래와 같은 내용만 출력됩니다.

{$content}

이제 퍼블리싱을 위한 기본 준비는 끝났고 실제 예제 이미지를 html 코드로 만들어 봅시다.

HTML문서는 특별한 경우(dhtml등)이 아니면 위에서부터 아래로 읽으면서 표시를 합니다.

여러가지 제작 방법이 있겠지만 여기서는 전체 그림을 대상으로 분할을 하고 진행하겠습니다.

위와 같이 영역을 분할하는 것은 대부분 구성 요소의 배치를 보면 자연스럽게 되지만 이 레이아웃 디자인에서 좌우 그림자 배경때문에 조금 중첩이 되는 구조로 잘려집니다.

위와 같이 분할 하여 퍼블리싱한 결과는 다음 파일을 받으시면 됩니다.

파일을 다운 받으시고 압축을 풀고 layout.html 파일을 더블클릭하시거나 브라우저로 끌어 놓으면 결과가 보입니다.

일단 다음과 같은 유의점들이 있으니 참고하여 분석하시기 바랍니다.

가능한 가로/세로 길이가 정해진 것이 작업하기 편합니다.
그렇지 않은 경우는 보다 세밀한 작업이 필요합니다.
div는 한줄을 다 차지하는 속성을 가지지만 style의 float:left 나 float:right로 한 줄에 여러개가 나오게 할 수 있습니다.
단 이 경우 각 div의 높이를 잘 지정해 주어야 원하는 배치가 가능합니다.
그리고 FF/Safari/Opera에서는 div 속성에 overflow:hidden 을 추가해줌으로서 그 div의 높이가 정확히 파악이 되지만 IE계열에서는 float를 사용한 div들 제일 끝에 <div style="clear:both"></div>를 삽입해주어야 합니다.
div의 배치를 할때 border:1px solid red; 와 같이 외곽선을 그리는 방법으로 배치방법을 확인할 수 있습니다.
메뉴링크의 경우 가능한 ul/ li 태그로 꾸미는 것이 차후 여러모로 도움이 됩니다.
이 때 ul에 margin:0; padding:0; list-style:none; 을 지정함으로서 div와 똑같은 모양으로 만들 수 있습니다.

div로 레이아웃을 꾸미는 것은 다음 style들을 알면 어렵지 않게 할 수 있습니다.

float
div의 좌우위치를 정합니다. left와 right값이 있습니다.
clear
float로 인한 값을 무효화 시킵니다. left/ right/ both 가 있습니다.
width
가로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다.
height
세로 길이를 지정합니다. 100px 과 같이 꼭 단위(px, pt, em등)을 지정해야 합니다.
overflow:hidden
정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다.
margin
div의 외부 여백을 조절합니다.
margin:상px 우px 하px 좌px; 로 사용됩니다.
margin:0 auto; 로 하면 가운데 정렬을 합니다.
padding
div의 내부 여백을 조절합니다.
padding:상px 우px 하px 좌px; 로 되며 IE계열에서는 width에 좌/우가 포함이 되어버리는 버그가 있습니다.

퍼플리싱까지 끝났다면 이제 03. 스킨 적용을 통해서 실제 zbXE의 레이아웃으로 동작할 수 있도록 합시다.