4 장쇼핑몰사이트제작 에서는 HTML5와 CSS3를이용하여쇼핑몰사이트를제작해보겠습니다. 2장과 3장에서는 @font-face의활용을높이기위해영문으로사이트를제작했습니다. 하지만 에서는한글로된사이트를제작할예정입니다. 영문폰트를무료로제공하는사이트는많이존재하지만, 한글폰트는대부분상용입니다. 따라서함부로폰트를웹용으로변환하여사용하는것은저작권에위배될수도있습니다. 다행히요즘에는네이버같은포털사이트에서무료로폰트를배포하고있으며, 웹용으로변환하여사용하는것또한자유로워이전보단폰트의선택폭이넓습니다. 특히 에서는 2장과 3장에서는다루지않았던기법을많이접할수있습니다. 많은사이트에서사용되는아주유용한기법이니꼭손에익혀두기바랍니다. 사이트가조금씩커지면 CSS는점점더복잡해집니다. 조금만복잡해져도이해하기어렵습니다. 반드시처음부터하나씩 CSS를직접입력하면서학습하길바랍니다. 에서는 PC에서기본적으로제공되는 돋움 을기본으로네이버에서배포하는 나눔고딕 을활용해서사이트를제작할예정입니다. 쇼핑몰사이트의기본구조는상당히간단하지만, 의외로배너라든지기타여러가지만들어야할것이많습니다. 하지만앞서얘기했듯이기본구조는간단하기때문에, 여러쇼핑몰을벤치마킹해보면사이트의기본구조에대해서쉽게파악할수있습니다. 사용할예제또한현재많은쇼핑몰이채택하고있는구조를기본으로간단하게만들어보도록하겠습니다. 간단하다고는하지만여러가지신경쓸곳이많기때문에소스코드를잘파악하면서학습해주기바랍니다.
➌ Section 1 ➊ ➋ ➍ 쇼핑몰사이트디자인 ➐ ➎ ➏ 쇼핑몰사이트는아주다양합니다. 의류전문, 유아용품전문, 디지털가전, 컴퓨 터, 카메라, 또는오픈마켓과같은대형쇼핑몰까지많은종류의사이트들이존재 합니다. 하지만쇼핑몰사이트들의구조를보면거의대부분비슷한구조라는것을알수있습니다. 먼저옥션사이트를한번보겠습니다. [ 그림 4.1-1] 을보면다음과같은구조로되어있습니다. ➊ 로고 ➋ 검색 ➌ 로그인및결재, 장바구니관련메뉴 ➍ 메인메뉴 ➎ 이벤트및중요한상품에대한배치 ➏ 배너내용 ➐ 메인메뉴외추천코너항목 [ 그림 4.1-1] 옥션사이트레이아웃분석 그리고화면에는나타나지않지만, 카테고리별로상품이나열되어있는것을알수있습니다. 얼핏보면많은이미지가있어복잡하게보일수있지만, 각파트별로구분해서사이트를살펴보면의외로 UI가간단하다는것을알수있습니다. 여기서쇼핑몰사이트의 UI는최대한단순해야합니다. 또한직관적이어야합니다. 왜냐하면, 쇼핑몰을사용하는고객이사이트를이용할때복잡하다고느끼는순간그사이트는망하는것입니다. 사이트를방문하는고객이원하는것이무엇인지 ( 상품 ) 를정확하게노출해야하며, 해당상품에대한정확한정보와가격을알려주고구입이끝날때까지전과정에서 뒤로가기 버튼을누르거나, 구입과정중다른페이지를방문하더라도해당상품을구매할수있어야만합니다. 메뉴또한직관적이며, 카테고리별로잘정돈되어있어야하며, 검색기능또한강력해야합니다. 254 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 255
이제여성의류쇼핑몰사이트를한번살펴보겠습니다. 이외에 ➍ 번항목밑으로는상품들이나열되어있습니다. 현재그림에서나오진않 았지만화면상단에는검색이존재합니다. ➌ ➍ ➋ ➊ 여기서잠깐 웹사이트개발시전문인력이없는상태에서사이트개발하는것은많은노력과시간이필요합니다. 하지만웹사이트템플릿제공사이트를이용하면손쉽게사이트개발이가능합니다. 가장대표적인곳이 cafe24.com입니다. 적은비용으로이미만들어져있는구조에회사로고와색을변경하거나, 전문디자이너가만들어놓은템플릿을구입해서사이트에적용하면됩니다. 하지만전문가가아닌경우템플릿디자이너가만들어놓은구조를변경하기힘들고, 비슷한모양을가진사이트들이많아서, 사용자들에게어필하기에는조금부족한경우도많습니다. 이제마지막으로컴퓨터관련쇼핑몰중유명한 컴퓨존 사이트를살펴보겠습니다. ➎ ➊ ➋ ➌ ➍ ➎ [ 그림 4.1-2] 써니쇼핑몰사이트레이아웃분석 [ 그림 4.1-2] 는소위잘나가는여성의류쇼핑몰중하나인 써니 라는사이트입니다 다. 여성의류및남성의류쇼핑몰의레이아웃은전부이런방식입니다. 거의템플릿 베이스로제작된것인데요. 이런방식의쇼핑몰을만들기위해선이책이필요없습 니다. 하지만이런템플릿을만들려면, 이책이필요하겠지요. ➊ 사이트의로고 ➋ 회원로그인및장바구니결제관련메뉴 ➏ ➌ 메인메뉴 ➍ 슬라이드이미지방식의인기상품과이벤트의롤링 ➎ 사이트배너 [ 그림 4.1-3] 컴퓨존쇼핑몰사이트레이아웃분석 256 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 257
[ 그림 4.1-3] 을보면컴퓨존사이트의주요구성부분을알수있는데, 옥션 과 써니 두개의사이트와거의비슷한구성임을알수있습니다. ➊번항목은사이트의로고가위치하고 ➋번은검색이들어가있습니다. ➌번은로그인및장바구니항목이 ➍번은사이트의메인메뉴가위치해있습니다. ➎번항목은이벤트관련내용들이슬라이드이미지로움직이며, ➏번은배너가들어갑니다. 다른사이트와마찬가지로 ➎번항목밑으로는각카테고리별로상품이나열되어있습니다. [ 그림 4.1-1] 부터 [ 그림 4.1-3] 을보면쇼핑몰사이트의구조와형태가유사한점을발견할수있습니다. 쇼핑몰사이트에는기본적으로많은상품들이나열되어있기때문에다른사이트보다는복잡하게보이지만, 구조는의외로간단한것을알수있습니다. 전체적으로깔끔하면서, 첫화면에서보여줘야하는것들은전부보여주는레이아웃이라고할수있습니다. 현재의레이아웃을응용하게되면다양한방식으로레이아웃을잡을수있습니다. 특히전체적으로구조가잡힌후 CSS만으로여러응용레이아웃을만들수있습니다. 예를들어현재는메뉴부분이왼쪽에상하방식으로배열되어있지만, 옥션과같이가로로배치할수도있습니다. HTML 코드몇개의라인을변경하거나, 거의변경하지않고, CSS만으로그런배치로리뉴얼할수있습니다. 4.2장에서는만들어진디자인레이아웃을이용하여사이트의헤더부터작업해보도록하겠습니다. 이제 에서다룰쇼핑몰의전체적인레이아웃구조를한번보겠습니다. ➊ 쇼핑몰의이름은가상으로 Senop이라고정했습니다. ➋ 사이트에서주로취급하는물품은도서및디지털기기관련제품들입니다. ➌ 디자인은최대한간결하면서, 제품을부각시킬수있는레이아웃을추구합니다. ➍ 실제사용되는사이트가아니라예제를위해서만드는사이트이기때문에배너의경우애니메이션 ( 주로플래시로만들어집니다 ) 을전혀사용하지않겠습니다. 또한여기서사용되는이미지에대한저작권은각각의회사에있습니다 ( 로드북, 니콘이미징코리아, 캐논코리아, 삼성전자, 애플, 아수스, HP, LG 전자 ). ➎ [ 그림 4.1-4] 를보면 Senop 쇼핑몰사이트를볼수있습니다. 전체적인레이아웃은일반쇼핑몰사이트와유사한방식으로디자인되었습니다. ➏ 우선헤더부분은사이트의로고와검색그리고로그인등의메뉴가있습니다. ➐ 메인메뉴는왼쪽에배치되어있으며, 메뉴아래쪽으로배너및공지사항이배치되어있습니다. 메인콘텐츠인 article은상단에가장많이팔리는제품에대한슬라이드배너가위치해있으며, 바로밑으로베스트셀러그리고 DSLR/ LENS군순으로배치되어있습니다. 그리고그아래로맥북프로배너및노트북신상품을카메라와같은방식으로배치했습니다. ➑ 마지막으로푸터부분은일반적인푸터와유사한방식으로레이아웃을잡았습니다. [ 그림 4.1-4] 4 장에서제작하게될쇼핑몰사이트레이아웃 258 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 259
4.2장에들어가기앞서먼저사이트제작을위한기본적인디렉토리를만들도록하겠습니다. 도마찬가지로 wamp 서버를이용해서사이트를제작할예정입니다. 따라서 C\wamp\www\senop이라는디렉토리를먼저만듭니다. senop 디렉토리내부에는 imgs, scripts 그리고 css란서브디렉토리또한만들어둡니다. 그리고 imgs 디렉토리내부에 products와 banners 디렉토리또한만들어둡니다. imgs 디렉토리에는사이트와관련된이미지만넣어두고서브디렉토리에는배너이미지그리고상품이미지를관리하기위해따로디렉토리를만들어둔것입니다. 이제 index.php 파일을만들고, 가장기본적인 HTML 문서구조를잡습니다. 가장기본적인문서구조내부에 HTML5의문서구조를나타내주는 header, nav, article, footer 태그를제일먼저입력합니다. <!DOCTYPE HTML> <html> <head> <meta charset= utf-8 > <title>senop? shopping mall</title></head> <body> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </body> <html> 그리고 main.css란파일을 css 폴더내부에만듭니다. 메모장으로만들어도상관없습니다. <link href="css/main.css" rel="stylesheet" type="text/css"> 그리고 main.css에가장기본적인요소를입력하게되면쇼핑몰을만들기위한기본적인준비는끝납니다. 이제 main.css에들어가는기본적인요소를살펴보겠습니다. 우선 *( 전체선택자 ) 를이용하여아래와같이속성을부여합니다. * {margin:0;padding:0; vertical-align:middle; 그리고 body 태그선택자에도속성을부여합니다. body { margin:0; padding:0; font-family: "Dotum", Arial,serif; font-size: 1em; color: #666; background-color: #FFF; 그리고 img 태그선택자에테두리방지를위한 img {border:none; 그리고링크를위한 anchor 태그인 a 그리고 a:hover에도속성을미리정합니다. img {border:none; a {text-decoration: none;color: #666; a:hover {color: #F60;text-decoration: none; 마지막으로.clear{clear:both; 까지 main.css에입력이되면기본적인준비는마쳤습니다. 그냥빈문서만만들어주고 index.php 파일 <head> 태그내부에아래와같이입력합니다. 260 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 261
여기서잠깐 여기서왜전체선택자에 vertical-align:middle 을적용했는지살펴보겠습니다. vertical-align이란것은말그대로수직정렬을의미합니다. 즉수직으로 middle( 중간 ) 정렬하는것을말합니다. 특히이런문제는 form 태그가들어가있는부분에잘발생합니다. example/chapter4/test.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>verticla-align:middle </title> <style type="text/css"> * { margin:0; padding:0; body {font-family: Arial, Helvetica, sans-serif;padding:30px; form.input1 { border:2px #FF3300 solid; width:200px; height:20px </style> </head> <body> <form> 검색 : < input name="" type="text" class="input1"> <input type="image" src="btn.gif" value=" 검색 "> </form> </body> </html> [ 그림 4.1-6] vertical-align:middle 적용후검색부분모습 위와같은방식으로검색부분이정의되어있는경우결과물은 [ 그림 4.1-5] 와같습니다. [ 그림 4.1-5] vertical-align:middle 적용전검색부분모습 검색과검색창그리고검색버튼부분은전부인라인태그들입니다. 여기서검색버튼은이미지로만들었습니다. 하지만 [ 그림 4.1-5] 에서보는바와같이한줄 (inline) 에나타나야하는요소들이정확하게한줄에나타나지않게됩니다. 이경우전체선택자에 vertical-align:middle을추가함으로써문제를해결할수있습니다. * { margin:0; padding:0; vertical-align:middle; 262 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 263
Section 2 사이트헤더부분제작하기 <div id="head_link"> <ul> <li><a href="#"> 로그인 </a></li> <li><a href="#"> 회원가입 </a></li> 중간생략 </ul> <div id="search"> <!-- 검색에는 form 요소가들어감 --> <form> <input name="input" type="text"> <input name="search" type="button" value=" 검색 > </form> </header> 4.2 장에서는사이트의헤더부분을제작합니다. 헤더부분은간단한구조이기때문 에어렵지않습니다. 이제사이트헤더부분제작에들어가기앞서, 현재만들사이트의헤더부분의디자인만따로떼어내서다시한번살펴보겠습니다. 사이트로고 <div id= logo > 로그인및기타메뉴 <div id= head_link > HTML에적용된선택자들은 main.css에도적용해줘야합니다. 우선 main.css에서전체선택자와 body 태그선택자의마진과패딩값이 0으로정의되어있어 header 태그선택자의경우상단으로약 20픽셀정도여백을주겠습니다. 사이트를만들때중요한요소중하나가여백입니다. [ 그림 4.2-1] 헤더부분레이아웃구성 검색 <div id= search > header { margin-top:20px; [ 그림 4.2-1] 을보면헤더부분에들어가는요소들을각각따로아이디선택자를이용해서구분했습니다. 로고는 #logo, 로그인관련메뉴는 #head_link 그리고검색은 #search라고정의했습니다. 이제이렇게정의된아이디선택자들을 HTML 문서에적용해야합니다. <header> <div id="logo"> < img src="imgs/senop_logo.png" alt="senop" width="176" height="67"> #logo인경우왼쪽에위치해있기때문에 float:left를이용해서왼쪽으로배치합니다. 그리고왼쪽으로 10픽셀의여백을줍니다. header #logo { margin-left:10px; float:left; 나머지 #head_link와 #search에는 float:right를부여합니다. 264 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 265
header #head_link { float:right; 브라우저의폭을줄이면우리가원하는모습이나타나고있습니다. 하지만브라우저의폭을더줄이면 [ 그림 4.2-4] 와같은모습이나타납니다. 이런결과는만들려고하는모습과는많은차이를보입니다. #head_link 부분에는 <ul> 태그를이용해서메뉴링크를만들었습니다. 따라서다음과같은속성을부여합니다. header #head_link ul { list-style:none; /* 리스트스타일제거 */ header #head_link li { float:left; /* 정렬을왼쪽부터해줌으로써순서결정 */ padding:0 8px; /* 패딩값을상하 0 좌우 8픽셀적용 */ border-right:1px solid #999; /* 각메뉴사이에구분선적용 */ [ 그림 4.2-3] 브라우저의폭 (width) 을줄였을때사이트의모습 이제 #search( 검색부분 ) 에도값을적용합니다. header #search { margin:0; /* 마진 0 */ padding:0; /* 패딩 0 */ float:right; /* 오른쪽정렬 */ [ 그림 4.2-4] 브라우저의폭 (width) 을더욱줄였을때사이트의모습 먼저 [ 그림 4.2-2] 와같은모습을방지하기위해서 index.php 내부에 <div id= head_link >... 와 <div id= search >... 를구분해주기위해 <div class= clear > 을중간에삽입합니다. <div id="head_link"> <div class="clear"> <div id="search"> [ 그림 4.2-2] #logo 와 #head_link 그리고 #search 까지적용된사이트의모습 [ 그림 4.2-2] 를보면검색부분이로고오른쪽 #head_link 왼쪽에위치해있습니다. 이제브라우저의폭을줄이면 [ 그림 4.2-3] 과같은모습이나타납니다. [ 그림 4.2-5] <div class= clear > 을적용후사이트의모습 266 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 267
<div class= clear > 을적용하게되면브라우저의폭을줄이더라도검색은항상밑부분에위치하고있습니다. 그이유는 id= head_link 와 id= search 가 <div class= clear > 에의해서완전히분리되었기때문입니다. 는것이정석입니다. 예제에서는이런경우 br 태그를이용해서도박스간라인브레 이크가가능하다는것을보여준것입니다. 단텍스트한줄크기의박스모델에서만 br 태그를사용합니다. 하지만 [ 그림 4.2-5] 를잘보면검색부분이로고밑쪽에위치해있는것을알수있습니다. 이런현상은 main.css에적용된.clear{clear:both; 값때문입니다. clear:both가해주는역할은단어뜻그대로입니다. 좌우로불필요한요소를클리어해주는것입니다. 그렇기때문에 #head_link 다음에 <div class= clear > 을적용해주면 #head_link 왼쪽에있는 <div id= logo > 가걸리기때문에로고다음에 <div id= search > 가위치해버리는것입니다. CSS를이용해서웹사이트제작시 <div class= clear > 을자주사용하는이유는이렇게중첩된 <div> 을서로분리해주는역할을하기때문입니다. 예를들어 CSS를통해 #search의속성에 margin-top:-20px을적용하거나, 아래와같이두개의아이디선택자부분을하나의 wrap2를이용해감싼후 wrap2에 float:right를이용해오른쪽으로배치하는등의방법을사용합니다. [ 그림 4.2-6] <br> 태그적용후사이트의모습 <div id="head_link"> <br> <div class="clear"> <div id="search"> <div id="wrap2"> <div id="head_link"> <div class="clear"> <div id="search"> 그렇게되면 HTML 문서에도코드가늘어나게되고, CSS 문서에도코드가늘어나게됩니다. 하지만이런문제가생길경우간단하게처리하는 HTML 태그가있습니다. 오히려초보자의경우이런문제를쉽게처리하는경향이있습니다. 전문가의경우복잡하게처리하는경우가많습니다. 간단히앞서추가했던 <div class= clear > 태그는제외해버리고 <br> 태그를입력하면문제가해결됩니다. 그이유는 br 태그자체가라인브레이크 ( 줄바꿈 ) 기능을가지고있기때문입니다. 하지만 <div> 박스모델에선 br 태그를함부로사용하는것은위험합니다. 현재의예제에서는 id= head_link 부분이높이가텍스트크기와동일하기때문에이렇게적용가능한것이지만, <div> 의높이가텍스트의크기보다클경우에는 br 태그를적용하면박스들이중첩되어버립니다. 따라서박스모델에서는 <div class= clear > 을이용해서라인브레이크를적용해주 어떤분은이문제를왜쓸데없이몇페이지에걸쳐설명하는지의아해할수도있습니다. 이문제는사실초보자에게쉬운문제입니다. 하지만초보자에서중급자로실력을쌓아가게되면 CSS 이용이자유자재로이루어지게됩니다. 그러다보면이런경우를만나게되는데, 보통은 <div class= clear > 을이용해서각각의레이어를분리해주는경향이있습니다. 그렇기때문에습관처럼, <div class= clear > 을적용하게되는데, 문제를간단하게생각하면단순하게 <br> 태그만적용해도되는경우가있기때문에이런복잡한문제가발생할경우쉬운방법은없는지한번고민해보는것도좋다고생각하여설명한것입니다. 이제 CSS를이용하여각레이어에디자인을적용해보겠습니다. 먼저 #head_link 선택자의폰트사이즈를조정합니다. 268 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 269
header #head_link { float:right; font-size:0.75em; header #search { margin-top:20px; 이제검색부분에디자인을적용합니다. 먼저 index.php에다음과같이검색박스와검색버튼에각각다른클래스선택자를부여합니다. <div id="search"> <form> < input name="input" type="text" class="main_input"> <input name="search" type="button" value=" 검색 " class="btn1"> </form> 이것은각각다른속성을적용하기때문에클래스선택자로구분한것입니다. 이제 main.css에서다음과같이만들어진클래스선택자의속성을부여합니다. header #search.main_input { width:260px; / * 검색박스의세로폭을정합니다. */ height:22px; / * 검색박스의높이를정합니다. */ border:#336699 3px solid; /* 테두리두께와색상그리고테두리모양을정합니다. */ padding:0 5px; /* 검색어입력시내부간격조절을위해서 */ header #search.btn1 { background-color:#369; /* 버튼의배경색상을정합니다. */ border:solid 1px #369; /* 테두리도같은색상으로적용합니다. */ color: #FFF; /* 폰트색상을지정해줍니다. */ height:28px; /* 높이를지정합니다. */ width:55px; /* 버튼의세로폭을지정합니다. */ margin-left:2px; /* 검색박스와 2픽셀정도여백을줍니다. */ [ 그림 4.2-7] CSS 속성을통해 #head_link 와 #search 속성부여후 [ 그림 4.2-7] 을보면 #head_link와 #search가오른쪽으로너무붙어있습니다. 그래서오른쪽으로약간의여백, margin-right:10px; 을적용합니다. 현재까지작업된사이트는브라우저의크기에상관없이, 레이어들이오른쪽또는왼쪽에배치되어있습니다. 즉어떤해상도라할지라도동일하게보입니다. 이제디자인된웹사이트인 [ 그림 4.1-4] 를보면헤더에있는요소들과메뉴그리고콘텐츠를분리해주는선이보입니다. 이선을적용하겠습니다. [ 그림 4.2-8] 을보면브라우저크기를가변적으로처리하더라도헤더부분은동일한모습인것을알수있습니다. [ 그림 4.2-8] 브라우저의크기가 700 픽셀인경우 ( 상 ), 브라우저의크기가 1400 픽셀인경우 ( 하 ) 마지막으로 #head_link와 #search 사이의여백을주기위해 margin-top:20px; 을 header #search에적용합니다. 270 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 271
그렇다면, 선 (line) 도어떤경우에도동일하게적용되어야합니다. 심지어현재만드는사이트의폭을고정할경우에도동일하게적용되어야합니다. 여기에는 2가지방법이있습니다. 먼저 header 태그선택자의하단에 border-bottom을이용해서선을넣는방법이있습니다. 이경우사이트의폭을고정해버리면고정된폭만큼만선이보여지게됩니다. 또하나의방법은 body 태그를이용해서백그라운드이미지로처리하는것입니다. 그렇게되면, 사이트의폭이가변적이거나고정되더라도동일하게보이게됩니다. 여기서는후자의방법을사용하겠습니다. index.php에있는주문배송부분에새로운클래스선택자인 no_line을추가합니다. <li class="no_line"><a href="#"> 주문배송 </a></li> 그리고 main.css 내부에아래와같이추가해주문배송이후에나오는구분선을없앱니다. header #head_link.no_line {border-right:none; 마지막으로전체사이트를 <div id= wrap >... 을이용해서감쌉니다. 전체사이트를 #wrap을이용해서감싸게되면편리한점이많습니다. body { 중간생략 background-color: #FFF; /* 배경색을흰색으로 */ background-image: url(../imgs/body_back.gif); /* 배경이미지적용 */ background-repeat: repeat-x; /* X축으로반복 */ background-position: top; /* 배경이미지위치지정 */ 우선전체사이트의폭width를마음대로조절할수있으며, 전체콘텐츠의위치또한쉽게조절할수있습니다. 전체사이트를중앙에위치하고싶을경우에는 margin: 0 auto; 를 wrap에적용해주면되고, 만약전체콘텐츠의위치를왼쪽에배치하고싶은경우에는 margin에서 auto를제거해버리면됩니다. 또한 wrap의 width를픽셀로적용하면딱그폭만큼사이트의폭이결정되는것이고, 퍼센트를적용하면, 길이가가변적으로변하게됩니다. 이렇게 body 태그에적용해줍니다. 백그라운드에적용된이미지는소스파일을통해살펴보기바랍니다. 일단이사이트의디자인을위해폭을 995px을적용하겠습니다. index.php에서 <div id= wrap > 을이용해서감싸줍니다. [ 그림 4.2-9] 백그라운드이미지까지적용된헤더 [ 그림 4.2-9] 를보면주문배송바로다음에도구분선 ( ) 이있습니다. 이구분선을지워야보기에좋습니다. 기억이날지모르겠지만, 우리는 3장에서이미이러한경우를처리해보았습니다. <!DOCTYPE HTML> <html> 중간생략 <body> <div id="wrap"> 중간생략 </body> </html> 이제 main.css에서 #wrap의값을설정해줍니다. 272 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 273
#wrap { width:995px; margin:0 auto; padding:0; [ 그림 4.2-10] 을보면 <div id= wrap > 이적용된후사이트가중앙에 995픽셀값으로고정된것을알수있습니다. Section 3 메인메뉴 (nav) 및배너작업 [ 그림 4.2-10] <div id= wrap > 이적용된후사이트모습 여기까지작업은예제소스 4.2.php 파일을참조하세요. 먼저메인메뉴와배너작업을하기전에전체레이아웃을다시한번살펴보겠습니다. 전체레이아웃은 [ 그림 4.3-1] 과같은모습으로구조를잡을수있습니다. header nav aside article footer [ 그림 4.3-1] 전체사이트의구조 274 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 275
여기서메인메뉴에해당하는곳이 nav 태그가있는곳인데, nav 태그는 aside 내부에위치하고있습니다. 사이트의전체적인구조를고려하여, 이렇게먼저큰그림을그려놓고사이트작업을하게되면, 태그작업이편할수있습니다. 이제 index.php 파일에서 <header>...</header> 태그다음에 <div class= clear ></ div> 를입력하고 <aside><nav></nav></aside> 를입력합니다. 이경우에는 <br> 태그로분리해주는것이아니라 <div class= clear > 을이용하여확실하게 <header> 와분리해줘야합니다. </li> <li>computers <ul> <li><a href="#">digital 기기 </a></li> 중간생략 </ul> </li> </ul> <nav> </aside> 즉 <ul> 내부에다시 <ul> 이있는형태입니다. 하지만내부에있는 <ul> 태그는다시 <li>...</li> 내부에있다는것을명심해야합니다. 3장에서이런사례를이미설명했습니다. index.php 파일내부에위와같이코드를입력한후결과화면은 [ 그림 4.3-3] 과같은결과가나오게됩니다. 이제 main.css 파일을수정해 [ 그림 4.3-2] 와같은형태의디자인을만들어보겠습니다. [ 그림 4.3-2] 메인메뉴디자인 [ 그림 4.3-2] 를보면메인메뉴를구성하는요소를알수있습니다. 먼저국내외도서부분과 Digital 기기부분, 이렇게크게두개로나눠져있으며, 그밑으로세부메뉴들이있습니다. 이경우 HTML 태그는다음과같은방법으로구성되어야합니다. <aside> <nav> <ul> <li> 국내외도서 <ul> <li><a href="#"> 컴퓨터와인터넷 </a></li> 중간생략 </ul> [ 그림 4.3-3] nav 태그를이용한메뉴만들기 276 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 277
가장먼저 aside 태그선택자에속성을부여합니다. aside { float:left; /* 왼쪽으로배치 */ width:205px; /* aside 폭의크기설정 */ 그리고 nav 태그선택자에대한속성을정의합니다. nav { margin:25px 0 0 10px; /* 상단 25픽셀왼쪽으로 10픽셀의공간적여유 */ font-size:0.8em; /* 폰트크기를설정합니다. 기본폰트크기에서 0.8em은약 13픽셀 */ font-family:'nanumgothic'; /* @font-face 에서정의된나눔고딕 */ 결과는 [ 그림 4.3-4] 와같습니다. 우선 [ 그림 4.3-3] 을보면 header 태그와 nav 태그가너무붙어있는것을볼수있습니다. 마진을이용하여간격을조정합니다. 또한 aside는왼쪽으로정렬되어있으며, 고정된크기 (205픽셀) 라는것을알수있습니다. 또한폰트크기도디자인에맞게수정해줘야합니다. 그리고마지막으로폰트의글꼴은나눔고딕을사용했습니다. 그렇기때문에 @font-face를이용한나눔고딕폰트를설정해줘야합니다. 우선 main.css의상단에 @font-face를이용해서나눔고딕에대한속성을설정해줍니다. @font-face { font-family:'nanumgothic'; /* 폰트이름을정의해줍니다. 여기서는 NanumGothic */ src:url(../imgs/nanum.eot); /* IE 하위버전을위한 eot 파일경로설정 */ src:local(' '), url(../imgs/nanum.woff) format("woff"), /* woff 파일경로설정 */ url(../imgs/nanum.ttf) format("truetype"); /* true type font 파일경로설정 */ 2장과 3장에서도설명했지만, @font-face를이용해서폰트를정의해줄땐가급적 CSS 파일내부의상단에위치해주면좋습니다. 브라우저가 CSS 파일을해석할때, 맨처음줄부터읽어서내부캐시저장소에저장하기때문입니다. [ 그림 4.3-4] nav 태그속성적용후화면 이젠 nav ul의속성을적용합니다. [ 그림 4.3-4] 를보면각메뉴앞에리스트타입을나타내는 들이있는데전혀필요가없습니다. 없애는것은 list-type:none을적용해주면됩니다. 또한 nav ul li의속성에는패딩을이용해서간격을설정해줄필요가있으며, 영문글자들을전부대문자로변환해야합니다. nav ul {list-style:none; nav ul li {padding:5px 10px;text-transform: uppercase; 이제 nav 태그선택자를정의하겠습니다. 278 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 279
그림을보면 <h3> 부분에는 border 및 border-radius를이용해야한다는것을알수있습니다. 또한배경이미지를이용해서약간의그라데이션효과를준것을알수있습니다. 물론 CSS3의그라데이션을이용해서동일한효과를줄수있겠지만, IE 계열에서는제대로동작하지않기때문에배경이미지의파일크기가크지않을경우배경이미지를이용하는것이더편리하고간단합니다. 그리고영문폰트는앞첫글자만대문자이기때문에 text-transform: capitalize; 를이용합니다. 또한패딩값을이용하여글자의위치를잡아주게됩니다. [ 그림 4.3-5] nav 태그선택자의 ul 과 li 부분까지속성부여후결과화면 국내외도서와 Digital 기기부분은메뉴의대분류이기때문에 <h3></h3> 태그를적용해주겠습니다. <li><h3> 국내외도서 </h3> 이런방식으로적용하면됩니다. 대분류표시를위해 <h3> 태그를적용해주었지만, 대분류부분에특별히디자인적인요소를더해준다는목적이더맞는의미라고할수있습니다. [ 그림 4.3-2] 를보면, 대분류부분에디자인적인요소를더한것을알수있습니다. 따라서 <h3> 속성을적용한곳에 CSS를이용해속성을적용하면됩니다. main.css 에는 nav ul li h3라고정의하면됩니다. nav ul li h3 { border:1px solid #CCC; /* 테두리속성지정 */ border-radius:20px; /* border-radius 값을정의함 */ padding:5px 20px; /* 패딩값을조절하여상단 5픽셀좌우 20픽셀의값을설정 */ font-size:14px; /* 폰트의크기를설정 */ text-transform: capitalize; /* 영문첫글자만대문자로 */ background-color: #e5e5e5; /* 배경색상지정 */ background-image: url(../imgs/nav_back.jpg); /* 배경이미지설정 */ background-repeat: repeat-x; /* 배경이미지를 X 축으로반복 */ background-position: top; /* 배경이미지의위치는상단으로설정 */ 결과화면은 [ 그림 4.3-7] 과같습니다. 다시한번디자인적인요소를확인해보겠습니다. [ 그림 4.3-7] nav ul li h3 속성적용후모습 이제 [ 그림 4.3-7] 을다시보면서브메뉴명들이 <h3> 보다앞쪽에위치해있습니다. [ 그림 4.3-6] 메인메뉴디자인살펴보기 전체 HTML 코드를보면, 이부분은 nav ul li ul li가담당하게되는것을알수있습니다. 하위선택자가담당하는것이죠. 따라서패딩값을왼쪽에 20픽셀을적용합니다. 그리고서브메뉴간의간격을적당한값으로설정해줍니다. 280 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 281
nav ul li ul li { padding:0 0 0 20px; /* 왼쪽으로패딩을 20픽셀적용 */ line-height: 2em; /* 각메뉴간의간격을 2em 값으로적용 */ 여기까지적용후메인모습의상태는 [ 그림 4.3-8] 의왼쪽이미지와같습니다. [ 그림 4.3-9] nav ul li a {display:block; 적용전 ( 왼쪽 ) 과적용후 ( 오른쪽 ) 그림을보면서브메뉴와메인메뉴 <h3> 과의간격이너무붙어있어서약간의값을적용해서간격을벌려줄필요가있습니다. <h3> 과의간격을벌리기위해선 nav ul li ul 값을설정하면됩니다. nav ul li ul { margin:10px 0 0 0; /* 마진값을이용해서간격을벌려줌 */ [ 그림 4.3-9] 와같은방식은사용자들이웹사이트를사용할때조금이라도편리하게사이트를이용하게해줍니다. 또한이렇게 display:block을적용하게되면 nav ul li a:hover 속성을추가해서재미있는효과를줄수도있습니다. 이건직접한번적용해보세요. 실제적용하진않겠습니다. nav ul li a:hover {text-align:right; /* 마우스커서오버시텍스트정렬을오른쪽으로 */ 또는, nav ul li a:hover {text-indent:15px; /* 마우스커서오버시텍스트 15픽셀안쪽으로 */ 앞서 nav 태그는 aside 태그를이용해서감싸져있으며, aside는배너와공지사항을감싸고있습니다. 우선 HTML5에서 aside 태그는본문이외의콘텐츠를배치할때사용합니다. 특히왼쪽또는오른쪽에위치하는메뉴및배너또는기타요소들을배치할때사용합니다. 따라서이책에서는메인메뉴와배너그리고공지사항및기타요소들을배치하는태그용으로 aside를사용하겠습니다. [ 그림 4.3-8] nav ul li ul 을적용한후메인메뉴의모습비교. 왼쪽은적용전오른쪽은적용후 메인메뉴부분은현재더미링크가걸려있습니다. 더미링크란 <a href= # >...</ a> 로링크가걸려져있는것을말합니다. 나중에진짜메뉴가걸리기전링크효과를확인해보기위해서메뉴부분에링크를거는것입니다. 현재까지작업된상태에서는각메뉴의링크는링크가걸려있는텍스트부분에만적용됩니다. 하지만링크가걸려있는곳에 display:block 처리를하면블록이설정된부분전체에링크가걸리게됩니다. <aside> <nav> 메뉴구성 </nav> <div id="banner"> <img src="imgs/banners/nikon1.jpg" width="190" height="163"> <div id="banner"> <img src="imgs/banners/slate.jpg" width="190" height="362"> 중간생략 </aside> 이런구성으로태그를적용합니다. 282 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 283
배너가있는부분은 <div id= banner > 을이용해서처리하고각각의배너들을 <div id= banner ><img src= 배너이미지 > 로처리해줍니다. index.php 파일내부에위와같이적용해준결과는 [ 그림 4.3-10] 과같습니다. [ 그림 4.3-11] aside 내부에있는 nav 및 #banner 부분에속성적용후모습 마지막으로공지사항을넣겠습니다. 공지사항은 <div id= notice > 라고정의하겠습 니다. 그리고다음과같이 index.php 에해당위치에입력합니다. <div id="notice"> <h2> 공지사항 </h2> <ul> <li><a href="#"> 여긴공지사항입니다.</a></li> 중간생략 </ul> [ 그림 4.3-10] <aside> 태그와 <div id= banner > 을이용한배너적용후의모습 이제 aside 내부에있는배너사이의간격을위해서 aside #banner의마진값을설정합니다. aside #banner { margin:10px 15px; [ 그림 4.3-12] CSS 가적용되기전공지사항모습 284 HTML5 & CSS3 사이트제작의모든것쇼핑몰사이트제작 285