HTML : 과거와 현재
머리말에서 언급했듯이 HTML 과 이후에 나온 XHTML 은 월드와이드웹상에서 볼수 있는 모든 페이지의 기본 바탕이 되고 있다. 페이지에 CSS를 곁들이면, HTML을 작성하는 방식이 바뀐다. 특정한 시각효과를 구현하기 위해 더 이상 불편한 HTML 태그들을 뜯어 고치지 않아도 된다. 일부 HTML 태그 (예:<font>태그)와 attribute 는 완전히 잊어도 좋다. 다음 섹션에서 그 이유를 설명한다
Note : 이번 장 전반에 걸쳐서 HTML 에 관해 설명하는 내용은 XHTML 에도 동일하게 적용된다. 무지개 색상만큼이나 많은 HTML 과 XHTML 의 변종들이 있지만, 결국은 그 중 한가지 종류를 선택해야 하며, 여러분이 사용한 것이 어느것인지를 웹페이지가 식별해내는지 확인해야 한다. 그렇지 않으면, 애써만든 페이지가 방문자의 브라우저에서는 제대로 보여지지 않을 수도 있다. 이번장의 후반에 여러분이 사용하고 있는 HTML/XHTML 의 특징을 어떻게 CSS 에 전달하는지 방법을 배우게 될것이다.
HTML 과거 : 좋아보이기만 하면 그만이다.
많은 과학자들은 기술문서를 공유하고 찾아서 볼 수 있게 하려고 웹을 제작했을 뿐, 디자인에는 전혀 신경쓰지 않았다. 모든 과학자들은 다만 정보를 이해하기 쉽도록 HTML 을 명료하게 구조화했다. 그 예로써 <h1> 태그는 제일 중요한 제목을 나타내며 <h2> 태그는 대개 <h1> 태그의 다음 제목으로 그보다 덜 중요한 제목을 나타낸다. 그밖에 자주 쓰이는 <ol> (ordered list: 순차목록) 태그는 '해파리를 가지고 장난 치지 말아야하는 10가지 이유 Top 10 ' 처럼 어떤 항목에 대해 번호가 매겨진 목록을 만드는데 쓰인다.
그러나 과학자가 아닌 많은 사람들은 HTML 을사용하자마자 자신들의 웹페이지를 멋있게 꾸미고 싶어한다. 그래서 웹디자이너들은 구조정보보다는 외관을 제어하기 위한 태그들을 사용하기 시작했다. 예를 들어, 다른 워본으로부터 인용된 자료를 나타내기 위한 <blockquote> 태그를 사용하여 모든 텍스트를 약간 들여쓰기 할수있다. 머리글자로서의 기능을 제대로 하는지와 상관없이 머리글자 태그들을 사용하여 텍스트를 크고 굵게 만들수있다.
훨씬 복잡한 편법으로, 디자이너는 텍스트의 열을 만들고, 페이지 안에 나오는 그림이나 텍스트를 정확히 원하는 위치에 나타내기위해 <table> 태그를 사용하는 방법을 배운다. 유감스럽게도 그 태그는 자료입력표와 같은 데이터(예: 결과 탐색, 열차시각표등)를 표현하기 위해 고안되었기 때문에 디자이너는 비정상적인 방법으로 <table> 태그를 사용하여 갖가지 디자인을 창출해냈다. 가끔은 페이지를 근사하게 꾸미기 위해 테이블안의 테이블, 또 그안에 다른 테이블을 넣는 식으로 중첩시키기도 한다
한편 브라우저 제작자들은 페이지를 더 멋있게 보이도록 해주는 특수 용도의 새로운 태그와 애트리뷰트를 선보였다. 예를 들어,<font> 태그를 이용하면 글자 색상, 글꼴, 그리고 7가지 글자크기중에서 하나를 지정할 수 있다(MS 워드 등에 비해 지정할 수 있는 크기의 종류는 약 100개정도 적다)
결국, 디자이너가 의도하는 대로 정확하게 지정되지 않는 경우에는 대개 그림을 사용한다. 예를 들어, 웹페이지의 배경에 엄청나게 커다란 그림을 넣는다던지, 작은 그림파일을 여러개로 나눈다음 테이블안에 합쳐 넣어서 원본이미지를 재현하는 등의 작업을 시도한다.
물론 위에 적은 모든 창의적 방법으로 태그를 사용할 뿐만 아니라 디자인용으로 특화된 태그 애트리뷰트들의 장점을 살려서 그림을 폭넓게 사용하면, 페이지 전반에 걸쳐 멋진 디자인을 얻을수 있다. 그러나 엄청난 분량의 HTML 코드가 추가되어 복잡해지기 때문에 평생 자외선을 죄어야 생기는 주름살보다 훨씬 많은 주름살이 생길 것이다.
HTML 현재 : CSS를 위한 뼈대로
낚시철 일정표, 가장 가까운 IKEA를 찾아가는 법, 아이의 지난 생일파티 사진등 웹 페이지에 무슨 내용을 담든 내용과 상관없이 페이지 디자인에 따라 전문가의 작업처럼, 혹은 아르바이트생의 작업처럼 보이기도 한다. 좋은 디자인은 사이트의 의도가 잘 드러나고, 방문자가 원하는 것을 쉽게 찾을수 있으며, 방문하는 모든 세계인들에게 웹사이트에 대한 어떠한 이미지를 심어준다. 앞의 섹션에서 설명한 어려움을 겪어오면서도 웹디자이너가 HTML을 멋있게 꾸미려고 한 이유가 바로 여기에 있다. CSS가 그러한 디자인 임무를 대신 맡게 됨으로써, HTML은 다시금 본연의 기능인 내용의 구조화에 충실할 수 있게 된다.
텍스트나 다른 웹페이지 엘리먼트들의 겉모습을 제어하는 데 HTML 을 사용한다는 것은 시대에 뒤떨어지는 일이다. 혹시나 HTML 의 <h1>태그가 여러분의 의도에 맞지 않거나 블릿목록의 여백이 정확하게 들어맞지 않을까 걱정할 필요는 없다. 그런 사소한 문제들은 나중에 CSS를 이용하여 처리할 수 있다. 그런 걱정은 접어두고 HTML은 웹상에서 여러분이 보여주고자 하는 내용에 뼈대를 넣어주는 하나으 ㅣ방법이라고 생각하자. HTML 은 내용을 구조화하는데 사용하고, CSS 는 그 구조화된 뼈대를 세련되게 만드는데 사용한다
CSS를 위한 HTML 작성하기
만약 웹디자인에 갓 입문한 사람이라면 HTML 사용버, 또는 의도는 좋았으나 구식인 HTML 방식을 피하기 위해 도움되는 힌트같은 것이 필요할 것이다. 또한, 어느정도 웹페이지를 구축해 온 사람이라면, 몇가지 나쁜 HTML 작성습관이 생겼을 것이다. 이번장의 나머지 부분에서는 HTML을 작성하는 웹디자이너의 습관에 대해 몇가지 소개하려고 한다. 그런 습관을 버린다면 대단한 자부심을 가지고 CSS 를 최대한 활용할 수 있게 된다.
구성 생각하기
HTML은 텍스트를 논리적으로 분할하고, 웹 페이지에 있는 텍스트의 역할을 구분함으로써 텍스트에 의미를 부여한다. 예를 들어, <h1> 태그는 페이지의 내용에 대한 가장 중요한 서론이다. 다른 제목들은 그보다는 덜 중요하지만, 섹션과 관계된 각 부분의 내용을 분리시켜 준다. 웹페이지는 여러분이 들고있는 책처럼 논리적인 구조를 가져야 한다. 이 책의 각장에는 제목이 있으며(<h1>에 비유), 몇개의 섹션들로 구성되고 (<h2>에 비유)그 섹션들은 보다 작은 부섹션들로 나눈다. 만약에 모든 글이 그냥 하나의 긴단락처럼 전부 연결되어 있다면, 얼마나 읽기 힘들지 상상해보자.
HTML에는 내용을 마크업해주는 제목이외에도, 페이지상에서의 역할을 구분하기 위한 많은 태그들이 있다(역자 주 : 마크업 - 원래의 내용에 추가적인 정보를 표시하는 것.) 가장 많이 쓰이는 태그는 텍스트 단락을 뜻하는 <p>태그와 블릿(비순차) 목록을 생성하는 <ul>태그이다. 매우 특수한 유형의 내용을 표현할 수 있는 좀 덜 알려진 태그로는, 약어를 표현하는 <abbr> 태그와 컴퓨터 코드를 나타내는 <code>가 있다.
CSS를 사용하기 위한 뼈대로써 HTML을 작성할 때 외형이 아니라 페이지에서 수행하는 내용의 역할에 맞는 태그를 사용한다. 그 예로 네비게이션 바에 있는 많은 링크들은 실제로 제목도 아니고, 일반텍스트 단락도 아니다. 그것은 여러 옵션들로 구성된 블릿 목록과 거의 비슷하므로, <ul>태그를 사용하는 것이 적당하다. 하지만 블릿리스트에 있는 항목들은 세로로 정렬되는데, 저는 그게 아니라 각각의 링크가 옆으로 나란히 있는 가로 네비게이션 바를 만들고 싶ㅇ건데요 라고 혹자는 말할지도 모르겠다. 하지만 걱정할 것 없다. CSS로 마법을 부려서 세로 링크 목록을 멋진 가로 네비게이션 바로 전환할 수가 잇다. 9장에서 자세한 내용을 확인할수 있다.
알아야 할 새로운 HTML 태그 두개
HTML의 잡다한 태그 모음으로 여러분이 페이지에 넣게 될 광범위한 내용을 전부 표현할 수는 없다. 물론 <code> 태그는 컴퓨터 프로그램 코드를 마크업하기에 안성마춤이긴 하지만, 대부분의 사람들은 보다 편리한 <recipe> 태그를 사용하려 할 것이다. 안타깝지만 그런 태그는 존재하지 않는다. 다행인 것은 HTML 에는 두개의 포괄적인 태그가 있는데, 그 태그들을 사용하면 내용을 보다 쉽게 식별할 수 있으며, 페이지상의 각 엘리먼트에 CSS스타일을 접목할 수 있도록 '실마리'가 생긴다.
다듬지 않은 보석 - HTML 이 간결해야 검색 엔진이 쉽게 읽을 수 있다.
문서의 내용을 구조화하는 수단으로 HTML을 마음속에 그려보자. 그리고 내용을 예쁘게 꾸미는 도구로써 CSS를 떠올려보라. 간결하고 평이한 HTML을 작성할때, 보다 더 많은 장점을 발견하게 될것이다. 먼저 구글, 야후, MSN 등 검색 엔진에서 여러분 사이트의 검색 순위를 높일 수 있다. 검색엔진이 웹을 돌아다니며 주요내용을 발견하여 웹사이트의 내용을 색인화하기 위해서는 페이지 상의 모든 HTML 을 검사해야 하기 때문이다. 하여 특정 태그(예:<font>)나 많은 테이블을 사용하는 구식 HTML 방식을 사용해서 페이지를 디자인하면, 검색엔진이 작업을 수행하는데 방해가 된다. 실제로 일부 검색 엔진은 특정문자수를 넘으면 페이지의 HTML을 더이상 읽어들이지 않는다. 그저 디자인하는데 많은 분량의 HTML을 사용한다면, 검색 엔진이 정작 중요한 페이지 내용은 놓치게 되거나, 혹은 아예 분류나 등급을 매기는 작업자체를 포기할수도 있다.
이와 반대로 단순하고 구조적인 HTML 의 경우는 검색 엔진이 손쉽게 판독하고 색인화 할수 있다. 페이지의 가장 중요한 논제를 나타내는 <h1> 태그를 사용하는 것이 현명한 전략이다. 이것은 텍스트를 단순히 크고 굵게 한다는 차원이 아니다. 검색엔진은 페이지를 색인화하는 과정에서 그러한 특정태그안에 있는 내용에 더 많은 가중치를 둔다. 검색이 잘되는 웹사이트를 구축하기 위해 구글의 제안사항을 보려면, www.google.com/webmasters/guidelines.html 을 방문하면 된다.
<div> 태그와 <span> 태그는 여러분이 컨텐츠를 채워 넣는 빈 그릇과 같다. 이러한 태그들에는 기본적으로 고유의 비주얼한 특성이 들어있지 않으므로, 여러분의 의도대로 보여주기 위해 CSS를 사용할 수 있다. <div>태그는 단락이나 제목처럼 별도의 분할된 내용 구간을 의미한다. 또한 무수히 많은 엘리먼트를 감싸는 용도로도 <div>태그를 사용할수 있다. 즉, 하나의 <div>태그 구간안에 제목, 여러개의 단락, 블릿 리스트등을 넣을수 있다. 페이지를 배너, 푸터, 사이드 바 등의 여러 논리 영역들로 세분할 경우에도 <div> 태그를 사용하는 것이 좋다. 여러분은 추후에 정교한 페이지 레이아웃을 제작하기 위해서 CSS 를 이용해 각 영역의 위치를 지정할 수 있다.
<span>태그는 인라인 엘리먼트에 사용된다. 여기서 인라인 엘리먼트란, 더 큰 단락이나 헤더안에 포함된 어구나 단락을 말한다. <a> 태그(단락 내의 일부 텍스트에 링크를 넣음)나 <strong>태그와 같ㅇ느, 다른 인라인 HTML 태그들과 마찬가지로 취급하면 된다. 예를 들어, <span>태그를 사용해서 회사명을 표시한 다음, CSS를 이용하여 다른 글꼴, 색상등을 넣어 그 회사명을 강조할수도 있을 것이다. 아래에 그러한 태그들을 실제 사용해서, 페이지의 여러 부분의 스타일을 정의하는데 빈번히 이용되는 두개의 애트리뷰트(id 및 class)를 삽입하여 그 예를 실제로 완성해 보았다.
- <div id="footer">
- <p>Copyright 2006, <span class = "bizName">CosmoFarmer.com</span></p>
- <p>추가 문의사항은 고객 서비스센터 555-555-5501로 문의 바랍니다.</p>
- </p>
위에 간략히 삽입된 태그들은 앞으로도 계속 해서 등장한다. CSS에 비중을 둔 웹페이지에서는 자주 사용되는 태그들이며, 이 책에서는 여러분이 웹페이지 전반에 결쳐 창의적인 제어를 할 수 있도록 CSS와 조합하여 이 태그들을 사용하는 방법에 대해 설명할 것이다.
잊어야할 HTML
CSS를 사용하면 HTML을 더 간단히 작성할 수 있는데, 그러한 커다란 이유 가운데 하나는 페이지를 꾸미는 데만 그 많은 태그와 애트리뷰트들을 사용하지 않아도 되기 때문이다. <font>태그는 그중 가장 두드러진 예이다. 그 태그의 유일한 목적은 텍스트의 색상, 크기 , 글꼴을 지정해주는 것 밖에 없다. <font>태그를 사용한다고 해서 페이지의 구조가 보다 이해하기 쉬워지는 것은 아니다. 다음은 CSS로 간단히 대체할 수 있는 태그와 애트리뷰트 목록이다.
- 글자를 꾸미는 용도로 <font>태그를 사용하지는 말자. CSS를 이용하면 텍스트에 훨씬 근사한 작업을 할 수 있다(텍스트 형식정의)
- 텍스트를 볼드체나 이탤릭체로 만들때 <b> 나 <i>를 더이상 사용하지 말자. CSS로는 아무 태그라도 볼드체나 이탤릭체로 만들 수 있으므로, 쓸데없이 이러한 형식정의 전용 태그를 사용할 필요가 없다. 그러나 혹시 단어나 문장을 정말로 강조하고 싶다면, <strong>태그를 사용하라(어쨌든 브라우저는<strong>텍스트를 볼드체로 표현할 것이다). 약간 덜 강조하려면 <em>태그를 사용하면 된다(이 태그안의 내용은 이탤릭체로 표현된다. )
Note : 출판물의 제목을 이탤릭 체로 만들 때는 <cite>태그를 사용하는 것이 일석이조다. 그렇게 하면 제목은 이탤릭체가 되며, 검색엔진에서는 그 제목을 인용된 작업물로 분류하므로 유리하다. 이러한 분류는 오래간다
- 페이지를 레이아웃 할대, <table> 태그를 사용하지 마라. 스프레드 시트, 일정표, 도표와 같은 표로 된 정보들을 표현할 땜나 <table>를 사용해야한다. CSS 를 이용하면 테이블 태그를 사용하는 것보다 훨씬 적은 시간과 코드를 들여서 모든 레이아웃 작업을 할 수 있다.
- 페이지, 텍스트, 링크에 색상과 이미지를 지정하는background, bgcolor, text, link, alink, vlink 처럼 내용의 외형만을 보강해주는<body> 태그의 복잡한 애트리뷰트들은 삭제하자. CSS 를 이용하면 이보다 훨씬 멋지게 구현할 수 있다.페이지의 여백을 지정하는데 사용되는 leftmargin, topmargin, marginwidth, marginheight 와 같은 특정 브라우저에서만 인식되는 전용 애트리뷰트들은 쓰레기통에 버려라. CSS를 이용하면 페이지 여백도 간단히 처리 할 수 있다.
- <br /> 태그를 오용하지 말라. 새단락을 생성하지 않고 줄 바꿈을 넣으려고 <br / >태그 사용을 늘렸다면, 그보다 더 좋은 방법이 있다. 브라우저는 가끔은 짜증스럽게도 단락들 사이에 제목과 <p> 태그 사이에 자동으로 약간의 공백을 넣는다. 기존 디자이너는 단독 <p>태그를 수많은 줄 바꿈으로 치환한다던지, 단락의 첫줄을 제목처럼 보이게 하려고 <font>태그를 이용하는 식으로 원치 않는 단락간의 간격을 없애기 위해 복잡한 방법을 사용했다. CSS 의 여백조절을 사용하면, 단락들 사이라든가 제목과 다른 블럭 엘리먼트들 사이에 원하는 간격을 손쉽게 넣어줄 수 있다.
일반적으로 태그에 색상, 테두리, 배경 이미지, 정렬 등을 설정하는 애트리뷰트나 테이블색상, 테이블 배경, 테이블 테두리 형식을 정의할 수 있는 애트리뷰트를 넣는 것은 완전히 구식 HTML 이다. 이미지의 위치를 지정하는 것이라든가 단락 및 테이블 셀에 들어있는 텍스트를 중앙에 맞추는 정렬 프로퍼티를 사용하는 것 역시 마찬가지다. 이제는 텍스트 위치, 테두리, 배경, 이미지 정렬을 제어할 수 있는 CSS로 시선을 돌리자.
여러분을 인도해 줄 조언
육지위치를 파악할 수 있는 지도가 있다는 것은 언제나 좋은 일이다. 구조화가 잘된 웹페이지를 만들기 위한 HTML 사용법을 아직도 정확히 모르겠다면, 입문에 도움을 다음의 몇가지 팁을 참고하자
- 각 페이지당 <h1>태그는 단 한번만 사용하고, 페이지의 핵심 주제를 표시하는 데사용하자. 각 장마다 하나씩 들어있는 제목이라고 생각하면 이해하기 쉽다. 각 장에는 제목을 한개만 넣는다. <h1>태그를 제대로 사용한다면, 검색 엔진이 적절히 색인화 할수 있다는 부수적 장점도 생긴다.
- 텍스트의 상대적 중요도를 나타내려면, 머리글자를 사용하자. 개요를 떠올려 보라. 두개의 머리글자가 여러분이 만든 페이지의 주제에 있어서 동등한 중요도를 가진다면 두 제목에 같은 단계의 머리글자를 사용하면 된다. 만일 하나가 다른 것에 비해 덜 중요하거나 다른것에 속한 부제라면, 그 다음 단계의 머리글자를 사용하면 된다. 예르 들어 <h2> 다음에는 <h3> 태그를 사용한다. 일반적으로 머리글자 번호를 건너뛰지 말고 사용하는 것이 바람직하다. 예를 들어 <;h2>태그 다음에 바로 <h5>태그를 사용하지 말자.
- 이쯤이야 모를리 없겠지만 텍스트 단락에는 <p> 태그를 사용한다.
- 네비게이션 링크, 제목, 지금 보고있는 것 같은 팁 모음처럼 몇개의 관련 항목의 목록을 만들 때는 비순차 목록 <ul>을 사용한다.
- 과정단계를 설명하거나 항목 집합의 순서를 정의할 경우에는 순차 목록 <ol>을 사용하자.
- 용어 및 용어들의 정의나 설명을 담은 용어집을 만들려면 <dt>(definition term : 정의 용어) 태그들과 함께 <dl>(definition list : 정의 목록) 태그를 사용하자.
- 다른 웹사이트의 원문, 영화 평론, 명언이나 고사성어등을 발췌하는 것처럼 인용을 넣고 싶다면, 긴 구절에는 <blockquote> 태그를 , 짧은 글에는 <q>태그를 사용하자.
- 책제목, 신문 기사, 웹사이트 등을 넣을 때는 <cite>태그를 그리고 페이지 제작자의 연락처 정보를 구분해서 보여주려면 <address> 태그를 사용하라.
- 조건에 맞는 HTML 태그는 없지만 각각 전부 다른 외관을 적용하기 위해 페이지 상의 하나 혹은 엄청 많은 엘리먼트들을 따로 따로 구분하고 싶은 경우에는 <div> 와 <span>태그를 사용한다.
- 태그는 담드시 닫아야 한다는 점을 명심하자 <br /> 과 <img / > 처럼 그 자체로 닫히는 단독 태그 몇개를 제외한 모든 나머지 태그들과 마찬가지로 시작 <p> 태그에도 반드시 종료 </p> 태그라는 공범이 있어야 한다.
- W3C 유효성 검사기로 여러분이 만든 페이지의 유효성을 검사해보라.