CSS를 이용한 웹의 다양한 변화
The Zen of CSS Design 의 Tip - 의미단위의 Markup 작성과 페이지에 이미지 넣기
작성자: 월하검객(ykid1@naver.com)
마지막수정일: 2007-06-18
최초작성일: 2007-06-18
1. 기존의 방법과 문제점(테이블 레이아웃과 문제점)
이전 초기의 웹 디자인들은 대부분 HTML의 [TABLE]태그를 이용한 레이아웃을 설정하고 거기에 맞게 이미지와 텍스트를 넣는 방식이었다. 이 방법은 [TABLE]태그 즉 표를 이용한 레이아웃 이기때문에 제작하는 사람이 이해하기 쉬워서 많이 사용한다. 포토샵에서도 웹 디자인 시에 이미지를 자르면 자동적으로 테이블 레이아웃 형태의 HTML을 작성해 주었다.(MS워드나 한글 등에서도 문서작업을 위해 표를 그리고 각각의 셀에 맞춰 내용을 작성하거나 그림등을 넣으면 보기 좋은 문서를 만들 수 있다. - 많이들 사용하시는 방법)
이른바 테이블 레이아웃의 경우 이해하기 쉽기 때문에 작성하기 쉽지만 일단 한번 작성된 HTML페이지는 수정하기가 쉽지 않았다. 아무리 웹 에디터를 사용한다고 해도 워드 프로그램 처럼 쉽게 수정이 되지않았다.
예전에 한 프로젝트 초기단계에서 페이지 디자인이 거의 끝날 무렵 사용자의 변심으로 디자인 전체를 수정해야 할 때가 있었다. 이른바 글자로 불리우는 텍스트 내용의 수정 보다는 이미지와 배치의 수정이 거의 대부분 이었는데 이것이 전부 테이블 레이아웃으로 되어 있어서 수정하느라 디자이너분과 함께 아주 애 먹은적이 있다.(실무에 계신 분들은 아시겠지만 이런 변심에 의한 수정의 경우 거의 막판에 그것도 수정기간 아주 '짧게' 줍니다. ㅡㅡ;)
하나의 웹 솔루션을 다른 형태로 제공해야 할때, 별도의 디자인과 더불어 이른바 보여지는 부분의 프로그램 수정이 불가 피할 수 있습니다. 동일한 내용임에도 이른바 디자인 변경을 위해 HTML을 대대적으로 수정해야 하는 어려움이 있습니다.
2. 테이블 레이아웃을 DIV 태그로... ?
위의 내용들은 이미 많이 알고 계시는 이야기들이고 최근(?)에 웹 표준화와 더불어 '테이블 레이아웃을 사용하지 말고 CSS를 이용하자'라고 합니다.
하지만 이미 많이들 테이블 레이아웃에 익숙해 있고 막상 HTML, XHTML 표준 문법과 CSS에 맞춰 작성하려고 하니 쉽지 않숩니다. 그래서 기존의 테이블 레이아웃을 [DIV]나 리스트 관련 태그로 바꾼다음 [DIV] 태그에 CSS를 적용하는 방법을 많이 사용하는 것으로 알고 있습니다.
익숙해지면 어떨지 모르겠지만 저의 경우에는 단순히 테이블 레이아웃을 [DIV]태그로 바꾸고 거기에 CSS를 '테이블 레이아웃'처럼 적용하는 것은 매우 어려웠습니다.
3. The Zen of CSS Design 에서 소개하는 CSS활용 Tip
W3C 에있는 CSS부분에 가면 독특한 참고 사이트 하나가 보입니다. 이미 많이 접해본 분들도 있을법한 이 사이트는 다음과 같습니다.
'css Zen Garden - The Beauty of CSS Design'(http://www.csszengarden.com)
이 사이트는 하나의 HTML에 각각 다른 CSS를 적용하여 전혀 다른 사이트 같은 느낌을 들게하는 형제(?) 사이트를 가지고 있습니다. 즉 CSS를 이용한 다양한 디자인을 소개 하고 있습니다.
자 그럼 본론으로 들어 가서 CSS를 활용하는 HTML과 CSS 작성법중 주목할 만한 Tip 2가지를 말하려고 합니다.(달랑 2가지 말하려는데 무쟈게 뜸들인...)
1. 의미있는 Markup(Semantic Markup)
HTML, XHTML 코드를 작성할때 일반적으로 보여지는 부분에 신경을 많이 썼습니다. 예를 들면 다음과 같이
<br><br>
<b><font size="2">Our Family</font></b>
<br><br>
<font size="1">Pictured are Matt and Jeremy. As usual, Matt is making a funny face. We don't have many photos where he isn't.</font>
<br>이라던가 <font> 같은 태그를 이용해서 내용이 아닌 그 내용이 보여지는 것 까지 나타내려고 했습니다. 하지만 이렇게 하면 보여지는 부분을 책임지는 CSS영역을 침범하는 것입니다. Markup의 코드는 (거의)순수하게 의미 단위로 묶어 줘야 합니다.
<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy. As usual, Matt is making a funny face. We don't have many photos where he isn't.</p>
</div>
이런식으로 의미 단위로 해야만 동일한 Markup에 각각의 태그, ID, Class 등에 대한 CSS정의를 이용하여 다양한 디자인을 적용할 수 있습니다.
태그를 이용할때 꾸미는 태그(font, br, strong 등)는 사용하지 않고 의미 단위나 블럭 단위를 구분하는 태그(div, p, dd, h3 등)를 사용해서 Markup을 작성합니다. 말 그대로 텍스트 위주의 페이지만을 작성합니다.
2. 텍스트 위주? 그럼 그림은?
텍스트로만 꾸며진 페이지를 보면서 CSS를 어떻게 할 것인가? 그림이 들어가야 할 것 같은데... 하면서 머리가 아파올 수 있습니다. 여기에 글자를 이미지로 바꾸는 트릭을 소개 합니다.
먼저 의미 단위로 작성하려는 Markup에 다음과 같이 글자부분 앞뒤에 <span>태그로 블록을 넣어줍니다.
<div id="family">
<h3><span>Our Family</span></h3>
<p><span>Pictured are Matt and Jeremy. As usual, Matt is making a funny face. We don't have many photos where he isn't.</span></p>
</div>
그다음 CSS에서 다음과 같은 트릭을 사용 합니다.
div {
background-image:url("hello_world.gif");
background-repeat:no-repeat;
height:35px;
}
span {display:none;}
<span>태그로 묶여진 글자는 사라지고 대신 그림이 보여집니다.
위의 2가지 팁에 대해 Markup은 무조건 텍스트만 있어야 하고 이미지를 넣기 위해서는 트릭을 사용해야만 하는 것은 아닙니다. 의미 단위로 작성한다는 것은 맞지만 이미지도 의미 단위가 될 수 있습니다. 다만 기존의 페이지 작성같은(테이블 레이아웃에 의미없이 이미지를 조각조각 잘라서 넣는) 방법은 피해야 한다는 것입니다. 동일한 내용에 대해 다른 CSS를 적용해도 반드시 동일한 이미지(상표 같은)를 나타내야 하는 이미지는 의미의 단위로 사용될 수 있습니다. 위의 팁들은 하나의 방법일 뿐 절대적인 것은 아닙니다.
