처음부터다시배우는 HTML5&CSS3: 실전웹표준사이트제작까지 3 부 실전웹표준사이트구축 에서는 1부와 2부에서배운내용을기반으로실제웹사이트를만드는방법을소개합니다. 기존책들과다르게실무에서사용하는방법을바탕으로한실제웹사이트제작기법을단계별로학습해볼수있습니다. 특히디렉토리나하부사이트구조는어떻게구성하는지, 실제웹페이지가만들어지는방법이그대로나오기때문에, 에서배운내용은향후실제웹사이트를만들때많은도움을받을수있습니다. 또한 HTML5와 CSS3가지원되지않는브라우저에서의호환성테스트부분이나기타여러문제에대한해결방법도다룹니다. HTML5와 CSS3는현재진행형이기때문에실무적으로바로적용하기엔다소무리가있을수있지만, 에서나오는호환성해결방법을사용하게되면, 여러분이시작하려는프로젝트도 HTML5 기반으로사이트를만들수있습니다. 이책의마지막부분인 에서 HTML5와 CSS3에관해여러분이원하는최대의결과을얻을수있길바랍니다. HTML5+CSS3
처음부터다시배우는 HTML5&CSS3: 실전웹표준사이트제작까지 10 장 HTML5 와 CSS3 로 웹표준사이트개발하기 에서는실제로 HTML5와 CSS3를이용해서사이트를개발해보겠습니다. 1부와 2부는이론적인내용이많습니다. HTML과 CSS를접하는분은반드시한번은읽어야하지만 HTML과 CSS를조금이라도아는분은바로 부터시작하고 1부와 2부를읽어도괜찮습니다. 에서는가장기본적이고많이개발되는웹사이트중하나인일반기업의대표적인웹사이트를만들어보겠습니다. 보통기업의웹사이트에는회사소개, 제품안내, 고객지원, 연락처등의정보가들어갑니다. 그리고최근의웹트렌드를보면일반적으로다양한형태의디자인레이아웃을갖추기보다는어떤정형화한레이아웃을많이사용하는것을볼수있습니다. HTML5+CSS3
Section 1 웹사이트레이아웃 웹사이트의레이아웃즉웹사이트의구조에관한내용은 1부 3장에서간단하게살펴보았습니다. 일반적으로웹사이트의레이아웃의패턴은 4가지종류로크게나눌수있으며, 세부적으로는 4개의패턴에기반을둔파생형이라고할수있습니다. 이 4가지종류중 [ 그림 10-1] 은기본적인프론트페이지의레이아웃입니다. [ 그림 10-2] 와 [ 그림 10-3] 의예처럼많은회사의프론트페이지에서볼수있는레이아웃입니다. [ 그림 10-2] 삼성그룹웹사이트 LOGO(C.I.) HEADER CONTENTS FOOTER [ 그림 10-1] 일반적인기업의프론트페이지레이아웃 [ 그림 10-3] 현대자동차웹사이트 276 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 277
또한서브페이지의구조도비슷합니다. [ 그림 10-4] 와같이전체적인레이아웃은 프론트페이지와유사한데컨텐츠부분에서서브메뉴가화면의왼쪽에배치되어있는모습을볼수있습니다. 웹사이트개발에서가장중요한요소중하나는의뢰받은웹사이트또는개발할웹사이트인경우비슷한업종이거나, 경쟁상대의회사가있다면먼저타웹사이트를벤치마킹하는것입니다. 다른기업의디자인은어떤지, 구조는어떻게이루어졌 LOGO(C.I.) SUBMENU HEADER CONTENTS 는지등종합적인내용을비교해보고그것을토대로의뢰받은회사의메인색Main color, 내용, 기타여러가지요소를웹사이트에담아낼수있어야하는것입니다. 참고로 에서만들어볼웹사이트의대상기업은가상으로설정된것입니다. 외국의웹솔루션을제공하는 FunWeb이라는회사의웹사이트를본격적으로만들어보겠습니다. [ 그림 10-4] 서브페이지레이아웃 FOOTER 여기서잠깐 웹사이트개발시디자이너와개발자는가장최신의브라우저를기준으로만든다음, 그후하위브라우저에서호환성테스트를해야합니다. 왜냐하면, 최신의브라우저일수록많은기능이지원되고최신의웹표준을반영하고있기때문입니다. 시간이지나면서사용자는최신의브라우저로업그레이드를합니다. 그때다시최신의브라우저에맞게코드를수정하는것보다는현재시점에서최신브라우저에맞는기술을사용하는것이이중작업을피할수있습니다. 이글을쓰는시점에서최신브라우저는 IE9, FF4, Safari5, 크롬11, 오페라10입니다. 이책은한국에서가장많이사용하는 IE9을기준으로작업하고, FF4와사파리5에서호환성테스트를하겠습니다. 그후 IE8부터 IE7까지하위브라우저호환성테스트를할것입니다. 단 IE6에서는기본적으로레이아웃이깨지지않을정도만수정보완하고세밀한부분에대한보완은생략하겠습니다. 그리고이번기회에완전히 IE6는퇴출되는것이필자의바람이자모든개발자의바람일것입니다. FunWeb이라는기업의웹사이트의프론트페이지와서브페이지도 [ 그림 10-1], [ 그림 10-4] 와동일한레이아웃입니다. 글로벌회사이기때문에영문기반으로제작하겠습니다. 한글화작업은결과물과글꼴부분만적용해보겠습니다. [ 그림 10-5] 삼성그룹웹사이트서브페이지 278 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 279
Section 2 메인페이지구축 다음의예는가상입니다. 여기서잠깐 필자는클라이언트에게사이트개발을의뢰를받은후클라이언트와의많은회의와디자이너가포토샵을이용해서제작한몇개의시안을프리젠테이션하는과정을거쳐통과된최종웹사이트의시안은 [ 그림 10-6] 과같다고가정하겠습니다. 이제이렇게만들어진시안을기반으로웹사이트를만들어가는과정을단계적으로설명하도록하겠습니다. 여기서포토샵을사용해서이미지를잘라내는과정은생략하도록하겠습니다. 먼저 실습에들어가기에앞서, 이책의예제들은 PHP 기반환경입니다. 그렇게때문에여러분의 PC에서실습해보는경우 WAMP 서버세팅이필요합니다 ( 부록B 참조 ). 특히예제중서브페이지들은 php의 include 문이사용되기때문에 WAMP 서버가세팅되지않으면, 웹페이지가제대로보이지않을수있습니다. 그렇기때문에사용자의 PC에 WAMP 서버를설치해야하며, 만약리눅스웹호스팅을이용해서예제를테스트할경우에는사용자의 PC에서 WAMP 서버세팅은필요없습니다. [ 그림 10-6] FunWeb 사이트프론트페이지 이렇게프론트페이지가구성되고서브페이지의디자인이나오면, 실제작업에들어가게됩니다. 실제작업에들어갈때포토샵을이용해서만들어진디자인파일을여러개의조각으로잘라내저장하게됩니다. FunWeb 사이트에서디자인요소는화면중앙에자리잡은메인이미지와하단의솔루션에있는아이콘그리고로고, 페이스북, 트위터이미지등몇가지되지않습니다. 그럼우선가장중요한요소는웹사이트의디렉토리를구성하는것입니다. 가장기본적으로각메인메뉴에맞는디렉토리를구성하는것이가장편리합니다. 디렉토리를구성할경우에는시안 ( 그림 10-6) 에서보이는메인메뉴의이름과동일하거나가장유사한이름으로지정하는것이좋습니다. 또한디렉토리이름에는공백이들어가선안됩니다. 280 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 281
/ -- 루트디렉토리 /images/ -- 메인이미지디렉토리 /company/ -- company 내용이들어가는디렉토리 /solutions/ -- solutions 내용이들어가는디렉토리 /center/ -- customer center 내용이들어가는디렉토리 /contact/ -- contact us 내용이들어가는디렉토리 /CSS/ -- CSS 파일이들어가는디렉토리 /script/ -- 자바스크립트등스크립트관련내용이들어가는디렉토리 여기서잠깐 안티알리아싱이란? 아래의그림을보면원형인두개의물체가있습니다. 화면왼쪽은안티알리아싱이적용된상태이고, 오른쪽은안티알리아싱이적용되지않은그림입니다. 화면왼쪽에있는구가더자연스러운모습인반면, 오른쪽의구는어딘지모르게좀거친느낌이납니다. 여기서는 7 개의기본디렉토리를직접만들어줍니다. 이그림을좀더확대해보면아래와같습니다. 이제웹사이트제작에필요한이미지를잘라내는작업에들어가보겠습니다. 먼저배경이미지를잘라내야합니다. 이사이트의배경은단일색인데, 하얀색배경과회색배경사이에그림자처리가되어있는것을알수있습니다. 이그림자부분을따로배경처리해야하는데, 그림자의투명도가 30% 정도되어있어, 배경은 PNG 파일로저장해야향후회색배경이다른배경으로바뀌더라도그림자부분을변경하지않아도됩니다. PNG 파일은 png24 포맷으로배경없이저장하게되면, 투명한부분이어느여타파일포맷과는비교할수없을정도로깨끗하게보입니다. 이전에는 GIF 파일을사용하여필요없는부분에투명도를지정했지만 GIF 파일인경우태생적으로 256 색상밖에지원하지않고안티알리아싱이적용되지않아복잡한모양의경우해상도에서 png 파일과비교할수없을정도로조악하게보입니다. [ 그림 10-7] 을보면화면의왼쪽은 GIF 파일이고오른쪽은 PNG 파일입니다. 하지만 PNG 파일은파일크기가 GIF 파일보다많은정보를담고있기때문에커질수밖에없습니다. 그래서복잡한이미지는 PNG 파일을, 간단한이미지는 GIF 파일을사용할것을권장합니다. 화면왼쪽에있는그림의구를이루고있는원형을자세히보면, 픽셀색에서차이가있는것을알수있습니다. 색이연하게되어있는부분이화면상에서좀더둥그런모습을보이게해주는역할을합니다. 반면화면오른쪽에있는구는픽셀과픽셀사이에어떠한다른색도없는것을볼수있습니다. 즉픽셀이뭉개지는것을막아주는게알리아싱이라하고픽셀의일부분을뭉개좀더부드럽게보이게하는기술을안티알리아싱이라고합니다. 잘라낸이미지파일에적당한이름을붙이고저장합니다. 폴더내부는 [ 그림 10-8] 과같습니다. [ 그림 10-7] PNG 와 GIF 파일비교 282 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 283
이제여기서몇가지아이디선택자를추가해보도록하겠습니다. blue.gif facebook.gif icon1.png icon2.png icon3.png img_back.gif 아이디선택자를추가하는이유는기본적인구조와더불어로고, 로그인부분이더추가되어있기때문에아이디선택자를추가하는것입니다. img_back.png logo.gif main_img.jpg shadow.png twitter.gif under_logo.gif v-line.png [ 그림 10-8] /images/ 폴더내부파일 폴더내부를보면단순한이미지파일은 GIF 파일로, 복잡한이미지파일은 PNG 파일그리고사이즈가큰이미지파일은 jpg 파일로저장한것을볼수있습니다. 이제는 index.html 파일과 default.css 파일을만들어본격적으로프론트페이지를만들어보도록하겠습니다. 1단계. header 구조잡기우선 HTML 문서내부에서어떻게구조를잡아야하는지에대한고민이있어야합니다. 현재만들려고하는웹사이트의가장간단한구조는다음과같은형태입니다. <!--헤더파일들어가는곳 --> <header> <nav> </nav> </header> <!--헤더파일들어가는곳 --> <!--메인콘텐츠들어가는곳 --> <article> </article> <!--메인콘텐츠들어가는곳 --> <!--푸터들어가는곳 --> <footer> </footer> <!--푸터들어가는곳 --> <header> <!--로고들어가는곳 --> <div id="logo"> <img src="images/logo.gif" width="265" height="62" alt="fun Web"> <!--로고들어가는곳 --> <nav> </nav> </header> <!--메인이미지들어가는곳 --> <div id="main_img"> <!--메인이미지들어가는곳 --> <article> </article> <footer> </footer> 로고가들어갈부분에 <div id= logo > 라는아이디선택자와메인이미지를넣어줄곳에 <div id= main_img > 라는아이디선택자를넣었습니다. HTML의기본틀이완성되었으면, 이제 CSS 파일을만들어서하나씩적용해보겠습니다. 먼저 default.css 파일을만들어 CSS 폴더에넣습니다. 그리고제일먼저 body 태그에속성을부여합니다. body { background-color: #898989; margin:0; padding:0; font-size: 0.75em; line-height: 1.2em; color: #333; 284 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 285
먼저해당웹사이트의백그라운드컬러를지정하고마진과패딩값을 0으로하여간격을없애주고글꼴의크기와문단사이간격그리고글꼴의색상을지정합니다. 이제웹페이지를중앙에배치할예정인데요. 아래코드는반드시기억해두고사용해보기바랍니다. 전세계웹페이지에서가장많이사용되는 CSS 코드입니다. 그리고 header 부분은포토샵으로만든레이아웃을이용해서높이를계산하면전체적으로 151픽셀의높이를지니고있습니다. [ 그림 10-9] 를보면포토샵에서 Rulers 와 Grid를이용해서측정한값이 151픽셀이라는것을알수있습니다. 포토샵에서 Rulers와 Grid를이용하면정확한픽셀값측정이가능합니다. #wrap { width:971px; /* 각웹페이지크기에맞게사이즈조정 */ text-align:left; margin: 0; margin-right: auto; margin-left: auto; 이코드는보통 wrap 또는 wrapper라는명칭을사용하는데, 말그대로전체콘텐츠를감싸서, 중앙에배치해주는역할을합니다. 먼저 width에서해당웹페이지의크기를지정해주고나머지부분은그냥가져다붙여도됩니다. 그냥외우거나해당코드를메모장등에입력했다가카피 & 페이스트, 즉복사후붙여넣기를사용하면됩니다. [ 그림 10-9] 포토샵에서 Rulers 와 Grid 를이용해서각요소의높이와길이측정 따라서해더는아래와같이지정합니다. header { height:151px; 결과는 [ 그림 10-10] 와같습니다. 굳이설명을하자면, 텍스트배치는왼쪽, 전체마진의값은 0, 오른쪽그리고왼쪽마진을자동으로주면해당아이디선택자로묶인부분은중앙으로배치됩니다. 그리고이제로고부분에값을줄차례입니다. 로고의배치가상단에서 60픽셀, 화면왼쪽에서 40픽셀정도위치에자리잡고있습니다. 그래서로고의전체크기는 265픽셀, 마진을상단 60픽셀, 왼쪽 40픽셀, 나머지는 0으로그리고화면상에서의배치는 float:left 해서왼쪽으로지정했습니다. #logo { float:left; width:265px; margin:60px 0 0 40px; source/ch10/pic10-10.html [ 그림 10-10] 백그라운드와로고만적용된상태 이제그림자백그라운드를적용해보겠습니다. 그림자백그라운드의경우에는 wrap 에적용되어야전체적인비율이맞습니다. 286 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 287
#wrap { width:971px; text-align:left; margin: 0; margin-right: auto; margin-left: auto; background-image: url(../images/shadow.png); background-repeat: repeat-y; min-height:780px; <article> </article> <footer> </footer> </body> </html> 백그라운드이미지를적용하고 y축으로반복적용하고 wrap의최소높이를 780픽셀로잡았습니다. 최소높이를 780픽셀로한이유는이사이트의경우최소기준을 1024 768 픽셀화면기준으로잡아서배경이처리되는기준높이를 768픽셀보다조금더크게해야하기때문입니다. 그럼여기있는 min-height를적용하지않으면어떻게될까요? 직접한번해보기바랍니다. HTML 파일의구조는다음과같습니다. [ 예제 10-1] 로고삽입및아이디선택자 wrap 을이용한화면구조중앙정렬 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>welcome to Fun Web</title> <link href="css/default.css" rel="stylesheet" type="text/css" > </head> <body> <div id="wrap"> <header> <div id="logo"><img src="images/logo.gif" width="265" height="62" alt="fun Web"> <nav> </nav> </header> <div id="main_img"> [ 그림 10-11] wrap 선택자에백그라운드이미지적용 source/ch10/pic10-11.html 이제메인메뉴를적용할차례입니다. 메인메뉴는 nav 태그내부에 <ul> <li>...</li> </ul> 을이용한리스트메뉴를사용하겠습니다. <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">company</a></li> <li><a href="#">solutions</a></li> 288 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 289
<li><a href="#">customer CENTER</a></li> <li><a href="#">contact US</a></li> </ul> </nav> 일단전체메인메뉴에더미링크인 # 을적용했습니다. 먼저 nav에속성을적용합니다. nav { width:600px; margin:50px 20px 0 0; float:right; 여기서잠깐 여기서더미링크란원래링크는 URL이와야하지만어떤페이지인지정해지지않을때단지 # 만으로링크를걸어주어, 마치링크가작동하는것과같은효과를줍니다. 더미링크를눌러도다른페이지로링크가되지않고바로그페이지가표시되기때문에가장안전한가상링크입니다. 전체메뉴의사이즈를 600 픽셀로설정하고마진값을상단 50 픽셀, 왼쪽 20 픽셀을 적용하고 float:right 를적용하여오른쪽으로배치합니다. 결과는 [ 그림 10-13] 와같 습니다. 메인메뉴를적용한결과는 [ 그림 10-12] 입니다. [ 그림 10-13] 메인메뉴배치후 source/ch10/pic10-13.html 이제이메인메뉴를원하는모양으로만들차례입니다. [ 그림 10-12] 메인메뉴적용후모습 source/ch10/pic10-12.html [ 그림 10-12] 는원래의도했던웹사이트디자인모양과는많은차이를보입니다. 이제 CSS를적용하여원하는모습의웹사이트를만들어보겠습니다. nav ul { list-style:none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font-weight:100; color: #333; 290 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 291
nav ul을통해리스트스타일을 none으로적용하여블렛이미지 ( 글머리기호 ) 를없애고원하는글꼴과글꼴사이즈를조정합니다. nav ul li { float:left; margin:0 5px; float:left를통해메뉴를세로에서가로로펼치고각메뉴사이에 5픽셀정도로간격을줍니다. [ 그림 10-13] 에서 nav ul li 부분에 float:left를적용하면, [ 그림 10-14] 처럼전체적으로메뉴가옆으로펼쳐지게됩니다. 하지만이그림에서는모든메뉴에밑줄이있고메뉴글꼴색도원하는색이아닙니다. nav a:hover { background-image: url(../images/blue.gif); background-repeat: repeat-x; background-position: bottom; nav a:hover에서백그라운드이미지를주었는데요. 이것은 nav a 태그가설정된부분에마우스오버가될경우즉마우스포인터가해당링크에올라가있는상태에서는해당백그라운드이미지가보여지게되며, 위치를밑부분으로 x축으로반복했습니다. 결과는 [ 그림 10-15] 를통해확인할수있습니다. 각메뉴에는 <a href= # >...</a> 를통해더미링크를걸었는데요. 여기서 a 태그를이용해다시효과를적용해보겠습니다. nav a { display:block; height:20px; padding:10px; text-decoration:none; color: #333; [ 그림 10-14] 세로로된메인메뉴펼친모습 source/ch10/pic10-14.html nav a 하위선택자를이용하여 a 태그에전체를블록으로감싸고높이는 20픽셀, 전체패딩값을 10픽셀을적용하고밑줄효과는없앴습니다. 그리고글꼴색은아주짙은회색을적용했습니다. 여기서마진이아니라패딩값을준이유는 a:hover를통해밑줄효과를주기위함입니다. 마진값을주게되면원하는만큼의밑줄효과를얻을수없습니다. 또한전체적으로패딩 10픽셀을주기때문에전체메뉴사이의간격도늘어나는효과를얻을수있습니다. 원하는정확한거리가유지될수있게조금씩패딩과마진값을조정하면정확하게원하는위치와간격을조절할수있습니다. [ 그림 10-15] nav a 와 nav a:hover 를적용한후결과화면 source/ch10/pic10-15.html 292 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 293
이제화면맨상단에있는 login Join 을추가해야합니다. login Join은다른요소보다화면상단에위치해있기때문에 HTML 코드에서 header에다음과같이 <div id= login > 이라는아이디선택자를추가하였습니다. #login a를통해밑줄을없애고기본글꼴의색상을정합니다. #login a:hover { color: #F90; <header> <div id="login"> <a href="#">login</a> <a href="#">join</a> <div class="clear"> <div id="logo"><img src="images/fun_logo.png" width="253" height="51" alt="fun Web"> <nav> <ul>... 중략... </header> 여기서잠깐 #login a:hover 를통해마우스오버시효과를적용해줍니다. 박스모델, 특히아이디선택자또는태그선택자를이용한레이아웃을잡을때박스모델간 의간섭이일어날경우다음의코드를이용해서해결해줄수있습니다..clear { clear:both; CSS에위와같이적용하고, HTML 문서내부에는 <div class= clear > 라고사용하면됩니다. 그리고 CSS 코드에는다음과같이설정했습니다. #login { float:right; margin:20px 64px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; word-spacing: 5px; login 아이디선택자의위치를오른쪽으로, 마진은상단 20픽셀과오른쪽으로 64픽셀을적용하고, 해당글꼴을적용한후단어와단어사이의간격에 5픽셀을주었습니다. #login a { text-decoration:none; color: #333; header 부분에대한모든작업이일단끝났습니다. [ 그림 10-16] 를보면결과를확인할수있습니다. 전체소스코드는다음과같습니다. [ 예제 10-2] 헤더부분까지전체 HTML 소스코드 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>welcome to Fun Web</title> <link href="css/default.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrap"> <header> <div id="login"> <a href="#">login</a> <a href="#">join</a> <div class="clear"> <div id="logo"><img src="images/logo.gif" width="265" height="62" alt="fun Web"> <nav> <ul> 294 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 295
<li><a href="#">home</a></li> <li><a href="#">company</a></li> <li><a href="#">solutions</a></li> <li><a href="#">customer CENTER</a></li> <li><a href="#">contact US</a></li> </ul> </nav> </header> [ 예제 10-3] 헤더부분까지전체 CSS 코드 body { background-color: #898989; margin:0; padding:0; font-size: 0.75em; line-height: 1.2em; color: #333; <div id="main_img"> <article> </article> <footer> </footer> </body> </html> #wrap { width:971px; text-align:left; margin: 0; margin-right: auto; margin-left: auto; background-image: url(../images/shadow.png); background-repeat: repeat-y; min-height:780px; [ 그림 10-16] header 부분완성 source/ch10/pic10-16.html header { height:151px; margin:0; padding:0;.clear { clear:both; #logo { float:left; width:265px; margin:40px 0 0 40px; #login { float:right; margin:20px 64px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; word-spacing: 5px; 296 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 297
#login a { text-decoration:none; color: #333; #login a:hover { color: #F90; nav { width:600px; margin:50px 20px 0 0; float:right; nav ul { list-style:none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font-weight:100; color: #333; nav ul li { float:left; margin:0 5px; nav a { display:block; height:20px; padding:10px; text-decoration:none; color: #333; nav a:hover { background-image: url(../images/blue.gif); background-repeat: repeat-x; background-position: bottom; 여기서잠깐 에서만드는웹사이트는글로벌회사의웹사이트이기때문에영문으로작업을하고있습니다. 하지만제목을제외한내용은 Lorem Ipsum으로시작하는이상한나라의글자가있습니다. 언뜻보면영어같지만, 여기사용되는단어들은라틴문자입니다. 현재사용하지도않는라틴어를왜웹사이트에적용을했을까요? Lorem Ipsum은외국에서 1500년대부터인쇄할때알파벳서체들의자간, 자평등을테스트할때사용되었습니다. 이문자들은현대까지살아남아내용이정해지지않은웹사이트의레이아웃을잡을때또는, 내용이정해지지않은상태에서디자인레이아웃이필요한인쇄용잡지등에서현재많이사용됩니다. 특히외국의웹사이트샘플이라든지, 책등에서예제로만드는웹사이트는거의대부분이 Lorem Ipsum을사용해서웹사이트를꾸미게됩니다. 이책에서도디자인적인부분이나기타웹사이트의레이아웃을잡는용도로 Lorem Ipsum을사용합니다. 특히 Lorem Ipsum은원하는만큼의문장을만들어주는사이트도있어, 최초의디자인레이아웃을잡을때유용한용도로사용할수있습니다. [ 그림 10-17] Lorem Ipsum 안내및샘플문장을얻을수있는 http://www.lipsum.com/ 298 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 299
2단계. 메인이미지레이아웃디자인작업메인이미지와 article 작업에들어가기에앞서이사이트의디자인적인특징을하나확인하고작업에들어가도록하겠습니다. 정확하게 img_back.png 파일의사이즈와같이 width 와 height 값을지정합니다. [ 그림 10-18] 를보면메인이미지를둘러싼각테두리에효과를주어마치입체적인느낌이드는데요. 이런효과를주기위해선메인이미지를어떻게처리해야할까요? [ 그림 10-18] 메인이미지배경처리 두가지방법이있습니다. 메인이미지자체에이런입체감이있는효과를주든지, 아니면위와같은입체감이있는부분만따로분리하여백그라운드로처리하고이미지는이미지대로따로배치하는방법이있습니다. 여기서는후자의방식을따르도록하겠습니다. 메인이미지와백그라운드이미지를따로분리해서작업하도록하겠습니다. 왜냐하면, 이메인이미지가전체웹사이트의디자인중 40% 이상의비중을차지하기때문에, 여기에플래시애니메이션을넣든지, 아니면 jquery를이용한스크립트애니메이션을추가하게되면그효과는배가될수있기때문입니다. 제일먼저백그라운드를지정해줘야합니다. CSS에아래와같은코드를적용합니다. [ 그림 10-19] 제대로위치를잡은 img_back.png 파일 source/ch10/pic10-19.html 이제이곳에그림을배치합니다. HTML 코드내부에아래와같이추가해줍니다. <div class="clear"> <div id="main_img"> <img src="images/main_img.jpg" width="971" height="282"> #main_img { width:971px; height:308px; background-image: url(../images/img_back.png); background-repeat: no-repeat; background-position: center top; 결과는 [ 그림 10-20] 과같습니다. 300 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 301
[ 그림 10-20] 메인이미지추가 source/ch10/pic10-20.html [ 그림 10-21] 메인이미지위치수정 source/ch10/pic10-21.html 하지만여기서보면메인이미지의위치가백그라운드와맞질않습니다. 그래서다음의코드를 CSS에삽입하여위치를정확하게잡아줍니다. #main_img img { margin:9px 0 0 0; [ 그림 10-21] 을보면정확하게원래의도한디자인대로모든요소가맞춰져있는것을확인할수있습니다. 여기서 nav 태그선택자에아이디선택자를추가해주도록하겠습니다. 왜냐하면, 현재헤더부분에단독으로사용하는것은상관없는데, 만약새로운서브메뉴에다시 nav 태그를사용하게되면두개의선택자가충돌하게되기때문입니다. 이런불상사를미연에방지하고자, <nav id= top_menu > 라고지정합니다. 그렇다면 CSS에는어떤변화를줘야할까요? CSS에도종속선택자를적용해줘야합니다. (2부에서종속선택자라함은태그선택자와연계된아이디또는클래스선택자를종속선택자라고합니다. nav id= top_menu 라고지정되어있어태그선택자 nav 와연계된 top_menu를합친 nav#top_menu를종속선택자라고합니다.) 302 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 303
nav#top_menu { nav#top_menu ul { nav#top_menu ul li { nav#top_menu a { nav#top_menu a:hover { 이렇게적용하면헤더에위치한메뉴들은 #top_menu라는종속아이디선택자로지정되었기때문에다른선택자와충돌이일어나지않습니다. 3단계. article( 본문 ) #solution 작업이제 article 즉본문을작업할차례입니다. 여기서는처음부터 article에종속아이디선택자를부여하고시작하겠습니다. 프론트페이지에나오는 article은 <article id= front > 라고지정하겠습니다. [ 그림 10-22] 에서보면실질적으로 artcle에해당하는부분을알수있습니다. [ 그림 10-22] article 에해당하는부분 ( 테두리영역 ) 그렇다면 article은상단과하단두개의큰부분으로나뉘고하단부분에는좌, 우로다시나뉘는것을알수있습니다. 그러면상단부분부터처리하는데, 상단부분은또하나의아이디선택자로묶어야합니다. 여기서는솔루션들이있는곳이기때문에 #solution이라고 CSS에정의하고 HTML 내부에는 <div id= solution > 으로지정하겠습니다. 그리고각각의내용을따로아이디선택자로지정하겠습니다. 솔루션의이름과동일하게 #hosting, #security, #payment로지정하여 HTML 코드에삽입하고각각의내용들은 <h3>...</h3> <p>...</p> 을이용하여지정합니다. 304 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 305
그렇게되면 article 상단에있는 #solution에해당하는 HTML 코드는다음과같습니다. <article id="front"> <div id="solution"> <div id="hosting"> <h3>web Hosting Solution</h3> <p>lorem Ut vel est </p> <div id="security"> <h3>web Security Solution</h3> <p>lorem Ut vel est </p> <div id="payment"> <h3>web payment Solution</h3> <p>lorem Ut vel est </p> </article> artlce#front라는종속선택자를이용하여전체의마진을설정하여정확한위치를잡습니다. 그후 #solution에테두리값을설정하고배경색을지정하고, 넓이와높이를지정한후 CSS3의속성인 border-radius 값을지정하면전체 #solution의모양이갖춰집니다. 또한내부에들어가는아이디선택자를하나의그룹선택자로묶어서속성을부여하는데, 이속성은공통된속성만적용합니다. 여기에서 float:left를적용했는데, 이 float:left를적용하지않게되면, <div> 속성때문에전체블록이하나씩밑으로내려가버립니다. [ 그림 10-23] 을확인해보면 float:left를지정하지않을때결과를알수있습니다. 이렇게지정한후 CSS 에서가장기본적인레이아웃을잡습니다. article#front { margin:5px 0 5px 0px; #solution { border:solid 1px #FFFFFF; border-radius:10px; width:910px; min-height:150px; background: #ebebeb; padding:10px; #hosting, #security, #payment { width:30%; float:left; padding:10px; [ 그림 10-23] float:left 를지정하지않은경우 float 값에따라박스들이이동하는방법이다르기때문에, 여러분이직접 float의방향을지정해보는것도하나의연습이될수있습니다. 지금까지결과는 [ 그림 10-24] 을통해서확인할수있습니다. 하지만이모습은원래의도했던모습과는아주많이다르다는것을알수있습니다. 원래의도한디자인은각각의솔루션내부에아이콘도설정되어있고, <h3> 및 <p> 의글꼴모양도다릅니다. 그럼이부분에대해서보다구체적으로 CSS를적용해줘야합니다. 306 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 307
그리고변환한파일들은 images 폴더에 ttf 파일과함께넣었습니다. 그리고 CSS 내 부에다음과같이정의합니다. @font-face { font-family:"seo"; src:url("../images/segoeui.eot"); src:local(" "), url("../images/segoeui.woff") format("woff"), url("../images/segoeui.ttf") format("truetype"); font-family 이름은간단하게만드는것이좋습니다. 여기서는간단하게 seo 라고 만들고해당포맷을지정해줍니다. 그리고나서 h3 와 p 부분에적용합니다. [ 그림 10-24] #solution 기초단계 source/ch10/pic10-24.html 먼저 h터지정해줍니다. 여기서디자이너가의도한글꼴은 Segoeui라는글꼴을사용했는데, 이글꼴은기본글꼴모음이아닙니다. 그렇다면이글꼴이현재웹페이지에서많이사용되었다고하면 @font-face를통해서사용할것이고만약이부분에만사용되었다면, 이미지로처리하는것이더좋습니다. 이사이트를디자인한디자이너에게물어봤더니많이사용된다고합니다. #hosting h3, #security h3, #payment h3{ font-family: seo; font-size: 14px; font-weight:600; color: #333; #hosting p, #security p, #payment p{ font-family: seo; font-size: 12px; color: #333; 이렇게적용하면원래디자인한의도와거의동일하게디자인되어있는것을알수있습니다. [ 그림 10-25] 를보면확실한차이점을알수있습니다. <h3> 부분뿐만아니라 <p> 부분에도사용되었다고하고많은부분에해당글꼴을이용하여디자인을한다고합니다. 이렇게많이사용되었다면 font-face를이용해서처리하는것이좋습니다. 이글꼴을 2부에서설명했던프로그램을이용하여 eot 파일과 woff 파일로변환했습니다. 308 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 309
이럴경우에는 <h3> 과 <p> 의마진값을이용해서위치를이동해줍니다. font-face 적용전 h3 와 p 부분글꼴모양 [ 그림 10-26] 백그라운드에아이콘배열 font-face 적용후 h3와 p 부분글꼴모양 [ 그림 10-25] font-face 적용전후글꼴모양비교 이제여기에각각의솔루션에해당하는아이콘을배치할예정입니다. 각각의솔루션에배치될아이콘들은백그라운드이미지로처리하겠습니다. 여기에는제목과내용이있어, 이미지가안보이더라도무슨내용인지파악되기때문입니다. CSS 내부에아래와같이다른아이디선택자 #security, #payment에도값을지정해줍니다. #hosting h3, #security h3, #payment h3{ margin:0 0 10px 80px ; #hosting p, #security p, #payment p{ margin:0 0 0 80px; h3에는 p와의간격을위해하단에 10픽셀의여백을주었으며, 왼쪽으로 80픽셀을이동했습니다. 이렇게이동된결과는 [ 그림 10-27] 에서확인할수있습니다. #hosting { background-image: url(../images/icon1.png); background-repeat: no-repeat; background-position: left 15px; [ 그림 10-27] <h3> 와 <p> 에마진값을적용하여아이콘재배치 여기에서는 background-position의값이 left 15px로지정되어있는데이것은위치를말하는것으로화면왼쪽위에서 15픽셀밑으로위치하게끔처리하는것입니다. 저는초기에 background-position:left top; 을지정했는데아이콘이너무위쪽에위치해픽셀값을넣어위치를정확하게조정했습니다. 결과는 [ 그림 10-26] 에서볼수있는데, 아이콘과문장이겹치는문제가발생했습니다. 하지만여기서각각의내용들이조금은왼쪽으로치우쳐있고너무붙어있어보이는문제점이있습니다. 여기서각각의아이디선택자를 22픽셀정도움직이고, 박스의값도픽셀값으로변환하여정확한위치를조정하도록하겠습니다. 우선 % 로단위를사용하게되면계산이복잡해집니다. 왜냐하면, 마진과패딩을픽셀값을이용하여움직이게되면, % 란단위를 1픽셀단위로값을설정할수없기때문입니다. 실제로사용하다보면그런경우가나옵니다. 그래서처음에큰틀을잡을때는 % 를사용하다마무리단계에서픽셀로바꾸는경우가많습니다. 그것은미세한값을조정하기위함입니다. 310 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 311
여기서잠깐 박스모델을설정하다보면각각의박스가어디서어디까지인지알수가없는경우가많습니다. 예를들어 [ 그림 10-28] 처럼미세한값의변화로레이아웃이틀어지는경우가있습니다. 박스의값이조금이라도커지면하나의박스는다음칸으로내려와버립니다. 각박스의크기를 width:262px로적용했는데박스가 [ 그림 10-28] 과같이내려오는경우가있습니다. 이렇게값의크기또는위치가어디에있고각각의마진과패딩의여유분은어느정도있는지확인해볼때, 각박스모델에 border: solid 1px #ccc; 을입력해서레이아웃을살펴보고위치를정해주는것이좋습니다. 그렇게되면각박스모델의정확한위치와마진패딩값을눈으로확인하고미세하게값을조정할수있기때문입니다. 물론작업이끝나면 border:solid 1px #ccc; 는삭제해야합니다. 단여기서주의할것은 border: 1px의경우전체레이아웃에서상하좌우로 1픽셀씩더해져있기때문에최종적으로박스의크기를감안한다면 border:1px 부분을디자인레이아웃을완성한후에는해당블록부분에상하또는좌우로 1픽셀씩더해줘야합니다. [ 그림 10-30] border-right 적용해준결과화면 4단계. Security News와 News & Notice 디자인레이아웃잡기이제 #solution 하단에위치한 Security News에대한디자인과 News & Notice 부분에대한디자인레이아웃작업을하겠습니다. 이전에항상박스모델과박스모델끼리서로를분리시킬때 <div class= clear > </ div> 를적용해준다고했습니다. 마찬가지로 3단계에서 #solution의마지막에 <div clss= clear > 를적용하여서로분리시켜줍니다. [ 그림 10-28] 박스모델 width 값설정오류 그리고 Security News 부분은 #sec_news로 News & Notice는 #news_notice로아이디선택자를이용하여정의해줍니다. 그리고 HTML 문서내부에도아래와같이정의합니다. <div id="sec_news"> [ 그림 10-29] border: solid 1px #ccc; 을이용한박스모델레이아웃확인 <div id="news_notice"> 이제 #solution 부분의마지막으로각각의아이디선택자를구분할구분선만적용하게되면 #solution 부분은작업이마무리됩니다. 구분선은단순하게 border를통해처리할수있습니다. #hosting과 #security에 border-right: 1px solid #ccc; 를적용해주면끝납니다. [ 그림 10-30] 은결과값입니다. 그리고각각의아이디선택자는아래처럼대략적인구조를잡습니다. #sec_news, #news_notice { float:left; width:420px; margin:15px 0 0 20px; 312 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 313
HTML 코드내부에서는 Security News 부분은 <dl> <dt>...</dt> <dd>...</dd> </ dl> 을이용한정의리스트로 HTML 코드를작성하고 News & Notice 부분은 table 태그를이용해서대략적인레이아웃을잡습니다. </table> <!-- 여기까지 News & Notice 부분 - - > 여기서잠깐 정의리스트태그는많이사용되지않는 HTML 태그중하나입니다. 구조는다음과같습니다. <dl> <dt> </dt> <dd> </dd> </dl> 정의리스트는제목과설명이조합되어있는문단에많이사용하게되는데요. 가장대표적인예가현재의 Security News와같은경우입니다. 제목이있고설명이있으며, 그런패턴이반복적으로일어나는경우사용하면편리합니다. 사용법이리스트태그인 <ul> <li> </li> </ul> 과유사한데, 정의리스트는 <dt> 에는제목이, <dd> 에는설명부분이들어가는것이차이점입니다. HTML 문서내부에는다음과같이정의합니다. <div id="sec_news"> <h3>security News</h3> <dl> <dt>vivamus id ligula </dt> <dd>proin quis ante </dd> <dt>vivamus id ligula </dt> <dd>proin quis ante </dd> </dl> <!--여기까지 Security News --> <div id="news_notice"> <h3>news & Notice</h3> <table> <tr> <td>vivamus </th> <td>2011.07.31</th> </tr>. [ 그림 10-31] HTML 코드내부에 Security News 및 News & Notice 적용결과 source/ch10/pic10-31.html [ 그림 10-31] 을보면현재까지의작업결과물을확인할수있습니다. 의도했던디자인과는차이가있지만대략적인레이아웃은일치하는것을알수있습니다. 이제 CSS를통해서나머지디자인을적용해보겠습니다. 먼저 #sec_news 및 #news_notice 의 h3 부분에대한디자인을적용해보겠습니다. 사용한글꼴을보니 segoeui를사용했습니다. 그리고 italic 스타일을적용했다는것을알 314 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 315
수있습니다. 그리고글자주위에장식용테두리가있는것을알수있는데, 이부분은 [ 그림 10-32] 에서와같은이미지를이용하여백그라운드로처리하면됩니다. [ 그림 10-32] h3 백그라운드이미지 CSS 코드는다음과같습니다. #sec_news h3, #news_notice h3 { font-family:seo; font-size: 14px; font-style: italic; font-weight: normal; width:420px; height:24px; background-image: url(../images/h3_back.jpg); background-repeat: no-repeat; padding:5px 0 0 22px; CSS가적용된결과는 [ 그림 10-33] 입니다. #sec_news.orange { color:#f26522; #news_notice.brown { color:#827b00; HTML에는다음과같이지정합니다. <h3><span class="orange">security</span> News</h3> <h3 class="brown">news & Notice</h3> 여기서보시면 <span> 태그가언제사용되는지확실히알수있겠죠? <span> 은인라인부분에 <div> 블록부분에사용되는태그입니다. 이제정의리스트부분 dl에속성을적용하여원하는디자인을잡아줍니다. 여기서 dl 값을조정하여정확한위치를잡습니다. 위치를잡기위해서 dl 부분에 marginleft:6px을적용했습니다. 여기서 dt 부분이다른요소보다글꼴크기가크고색상도빨간색입니다. 또한글꼴도 Times 계열인것을파악할수있습니다. 그리고 dd 요소와도약간의간격이있습니다. 모든것을종합적으로파악하여 CSS에속성을적용해줍니다. [ 그림 10-33] h3 백그라운드이미지및속성적용 이제 h3 의글꼴에색을각자지정해주고 h3 부분을마무리하면됩니다. CSS 에는다음과같이지정합니다. #sec_news dl { margin-left:6px; #sec_news dt { font-family: "Times New Roman", Times, serif; font-size: 16px; margin:5px 0; color: #F00; 316 10장실전웹표준사이트구축 HTML5와 CSS3로웹표준사이트개발하기 317