처음부터 다시 배우는 HTML5&CSS3 실전 웹 표준 사이트 제작까지 양용석(ugpapa@gmail.com)
강의 목차 HTML 문서의 구조 설계 HTML5 을 이용한 HTML 문서 구조 잡기
HTML 문서의 구조 설계 HTML5는 이전 버전의 HTML4 또는 XHTML1.0에서 진화하여 몇 가지 태그들이 추가되었다고 이전 강의에서 언급했습니다. 이제 이런 태그들을 사용하여 어떻게 사이트의 구조를 설계하는지 간단히 예를 들어 살펴보고 추후 직접 실전예제를 제작하면서 자세히 배워보겠습니다. 일반적으로 사이트를 제작할 때는 사이트의 구조를 먼저 설계합니다. 그렇다면 사이트의 구조는 어떻게 이루어져 있을까요? 일반적으로 생각하는 것 보다 다양한 구조가 있진 않습니다. 디자인 요소에 따라 다르게 보일 뿐, 일반적으로 다음 그림과 같이 크게 네 가지 형태로 구분할 수 있습니다.
HTML 문서의 구조 설계 ① ② ③ ④ 일반적인 웹사이트의 구조 상단/하단/왼쪽 메뉴/ 오른쪽 콘텐츠 상단/하단/가운데 콘텐츠 ③ ④ 상단/하단/왼쪽 콘텐츠/ 오른쪽 메뉴 왼쪽 메뉴/ 오른쪽 콘텐츠 일반적인 웹사이트의 구조
HTML 문서의 구조 설계 그림에서 1번 형태의 구조가 가장 일반적이며 많이 사용됩니다. 하지만 요즘 많은 사람이 이용하는 개인 블로그인 경우에는 3번의 형태를 지니고 있는 경우도 있습니다. 또한 일반 기업 사이트의 프론트(front) 페이지는 2번의 형태로 설계되고 서브 페이지는 대부분 1번 형태로 구성되어 있습니다. 4번 형태의 레이아웃(그림에서는 오른쪽 메뉴, 왼쪽 콘텐츠 이지만, 일반적으로 왼쪽 메뉴, 오른쪽 콘텐츠 형태로도 많이 사용)은 보통 웹 사이트를 이용해서 사용자 설명서를 제작하거나, 이북(eBook) 형태로 콘텐츠를 제공하는 경우 사용되기도 합니다.
HTML 문서의 구조 설계 이제 실제 삼성그룹 사이트를 예로 들어 살펴보겠습니다. 그림을 보시면 삼성그룹 웹사이트의 프론트 페이지는 2번 형태인 것을 알 수 있습니다. 삼성그룹 웹사이트 프론트 페이지의 구성 요소 삼성그룹 웹사이트의 프론트 페이지
그림과 같은 구조를 지닌 사이트의 XHTML1.0 코드 <div id="header"> <div id="nav"></div> </div> <div id="content"> <div id="news"></div> <div id="social"></div> <div id="footer"></footer> 그림과 같은 구조를 지닌 사이트의 XHTML1.0 코드
HTML 문서의 구조 설계 하지만 HTML 5를 이용해서 사이트를 만들 때는 다음과 같은 형태로 변하게 됩니다. 예제를 비교해보면 아래의 예제가 이전 버전에 비해 코드가 많이 간소화된 것을 볼 수 있습니다. 참고로, 두 예제는 HTML 태그를 이용해서 구조만 잡은 형태입니다. 예제를 입력한다고 해서 구조가 보이는 것은 아니며, HTML은 구조만 잡고, CSS를 이용해서 구조에 디자인을 입히는 것입니다. 구조를 만들고 자세하게 구현하는 방법은 실제 사이트 제작에서 다루도록 하겠습니다. <header> <nav></nav> </header> <article></article> <div id="news"></div> <div id="social"></div> <footer></footer> HTML5에서 사용하는 코드 형태
HTML 문서의 구조 설계 이제 서브 페이지를 한번 살펴보겠습니다. 서브페이지는 사이트 레이아웃에서 1번 형태와 거의 같습니다. 웹사이트는 대부분 프론트 페이지와 서브페이지의 구성이 유사합니다. 이제 아래의 왼쪽 그림을 기반으로 삼성그룹 서브 페이지의 구성(오른쪽 그림)을 살 펴 보겠습니다. 삼성그룹 웹사이트의 서브페이지
HTML 문서의 구조 설계 화면에서는 나오지 않지만 footer 부분도 들어가 있습니다. 서브 페이지의 코딩은 HTML5 이전 버전의 경우 왼쪽과 같이 코딩되며, HTML5 인 경우에는 오른쪽과 같이 코딩 가능함. <div id="header"> <div id="nav"></div> </div> <div id="sidemenu"> <ul> <li> … </li> </ul> <div id="content"> <div class="mainimg></div> <div id="footer"></footer> <header> <nav></nav> </header> <div id="sidemenu"> 여기는 aside 로 대치 가능 <ul> <li> … </li> </ul> </div> <article> <figure></figure> </article> <footer></footer> HTML4.01 또는 XHTML1.0에 의한 사이트 구조 XHTML1.0 예제를 HTML5로 변환한 예
HTML 문서의 구조 설계 이렇듯 예제를 비교해서 살펴보면, XHTML1.0으로 코딩 할 때보다 HTML5로 코딩하는 것이 훨씬 효율적이며, 코드의 양도 적어지는 것을 알 수 있습니다. 항상 강조하지만, 코드의 양이 적어질수록 웹사이트가 가벼워져 브라우저에서 구동하는 시간이 훨씬 빨라집니다. 이렇게 HTML5에서는 이전 버전의 HTML 문서에서 구조를 잡기 위해서 사용하던 방식을 내장 태그로 정의했습니다. 이렇게 내장 태그로 정의해 줌으로써,HTML5는 구조적인 장점이 있게 됩니다. 무슨 말인가 하면, 이전 버전에서는 <div id="head"> 또는 <div id="header"> 아니면 <div id="front">라고 개발자마다 머리말을 지정해 주는 아이디 선택자 이름이 제각각 이지만, HTML5에서는 <header>라는 공통된 태그를 사용하기 때문에 누가 보더라도 <header>는 머리말이라는 것을 인식할 수 있습니다. 그래서 이 header(머리말), footer(꼬리말), article(본문) 부분을 다른 프로그램으로 가져 왔을 때도 호환성을 유지할 수 있는 것입니다. 이것이 HTML5가 가지는 가장 큰 구조적인 장점이라고 할 수 있습니다. 즉 HTML5에서는 각각의 구조를 내장 태그로 표현해 줌으로써 표준화되지 않았던 문서 구조를 표준화하여 진정한 웹 표준화를 이루었다고 말할 수 있는 것입니다.
HTML5를 이용한 HTML 문서 구조 잡기 이번에는 바로 앞서 구조적으로 만든 부분을 시각적으로 표현해 보겠습니다. 레이아웃 그림에서 일반적으로 사용하는 1번 구조를 HTML5와 CSS로 표현하여 어떻게 구조를 잡는지, 잡은 구조는 어떻게 디자인되는지 아주 간단한 예제를 통해 학습하겠습니다. 여기서 제시하는 CSS 구문은 그냥 눈으로만 봐주기 바라며, 자세한 설명은 하지 않겠습니다. 제시하는 예제는 단순히 구조를 잡는 용도로만 사용되었으며, CSS 코드를 모를 경우에도 예제를 통해 추후 학습하게 되면, 어떤 내용인지 바로 파악할 수 있습니다. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML 5 문서 구조 잡기</title> </head> <body> <header> 머리말 </header> <div id="sidemenu"> 사이드 메뉴 </div> <article> 본문 </article> <footer> 꼬리말 </footer> </body> </html> 기본적인 HTML5의 문서 구조
HTML5를 이용한 HTML 문서 구조 잡기 예제의 코드를 보면 <header> 부분은 문서의 머리말이 들어가는 부분, <article>은 본문이라는 것을 알 수 있어 바로 문서의 구조를 파악할 수 있습니다. 이와 같이 HTML5로 코딩하면 누구나 기초적인 코딩으로 문서의 구조를 만들 수 있습니다. 이것이 HTML5가 가지고 있는 구조화, 표준화의 장점입니다. 기획 단계에서도 여기 머리말에는 뭐가 들어가고 본문에는 뭐가 들어가는지 설계하고 바로 코딩이 가능합니다. 하지만 여기 예제만 가지고는 그림과 같은 형태의 웹사이트가 만들어지는 것은 아닙니다. 다음장의 그림에서 보는 것과 같이 CSS가 입혀지지 않은 문서는 내용만 보일 뿐 디자인적인 요소는 전혀 없습니다. HTML은 문서의 구조만 담당하며, 문서의 디자인은 CSS가 처리하기 때문입니다. ㈜ 앞장의 예제 코드에서 “<div id="sidemenu"> 사이드 메뉴 </div>”는 “<aside> 사이트 메뉴 </aside>”로 변경 가능함.
HTML5를 이용한 HTML 문서 구조 잡기 <style type="text/css"> body { font-size: 1em; color: #333; } header, article, footer, #sidemenu { border: 1px solid #999; ... 중략 ... footer { clear:both; height:100px; background-color: #6CF; </style> HTML 5 기본 문서 ( CSS 미 적용 모습 ) source/ch03/ex3-6.css 여기 보이는 CSS 를 적용해야만 사이트의 디자인이 완성 됨. HTML 5 기본 문서 ( CSS 적용 후 모습 )
HTML5를 이용한 HTML 문서 구조 잡기 HTML5에서 새롭게 도입된 태그들을 추가해서 기본적인 문서 구조를 완성해 보도록 하겠습니다. HTML 5에 의한 문서 구조 HTML5에 CS3를 추가해서 디자인한 결과
HTML5를 이용한 HTML 문서 구조 잡기 source/ch03/ex3-7.html source/ch03/ex3-9.css <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML 5 문서 구조 잡기</title> <style type="text/css"> / * CSS 스타일 생략 */ </style> </head> <body> <header> 머릿말 <nav> <ul> <li>Nav menu 1</li> … 중간 생략 </ul> </nav> </header> <div id="sidemenu"> 사이드 메뉴 <li>Menu 1</li> … 중간 생략… <li>Menu 3</li> <aside> 보조적인 asdie 내용 </aside> </div> <article> <hgroup> <h1>본문이 들어가는 곳입니다. </h1> <h2>훈민정음을 예로 넣었습니다. </h2> </hgroup> <figure> <img src="images/2010.04.29.raw.124.jpg" width="241" height="160"> <figcaption> 그림 설명 들어가는 곳</figcaption> </figure> <p>나랏님(세종) 말씀이, … <mark>한자로는 … 아니하므로</mark> 이런 까닭에 … 써서 편안하게 할 따름이니라.</p> <section> 섹션이 들어가는 곳 </section> </article> <footer> 꼬릿말 </footer> </body> </html> source/ch03/ex3-7.html source/ch03/ex3-9.css 반드시 예제 소스를 PC에서 실행해서 결과를 확인해 보세요. 그리고 예제 소스를 기반으로 직접 태그를 입력하여 실습하시기 바랍니다. IE9 이하의 브라우저에서는 HTML5 문서가 제대로 보이지 않습니다. 윈도우 7이 설치된 PC에서는 IE8을 IE9으로 업그레이드 해주시고, 윈도우 XP 환경인 경우 파이어폭스 또는 구글 크롬 등의 브라우저를 이용해서 해당 소스를 실행해 주시기 바랍니다.
HTML5를 이용한 HTML 문서 구조 잡기 지금까지 HTML5를 사용해서 사이트의 구조를 잡는 법을 간단하게 살펴봤습니다. HTML5가 출현하면서 웹 문서의 구조에 대한 명확한 정의가 이루어지고, HTML5 이전에 문서의 구조를 잡을 때 쓰던 다양한 아이디(클래스) 선택자의 이름을 하나의 표준으로 만들어서 이전 버전의 웹 문서보다 HTML5 문서의 구조는 명확하고 간결 해졌습니다.(클래스/아이디 선택자는 나중에 배웁니다) 또한 HTML5에서는 표현을 위한 태그가 거의 사라졌기 때문에 HTML 태그만으로 는 웹 문서의 디자인이 불가능합니다. 반드시 CSS를 통해서 디자인을 입혀야 하는 것입니다. 스타일을 옷이라고 생각한다면, html 은 그 옷을 입고 있는 사람의 몸으로 비유할 수 있습니다. 몸은 바꿀 수 없지만 옷은 바꿀 수 있습니다. 이렇게 몸을 제대로 만들 어 놓은 상황에서 옷만 바꾸게 되면 사람이 다르게 보이는 것처럼, 웹 표준에 의한 문서들도 html을 통해 제대로 된 구조를 갖추게 된다면, CSS를 통해서 얼마든지 디 자인 변경이 가능한 것입니다.