처음부터 다시 배우는 html5&css3

처음부터 다시 배우는

HTML5&CSS3실전 웹 표준 사이트 제작까지

양용석([email protected])

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. HTML 문서의 구조 설계

2. HTML5 을 이용한 HTML 문서 구조 잡기


HTML 문서의 구조 설계HTML5 는 이전 버전의 HTML4 또는 XHTML1.0 에서 진화하여 몇 가지 태그들이추가되었다고 이전 강의에서 언급했습니다 .

이제 이런 태그들을 사용하여 어떻게 사이트의 구조를 설계하는지 간단히 예를 들어 살펴보고 추후 직접 실전예제를 제작하면서 자세히 배워보겠습니다 .

일반적으로 사이트를 제작할 때는 사이트의 구조를 먼저 설계합니다 .

그렇다면 사이트의 구조는 어떻게 이루어져 있을까요 ? 일반적으로 생각하는 것 보다 다양한 구조가 있진 않습니다 . 디자인 요소에 따라 다르게 보일 뿐 , 일반적으로 다음 그림과 같이 크게 네 가지 형태로 구분할 수 있습니다 .


HTML 문서의 구조 설계

일반적인 웹사이트의 구조

상단 / 하단 / 왼쪽 메뉴 / 오른쪽 콘텐츠 상단 / 하단 / 가운데 콘텐츠

왼쪽 메뉴 / 오른쪽 콘텐츠상단 / 하단 / 왼쪽 콘텐츠 / 오른쪽 메뉴

① ②

④③


HTML 문서의 구조 설계그림에서 1 번 형태의 구조가 가장 일반적이며 많이 사용됩니다 . 하지만 요즘 많은 사람이 이용하는 개인 블로그인 경우에는 3 번의 형태를 지니고 있는 경우도 있습니다 .

또한 일반 기업 사이트의 프론트 (front) 페이지는 2 번의 형태로 설계되고 서브 페이지는 대부분 1 번 형태로 구성되어 있습니다 .

4 번 형태의 레이아웃 ( 그림에서는 오른쪽 메뉴 , 왼쪽 콘텐츠 이지만 , 일반적으로 왼쪽 메뉴 , 오른쪽 콘텐츠 형태로도 많이 사용 ) 은 보통 웹 사이트를 이용해서 사용자 설명서를 제작하거나 , 이북 (eBook) 형태로 콘텐츠를 제공하는 경우 사용되기도 합니다 .


HTML 문서의 구조 설계이제 실제 삼성그룹 사이트를 예로 들어 살펴보겠습니다 .그림을 보시면 삼성그룹 웹사이트의 프론트 페이지는 2 번 형태인 것을 알 수 있습니다 .

삼성그룹 웹사이트의 프론트 페이지 삼성그룹 웹사이트 프론트 페이지의 구성 요소


HTML 문서의 구조 설계HTML5 이전에는 삼성 그룹 웹사이트 같은 구성은 일반적으로 다음과 같이 코딩을 하였습니다 .( * 여기서 말하는 코드는 삼성그룹 사이트의 코드가 아닌 그림과 같은 3 번 구조의 웹사이트 코드를 말합니다 ).

<div id="header">

<div id="nav"></div>

</div>

<div id="content">

<div id="news"></div>

<div id="social"></div>

</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><div id="content"> <div class="mainimg></div></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 문서 구조 잡기

HTML 5 기본 문서 ( CSS 미 적용 모습 )

<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>

source/ch03/ex3-6.css

여기 보이는 CSS 를 적용해야만 사이트의 디자인이 완성 됨 .

HTML 5 기본 문서 ( CSS 적용 후 모습 )


HTML5 를 이용한 HTML 문서 구조 잡기

HTML 5 에 의한 문서 구조 HTML5 에 CS3 를 추가해서 디자인한 결과

HTML5 에서 새롭게 도입된 태그들을 추가해서 기본적인 문서 구조를 완성해 보도록 하겠습니다 .


HTML5 를 이용한 HTML 문서 구조 잡기<!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"> 사이드 메뉴 <ul> <li>Menu 1</li>… 중간 생략… <li>Menu 3</li> </ul> <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.htmlsource/ch03/ex3-9.css

반드시 예제 소스를 PC 에서 실행해서 결과를 확인해 보세요 .

그리고 예제 소스를 기반으로 직접 태그를 입력하여 실습하시기 바랍니다 .

IE9 이하의 브라우저에서는 HTML5 문서가 제대로 보이지 않습니다 . 윈도우 7 이 설치된 PC에서는 IE8 을 IE9 으로 업그레이드 해주시고 , 윈도우 XP 환경인 경우 파이어폭스 또는 구글 크롬 등의 브라우저를 이용해서 해당 소스를 실행해 주시기 바랍니다 .


HTML5 를 이용한 HTML 문서 구조 잡기지금까지 HTML5 를 사용해서 사이트의 구조를 잡는 법을 간단하게 살펴봤습니다 .HTML5 가 출현하면서 웹 문서의 구조에 대한 명확한 정의가 이루어지고 , HTML5이전에 문서의 구조를 잡을 때 쓰던 다양한 아이디 (클래스 ) 선택자의 이름을 하나의표준으로 만들어서 이전 버전의 웹 문서보다 HTML5 문서의 구조는 명확하고 간결해졌습니다 .(클래스 / 아이디 선택자는 나중에 배웁니다 )

또한 HTML5 에서는 표현을 위한 태그가 거의 사라졌기 때문에 HTML 태그만으로는 웹 문서의 디자인이 불가능합니다 . 반드시 CSS 를 통해서 디자인을 입혀야 하는것입니다 .

스타일을 옷이라고 생각한다면 , html 은 그 옷을 입고 있는 사람의 몸으로 비유할수 있습니다 . 몸은 바꿀 수 없지만 옷은 바꿀 수 있습니다 . 이렇게 몸을 제대로 만들어 놓은 상황에서 옷만 바꾸게 되면 사람이 다르게 보이는 것처럼 , 웹 표준에 의한문서들도 html 을 통해 제대로 된 구조를 갖추게 된다면 , CSS 를 통해서 얼마든지 디자인 변경이 가능한 것입니다 .

처음부터 다시 배우는 html5&css3

Documents