chapter 14 사이트제작전 준비작업및 프론트페이지제작 14장에서는사이트제작에들어가기에앞서, 필요한사항을먼저점검하도록하겠습니다. 사이트를제작하기위해선먼저준비해야하는사항이몇가지있는데, 실제서버와같이동작하게해주는개인용웹서버가준비되어있어야하고, 사이트의디렉토리또한구성되어야합니다. 또한사이트를제작하려면, 포토샵과같은그래픽저작도구를이용해서레이아웃을구성해야함은물론이고, 그래픽요소가필요한부분을따로저장해야하는방법도알아야합니다.
이번장에서는본격적으로사이트를제작하도록하겠습니다. 우선사이트제작에앞서몇가지준비사항및주의점이있습니다. 1. 예제를실행하기위해선 WAMP 또는 MAMP 서버가필요합니다. WAMP 서버설치방법은부록을참고하기바랍니다. 1 사이트준비작업 2. 포토샵을이용해서만들어진사이트디자인레이아웃이있어야합니다. 포토샵사용법에대해자세히학습하지않습니다만, 웹에서사용하는레이아웃은어떻게잘라내고어떤파일을사용하는가에대한설명은간단하게진행하겠습니다. 포토샵으로만들어진샘플파일은원본 PSD 파일로제공됩니다. 3. 필요한폴더들은미리만들어놓습니다. 사이트제작과정에서필요한폴더명을알려드립니다. 4. 여기사용된예제들에는웹프로그래밍 (PHP, ASP,.Net 등 ) 이적용되지않은상태입니다. 웹프로그래밍에대해서도전혀언급되지않습니다. 5. 제작되는사이트는 HTML5, CSS3의거의모든기능이지원되는브라우저를사용해야합니다. IE10 이상, 구글크롬 26 이상, 파이어폭스 20 이상, 사파리의최신버전은맥에서만지원되기때문에여기서언급을하진않겠습니다. 하위브라우저에대한호환성도다루긴합니다만, 아무래도효과나기타여러기능들이완벽하게동작하지않을수있습니다. 위와같은준비사항을명심하고, 이제부터사이트제작에들어가보도록하겠습니다. 책에서나오는예제는임베디드방식으로 CSS를적용합니다. 실제사이트작업시 우선 WAMP 서버가 PC에설치된상태이면, WAMP 서버가설치된폴더에있는서브폴더 www 내부에사이트용폴더를하나만듭니다. 필자는 yngsite라는폴더를하나만들겠습니다. 여기에다음과같이일단 3개의폴더를만들어놓습니다. imgs/ 이미지파일들이저장되는곳입니다. css/ CSS 파일은여기에넣습니다. scripts/ 자바스트립트파일들은여기에넣습니다. 이외에사이트가아주큰경우에는사이트의메인메뉴에따른폴더들을하나씩만들어놓습니다. 하지만전체페이지가 20페이지이내일경우에는폴더에넣지않고루트폴더에작업하는것이편리합니다. 현재만들사이트도규모가크지않기때문에루트에파일을넣고작업하도록하겠습니다. 최종적으로만들려는사이트의프론트페이지는 [ 그림 14-1] 과같습니다. 에는 CSS 파일을따로만들어서작업을하는데, 책에서는예제파일을하나씩실행해야하는문제가있어, 작업이끝나기전에는임베딩방식으로 CSS를적용하고, 최종웹사이트에서는 CSS를별도로분리하도록하겠습니다. 주의 ) 예제로제공된압축파일을풀면, yngsite 라는폴더가생성되고, 그폴더안에파일들이있습니다. 학습이제대로이루어지려면, 먼저부록에나와있는 WAMP 또는 MAMP를설치하여야합니다. WAMP 또는 MAMP가설치된상태에서 WAMP 서버내에있는 www 폴더, MAMP 서버의 htdocs 폴더에 yngsite 라는폴더를이동해주면됩니다. 모든예제들은브라우저에서 http://localhost/yngsite 라는곳에서실행되게되며, 예제소스경로또한 localhost 로표기됩니다. 예를들어, http://localhost/yngsite/index04.php 이렇게표시됩니다. 380 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 381
#logo #wrap header #hlink nav #slider #justar #notinews #social footer [ 그림 14-2] 선택자를각부분별로정의 [ 그림 14-1] 제작할사이트의프론트페이지 이런형태의웹사이트레이아웃은단순하지만, 일반적으로많이사용되고, 오랜기간사용할수있다는장점이있습니다. 만들려는사이트는기본적으로 HTML5와 CSS3를기본으로제작할예정이며, CSS3를이용할수없는특수효과는 jquery를이용해서만들겠습니다. 가장우선적으로해야할작업은프론트페이지에서이미지로처리할부분과일반코드로처리할것을구분하는것입니다. 또한만들어진디자인레이아웃을기반으로 HTML 코드를작성해두면편리합니다. [ 그림 14-2] 와같이미리각부분별로태그선택자와아이디선택자를정리합니다. 여기서아주잠깐포토샵을이용해서이미지로처리할부분에대해서잘라내고저장하는방법에대해서설명해드리겠습니다. 지금필자가사용하는포토샵은 CS6 버전입니다만, 어떤포토샵버전을사용하더라도동일한작업을할수있습니다. [ 그림 14-3] 을보면포토샵의레이어팔레트에서배경으로사용된레이어의눈아이콘을비활성화하면배경이사라져투명해지는것을알수있습니다. 이때이미지로저장할부분을선택툴로선택한후 CTRL + SHIFT + C 키를누릅니다. CTRL + SHIFT + C는 copy merged 기능으로어떤레이어상태에서작업하더라도해당선택부분을복사하는기능이있습니다. 그후 CTRL + N 키를누르면새로운작업윈도우가나오며, 여기에 CTRL + V 키를눌러붙여넣기를합니다 ( 그림 14-5 참조 ). 382 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 383
[ 그림 14-6] 배경이제거된이미지 [ 그림 14-3] 포토샵에서제작된파일의배경레이어감추기 이렇게배경이제거된이미지는 3가지파일포맷으로저장할수있는데, 그림과같이배경이사용되지않는경우 gif 파일또는 png 파일로저장하면됩니다. < 여기서잠깐 > 에서도언급되지만로고와같이복잡한곡선이들어가있는경우에는 png 파일로저장하는것이좋습니다. 여기서잠깐 배경이투명한파일은 GIF 와 PNG 라는두가지타입으로저장할수있습니다. GIF 파일은 [ 그림 14-4] 선택툴을이용해서해당이미지부분선택 인터넷초창기부터사용하던파일포맷이며, 역사가가장오래된파일타입이라고할수있습니다. GIF 파일의장점은파일사이즈가작으며, Animated GIF 즉파일자체에서애니메이션파일로만들수있습니다. 또한배경을투명하게만들수있습니다. 하지만색상표현이 256 컬러로제한되고, 투명한배경을지정할경우복잡한곡선은거칠게표현됩니다. 직선으로만되어있으면 GIF 파일을추천합니다. 따라서웹에서사용하는아이콘이나, 색이복잡하지않은단순한이미지는 GIF 파일이좋습니다. PNG 파일은 [ 그림 14-5] 선택된이미지의붙여넣기후상태 [ 그림 14-5] 를보면이미지가선택된부분보다작게이미지크기에딱맞는크기로붙여넣어진것을확인할수있습니다. 여기서다시 Background 레이어에있는눈아이콘을클릭해서배경을없애줍니다 ( 그림 14-6 참조 ). 인터넷전용으로나온파일로 Portable Network Graphic이란의미입니다. 가장최근에나온그래픽전용파일로, GIF 파일과달리투명한배경을완벽하게투명하게만들수있는장점이있습니다. PNG 파일은 png8, png16, png24, png32와같이 8비트 16비트 24비트 32비트파일포맷이존재합니다. png8 포맷은투명배경효과가 gif보다약간뛰어나거나별차이가없습니다. 색상또한 256 컬러만지원합니다. png24 이상은투명효과가완벽하며, 많은수의색상을구현할수있습니다만, 파일크기가제일크다는단점이있습니다. 따라서인터넷에서이미지파일을사용할때, 간단한아이콘은 gif 파일로, 복잡한곡선이들어가지만투명한배경이필요하면 png 파일을, 사진파일은 jpg 파일로사용하는것이좋습니다. 384 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 385
포토샵에서단축키 ALT + SHIFT + CTRL + S 즉 Save for web( 웹으로저장 ) 을누릅니다. 그러면 [ 그림 14-7] 과같은화면이나오며, 그림에서와같이파일타입을선택한후저장을하면됩니다. 여기서는 PNG-24로선택하고 Transparency에체크를해주면배경이투명한 png 파일로저장을할수있습니다. 이파일에이름을지정하고 wamp 서버 www 폴더내에있는 yngsite의 imgs 폴더에저장합니다. 이런방식으로이미지로처리할부분은전부저장합니다. 슬라이더이미지는압축률 60% 정도로설정한 jpg 형식으로나머지파일또한적당한파일포맷으로저장합니다. 필자가미리작업해둔폴더 ( 그림 14-8 참고 ) 를보면각파일들이어떤포맷으로저장되어있는지알수있습니다. 참고하기바랍니다. [ 그림 14-8] imgs 폴더에저장된파일형식 마지막으로준비할사항은 CSS Reset 이라불리는 CSS 초기화파일을설정하는것입니다. CSS 초기화는각브라우저마다 HTML 태그들간의마진과패딩및기타속성값이조금씩차이가나기때문에 CSS를이용해서값을초기화하는것을말합니다. 가장간단한방법은 CSS 속성에다음과같이적용하는것입니다. * {margin:0; padding:0 전체선택자를이용해서모든태그선택자의마진과패딩을 0 으로만드는것입니다. [ 그림 14-7] save for web 화면 가장간단하고, 쉽습니다. 하지만이렇게전체선택자를이용해서모든선택자의마진과패딩을 0으로만든다고문제가해결되지않는경우도있습니다. 이럴경우조금은정교하게 CSS를이용하여선택자의값을설정해줘야합니다. 이럴때사용하는것이외부파일로 CSS reset 파일로만들어 @import 또는 link 명령을이용해만들려는사이트에포함하면됩니다. 이 CSS reset 중가장유명한것이 Eric Meryer 의 CSS Reset입니다. 그다음유명한것이야후에서만든 YUI Reset이있습니다. 그리고 HTML5가나오면서 html5doctor라는사이트에서만든 HTML5 reset도있습니다. 필자가추천하는 Reset 파일은구글코드에있는 Eric Meyer s CSS Reset 과 hmlt5doctor.com s HTML5 reset을결합한 reset5라는 CSS reset을추천합니다. 해당파일은 https://code.google.com/p/reset5/ 에서구할수있습니다. 이제프론트페이지를시작으로사이트를제작해보겠습니다. 386 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 387
2 프론트페이지제작 #logo header #hlink nav [ 그림 14-9] 헤더부분에있는선택자들 [ 그림 14-9] 에서설정한선택자를기반으로 HTML 코드를구성해보겠습니다. 이제본격적으로프론트페이지를제작합니다. 3 부 1 장에서 HTML5 템플릿파 일 html5css3template.html 을만들었습니다. 이제부터설명하는예제들은 html5css3template.html 을기초로작업을하겠습니다. 먼저에디터에서 html5css3template.html 파일을열어 다른이름으로저장 (save as) 을선택하여, index.php 파일이라고저장합니다. 제일먼저 #wrap 이라는아이디선택자를이용해서문서전체를감쌉니다. wrap 이 라는아이디선택자는문서전체를감싸고문서를중앙에배치하는역할을합니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <style></style> </head> <body> <div id="wrap"> </body> </html> 7 14-1] #wrap 아이디선택자를이용하여전체문서를감싸줌 _ /yngsite/index01.php 이제 header 부분을작업하겠습니다. 이전 [ 그림 14-2] 에서따로헤더부분만분리 해보면 [ 그림 14-9] 과같습니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <style></style> </head> <body> <div id="wrap"> <header> <div id="logo">yng Corp. <div id="hlink"> <ul> <li> 로그인 </li> <li> 회원가입 </li> </ul> <nav> <ul> <li> 회사소개 </li> <li> 제품정보 </li> <li> 커뮤니티 </li> <li> 고객지원 </li> </ul> </nav> </header> </body> </html> [ 코드 14-2] header 부분에대한 HTML 코드정리 _ /yngsite/index02.php 388 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 389
코드를보면알겠지만, 현재모든부분이텍스트로구성되어있습니다. 이미지는전혀들어가있지않은상태입니다. 결과는 [ 그림 14-10] 에서확인할수있습니다. * 최종파일은 index.php 파일이되지만, 단계별학습을위해예제파일에숫자를붙여서표기하도록하겠습니다. 이제 CSS 속성을이용해서 header 부분에대한디자인작업을시작해보겠습니다. a {text-decoration:none;color:#333; /* 기본링크색상및밑줄제거 */ a:hover {color:#39f; text-decoration:none /* 마우스오버시색상및효과적용 */.clear { clear:both /* clear 선택자설정... 하단생략... [ 코드 14-3] reset5.css 적용및 body, #wrap 등기본선택자에속성적용 [ 코드 14-3] 까지가사이트전체기본이되는뼈대라고할수있습니다. 이제부터는실제웹사이트의요소들인선택자에대해속성을적용해보겠습니다. 먼저포토샵에서작업된부분에정확한위치를파악해야만해당요소들을정확하게배치할수있습니다. 포토샵에는 ruler tool이있어해당요소가정확하게어느정도의위치에있는지거리를잴수있습니다. [ 그림 14-11] 에서회사로고가있는부분 [ 그림 14-10] header 부분의 HTML 코딩후결과화면 이제여기에 reset5.css 파일을링크로연결해주고기본적인 body 와 #wrap 선택자 을상단에서부터재보면 H:42.00으로표시되어있는것을볼수있습니다 ( 그림에서보이는포토샵은단위가 pixel로설정되어있는상태입니다 ). 그리고기본적인링크효과에대한속성을정의합니다. <!doctype html> <html> <head> <meta charset="utf-8"> <title>yng 에오신여러분을환영합니다.</title> <link href="css/reset5.css" rel="stylesheet" type="text/css"> <!-- reset5.css 파일을링크형식으로적용 --> <style> body{ font-size: 0.75em; /* 사이트전체기본폰트사이즈설정 */ font-family: " 맑은고딕 ", "Malgun Gothic", " 돋움 ", Dotum, AppleGothic, sans-serif; /* 사이트전체기본폰트설정 */ line-height:1.2em; /* 글단락사이기본간격설정 */ color:#333; /* 기본폰트색상지정 */ background-color: #e8e8e8; /* 기본바탕배경색지정 */ #wrap{ margin: 0 auto; /* 실제사이트를감싼 wrap 중앙정렬 */ width: 944px; /* 실제사이트의크기설정 */ background-color: #fff; /* wrap 부분배경색상설정 */ [ 그림 14-11] 포토샵에서 ruler 를이용, 요소들의정확한위치재기 이런방식을통해각요소들의위치를파악할수있습니다. 이렇게파악된위치를바탕으로 header 부분에대한작업을하겠습니다. 우선 header 전체의높이는 137픽셀입니다. 그리고현재로고에는텍스트로 YNG Corp. 이라고되어있는데, 보통사이트들은회사로고를클릭하면항상홈화면으로돌아가게처리합니다. 따라서 HTML에 <div id="logo"><a href="#">yng Corp.</a> 와같이링크를걸어줍니다. 390 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 391
여기서잠깐 더미 ( 가짜 ) 링크 # 을이용한링크는보통더미 ( 가짜 ) 링크라고합니다. 웹사이트제작시링크가되는부분에대해먼저더미링크를이용해서링크효과를확인할때주로사용되며, 사이트가제작되는중간에 # 을제거하고실제링크로대체합니다. 그리고 logo 부분에는다음과같이속성을정의합니다. #logo{ float: left; /* 왼쪽정렬 */ text-indent: -9999px; /* text-indent 속성으로텍스트감춤 */ width:167px; /* 로고넓이설정 */ height:63px; /* 로고높이설정 */ background:url(imgs/logo.png) no-repeat left top; /* 배경이미지로로고이미지사용 */ margin:42px 0 0 18px; /* 포토샵에서측정한마진값설정 */ 방법은단순합니다. #logo a 라는선택자를만들어서 #logo 에적용된 width 와 height 를 #logo a 에적용해주고인라인속성인 #logo a 를 display:block 즉블록속성으로 변환해버리면됩니다. 다음과같이적용해주면됩니다. #logo{ float: left; text-indent: -9999px; background:url(imgs/logo.png) no-repeat left top; margin:42px 0 0 18px; #logo a { display:block; width:167px; height:63px; 이렇게적용해주면로고부분전체에링크가걸리게되는것입니다. [ 그림 14-13] 을보면차이점을알수있습니다. 여기까지의결과는 [ 그림 14-12] 와같습니다. [ 그림 14-13] #logo a 적용전 ( 왼쪽그림 ) 과적용후 ( 오른쪽그림 ) 이제로그인부분즉 #hlink 라고되어있는부분과메인메뉴에대한처리를해보 겠습니다. [ 그림 14-13] 에서보면로그인과회원가입부분에는리스트스타일이적용되어있 [ 그림 14-12] 로고부분텍스트를이미지로교체 하지만여기서로고부분즉텍스트에링크를걸었는데, 로고이미지를클릭해보면링크가되어있지않는것을확인할수있습니다. 이유는텍스트에링크는걸려져있는데, 텍스트를감춰버려링크대상이없다는것입니다. 그럼이런경우어떻게처리해야할까요? 는데, 회사소개, 제품정보가있는메인메뉴에는리스트스타일이적용되어있지않습니다. 그이유는 reset5.css 파일내부에 nav ul {list-style:none 이라고되어있기때문에 nav 부분에는리스트스타일이없습니다. 먼저 #hlink와 nav는오른쪽으로정렬되어있습니다. 따라서그룹선택자를사용하여묶어주고 float:right를적용합니다. 그리고 #hlink 부분에 list-style:none을지정합니다. 또한현재상하로배치되어있는리스트를좌우방향으로배치하기위해서 #hlink li 와 nav li 의속성을 float:left 로지정합니다. 정리를하면다음과같습니다. 392 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 393
#hlink, nav {float:right; #hlink ul {list-style:none; #hlink li, nav li {float:left; 그에따른결과는 [ 그림 14-14] 를참조하면됩니다. [ 그림 14-16] #hlink 와 nav 의마진값을이용하여자리배치후모습 이제각텍스트사이의간격과메인메뉴의크기를조절하도록하겠습니다. 텍스트간격은패딩을이용해서처리합니다. 그리고메인메뉴에는메뉴간의구분을위해서구분선이되어있는데, 이부분은백그라운드이미지를이용해서처리합니다. [ 그림 14-14] #hlink 부분과 nav 부분에대한처리 [ 그림 14-14] 를보면 #hlink 부분과 nav 부분이동시에 float:right 가되어있어한 줄에배치되어있는것을알수있습니다. nav 부분은 #hlink 다음라인에배치하려면 nav에만 clear:right를지정해주면문제가해결됩니다. [ 그림 14-17] header 부분전체레이아웃모습 [ 그림 14-17] 을보면메인메뉴부분에구분선이들어가있는데, 마지막부분 고객지원 다음에도구분선이들어가있습니다. 원본디자인에는이곳에구분선이없습니다. 따라서이부분은제거해야합니다. :last-child라는수도선택자를이용해서배경이미지를없애버리면됩니다. 여기까지적용된 CSS 속성은다음과같습니다. [ 그림 14-15] nav 선택자에 clear:right 적용하여, 다음라인으로배치후모습 이제 #hlink와 nav 부분에대한마진값을설정하여정확한위치에배치하도록하겠습니다. #hlink {margin:11px 28px 0 0; nav {margin:42px 38px 0 0; clear:right; 이속성을적용한후결과는 [ 그림 14-16] 과같습니다. #hlink, nav {float:right; #hlink ul {list-style:none; #hlink li, nav li {float:left; #hlink {margin:11px 28px 0 0; #hlink li a {padding:0 10px nav {margin:42px 38px 0 0; font-size:1.4em;clear:right; nav li {background:url(imgs/div_line.png) no-repeat center right /* 배경이미지로구분선적용 */ nav li a {padding:0 20px / * 각메뉴사이간격제거 */ nav li:last-child {background:none /* 마지막구분선배경이미지제거 */ 394 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 395
여기서원본포토샵에서는메인메뉴의폰트가지금까지작업한 nav 부분과다릅니다. HTML로적용된메뉴는기본폰트가 맑은고딕 인데원본포토샵파일에는 제주고딕 이사용되었습니다. 그렇다면이럴경우어떻게처리해야할까요? 두가지방법이있는데, 그방법은다음과같습니다. [ 그림 14-19] 드림위버에서이미지객체 -> 롤오버이미지삽입 첫번째는현재만들어진메인메뉴부분을그래픽이미지로변경하는방법이고두번째는 제주고딕 을웹폰트로변경한후 @font-family 속성을이용해서처리하는방법입니다. 두번째방법이좋겠지만, 한글폰트는웹폰트로변경하게되면파일크기가상당히크다는단점이있습니다. 따라서 제주고딕 이라는글씨체가현재웹사이트의메인폰트인경우에는웹폰트를사용해야지만, 현재와같이메인메뉴에만사용한다면그래픽이미지로처리하는것이좋습니다. 우선메인메뉴를그래픽파일로처리하는데, 메인메뉴에마우스오버동작시일반적으로색이변하거나, 애니메이션효과를주는것이일반적입니다. 이책에서는웹표준방식을이용해서텍스트를그래픽파일로변환하는세가지방법에대해서설명해드리겠습니다. 먼저메인메뉴에사용될이미지를준비합니다. 일반적으로 4개의메뉴가있으면, 그래픽파일은 8개를만듭니다. 각메뉴에사용될이미지하나, 마우스오버시변화할메뉴하나씩준비합니다. [ 그림 14-20] 드림위버의롤오버이미지사용시쓸데없는코드가생성된다. http://localhost/yngsite/index04.php [ 그림 14-18] 메인메뉴에사용될그래픽이미지 우선웹표준방식으로제작하기전에이전방식즉 WISIWIG 에디터 ( 대표적으로드림위버 ) 에서롤오버이미지를삽입하여메인메뉴를제작하는방법을보겠습니다. 분명히이책을보는분들중에서도이런방식으로지금까지메인메뉴부분을작업했던분들이계십니다. [ 그림 14-19] 와같이드림위버의메뉴중에서삽입이미지객체롤오버이미지를이용해서이미지의롤오버효과를내주는방법이있습니다. 하지만이방법을쓰면, 쓸데없는자바스크립트코드가생기고코드가아주지저분해지는단점이있습니다. [ 그림 14-20] 에서와같이자동으로자바스크립트코드가생성되고메인메뉴가들어가는부분과 body 태그에도코드들이들어가있습니다. 전체적으로너무많은코드가생성되어지저분하게보입니다. [ 그림 14-21] 그래픽이미지를이용하여메인메뉴처리후모습 ( 드림위버롤오버이미지사용 ) 396 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 397
웹표준방식을사용하면, 이런쓸데없는코드는제거하고, 아주깔끔하게코드를처리할수있으며심지어메인메뉴에있는텍스트도유지할수있습니다. 먼저메인메뉴부분에클래스선택자를추가해줍니다. <li class="n1"><a href="#"> 회사소개 </a></li> <li class="n2"><a href="#"> 제품정보 </a></li> <li class="n3"><a href="#"> 커뮤니티 </a></li> <li class="n4"><a href="#"> 고객지원 </a></li> 그리고 CSS에서 nav 부분에 text-indent:-9999px를적용하여텍스트들을전부감춥니다. 그후에다음과같이각클래스선택자부분에배경이미지로해당그래픽이미지를적용합니다. nav li.n1 a:hover {background:url(imgs/menu11.png) no-repeat top center; nav li.n2 a:hover {background:url(imgs/menu21.png) no-repeat top center; nav li.n3 a:hover {background:url(imgs/menu31.png) no-repeat top center; nav li.n4 a:hover {background:url(imgs/menu41.png) no-repeat top center; nav li a { padding:0; display:block; width:118px; height:20px; nav li:last-child { background:none [ 메인메뉴 HTML 코드 ] <nav> <ul> <li class="n1"><a href="#"> 회사소개 </a></li> <li class="n2"><a href="#"> 제품정보 </a></li> <li class="n3"><a href="#"> 커뮤니티 </a></li> <li class="n4"><a href="#"> 고객지원 </a></li> </ul> </nav> nav li.n1 a {background:url(imgs/menu1.png) no-repeat top center; [ 코드 14-4] 메인메뉴 CSS 를이용하여그래픽이미지로변환 그리고 nav li.n1 a:hover 상태에서다음과같이배경이미지를변경합니다. nav li.n1 a:hover {background:url(imgs/menu11.png) no-repeat top center; 그리고여기에 transition 효과를적용해보겠습니다. transition 효과를적용하면, 메인메뉴마우스오버시부드럽게이미지가변환되는효과를볼수있습니다 (IE는 이방법이필자가알려드리는가장기본적인방법중첫번째방법입니다. 소스코드 : http://localhost/yngsite/index05.php 두번째방법은그래픽이미지를 4 개를만들어서사용하는방법입니다. 효과가미미함 ). 메인메뉴가적용된 CSS 와 HTML 코드는다음과같습니다. [ 그림 14-22] 메인메뉴에사용되는 4 개의그래픽이미지 [ 메인메뉴 CSS 코드 ] nav {margin:42px 38px 0 0;font-size:1.4em;clear:right;text-indent:-9999px;width: 480px;height:20px; nav li {background:url(imgs/div_line.png) no-repeat center right nav li.n1 a {background:url(imgs/menu1.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n2 a {background:url(imgs/menu2.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n3 a {background:url(imgs/menu3.png) no-repeat top center;transition:all 0.2s ease-in-out; nav li.n4 a {background:url(imgs/menu4.png) no-repeat top center;transition:all 0.2s ease-in-out; 두번째방법도사실첫번째방법과큰차이는없습니다만, 그래픽이미지를 4개사용한다는점과첫번째방법보다더큰효과를적용할수있다는차이가있습니다. 바로 CSS 코드를확인해보면다음과같이처리하는것입니다. nav li.n1 a {background:url(imgs/m1.png) no-repeat center top; 기본상태인경우배경이미지의위치는 center top 상태입니다. 하지만마우스오버시에는 center -23px 상태입니다. nav li.n1 a:hover {background:url(imgs/m1.png) no-repeat center -23px; 398 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 399
즉마우스오버시배경이미지의상태에변화를줌으로써, 단순하게 4개의이미지로도동일한효과를낼수있다는것입니다. 여기에 transition:all 0.2s ease-inout; 효과를적용해주면, 아주큰효과를낼수있습니다. 직접한번예제파일을실행해보기바랍니다. 소스코드 : http://localhost/yngsite/index06.php 마지막세번째방법은하나의이미지를이용해서메인메뉴를만드는것입니다. 이미지파일을하나만사용하기때문에이전방법에서각메뉴에적용되었던이미지파일들을그룹선택자를이용해서다음과같이한번만사용하면됩니다. nav li.n1 a, nav li.n2 a, nav li.n3 a, nav li.n4 a, nav li.n1 a:hover, nav li.n2 a:hover, nav li.n3 a:hover, nav li.n4 a:hover { background-image:url(imgs/main_menu.png); background-repeat:no-repeat; 이제각메인메뉴에적용된클래스선택자에해당배경이미지의위치를다음과같 이적용합니다. nav li.n1 a {background-position:27px top; nav li.n2 a {background-position:-96px top; nav li.n3 a {background-position:-217px top; nav li.n4 a {background-position:-338px top; nav li.n1 a:hover {background-position: 27px -23px; nav li.n2 a:hover {background-position: -96px -23px; nav li.n3 a:hover {background-position: -217px -23px; nav li.n4 a:hover {background-position: -338px -23px; 마지막으로 transition 효과를적용합니다. nav li.n1 a, nav li.n2 a, nav li.n3 a, nav li.n4 a{transition:all 0.2s ease-inout; 이렇게처리한결과는소스코드 : http://localhost/yngsite/index07.php에서확인할수있습니다. 어떻게보면세번째방법이가장편리할수도있습니다만, 배경이미지의위치를 [ 그림 14-23] 메인메뉴에사용되는하나의그래픽이미지 하나의그래픽파일을이용할경우장점이브라우저에서여러개의파일을불어오는경우보다더빨리이미지를불러올수있으며, 한번브라우저에서로딩이된후에도아주작은차이지만, 처리속도가향상되는장점이있습니다. 그래픽파일하나만으로메인메뉴를처리하는방법도사실두번째방법과유사한방법으로처리하는것입니다. 하지만차이점은이미지파일을하나만사용한다는것입니다. 잡는번거로움이만만치않는단점이있습니다. 지금까지설명한세가지방법을적절히이용하면, 책의예제보다더멋진효과를구현할수있습니다. 직접여러분들이한번씩예제를기반으로더많은연습을해보기바랍니다. 이제 jquery를이용해서슬라이더이미지부분을처리해보도록하겠습니다. 슬라이더이미지부분은 3부 2장 jquery에서소개했던 Nivo Slider를이용하도록하겠습니다. 400 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 401
Nivo Slider 는사용법도편리하고, 세계적으로가장많이사용되는 jquery 슬라이 이렇게처리하면다음과같은결과를얻을수있습니다. 더중하나입니다. Nivo Slider는 http://dev7studios.com/nivo-slider/ 에서다운받을수있습니다. 다운받은 Nivo Slider 패키지의압축을풀어 scripts 폴더에는 jquery.nivo.slider.js 파일을 css 폴더에는 nivo-slider.css 파일및 themes라는폴더를넣어줍니다. 그리고 index.php 파일에해당효과를적용해주면됩니다. 먼저 Nivo Slider를구동시키는두개의 CSS 파일을 link 속성을이용해넣어줍니다. <link href="css/themes/default/default.css" rel="stylesheet" type="text/css"> <link href="css/nivo-slider.css" rel="stylesheet" type="text/css"> 그리고 Nivo Slider가들어가는부분에는다음과같은선택자를추가하고 4개의이미지파일을넣어줍니다. <div class="slider-wrapper theme-default"> <div id="slider" class="nivoslider"> <img src="imgs/slider1.jpg" width="943" height="401"> <img src="imgs/slider2.jpg" width="943" height="401"> <img src="imgs/slider3.jpg" width="943" height="401"> <img src="imgs/slider4.jpg" width="943" height="401"> 마지막으로 Nivo Slider를구동하게해주는 jquery와 Nivo Slider 스크립트파일을넣어줍니다. 여기서 jquery 는 CDN 을이용, 항상최신버전의 jquery 를호출하게처리하겠습니다. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></ script> <script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoslider(); ); </script> [ 그림 14-24] Nivo Slider 를이용한슬라이더부분 _ http://localhost/yngsite/index08.php HTML 구조에서슬라이더이미지가끝나부분에 <div class="clear"> 를추가 하여확실하게구분을합니다. 이제슬라이더하단에배치된 Just Arrived 부분에대해서처리해보겠습니다. 이부분은단순한구조를지녔습니다. 먼저 HTML 구성부터살펴보겠습니다. <div id="justar"> <h3>just arrived</h3> <figure><img src="imgs/goods1.jpg" width="161" height="125"></figure> #justar라는아이디선택자로박스를만들고내부에는 h3 태그를이용하여제목을 figure 태그로이미지를감싼형태입니다. CSS를이용해서디자인을잡습니다. 현재 Just Arrived 라는텍스트는 Droid Sans 라는공개폰트를사용하고있는데, 직접웹폰트로변환해도되고, 아니면 google fonts 서비스를이용해도됩니다 (http://www.google.com/fonts/). 이책에서는 google fonts 서비스를이용하도록하겠습니다. 402 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 403
google fonts 서버스를이용하는방법은상당히간단합니다. 해당폰트가들어있는 css 파일을링크형식으로 HTML 파일내부에넣어줍니다. <link href='http://fonts.googleapis.com/css?family=droid+sans' rel='stylesheet' type='text/css'> 그리고해당폰트가사용되는선택자에 "font-family: 'Droid Sans', sans-serif;" 를적용해주면됩니다. 이제 justar 부분에대한 CSS 파일을확인해보겠습니다. #justar { margin:0 0 0 20px; /* 왼쪽부분여백 20픽셀 */ float:left; /* 왼쪽으로배치 */ width:200px; /* 박스크기 200픽셀 */ #justar h3 { text-transform:capitalize; /* 영문첫글자만대문자로 */ background:url(imgs/h3_under.jpg) no-repeat left bottom; /* 백그라운드이미지를이용하여제목부분장식추가 */ padding:0 0 8px 5px; /* 패딩으로왼쪽과하단부분공간적용 */ font-family: 'Droid Sans', sans-serif; /* 구글폰트사용 */ font-weight:normal; /* h로시작하는태그는전부 bold 속성을지니기때문에폰트두께를 normal 로설정 */ font-size:1.1em; #justar figure { text-align:center; /* text-align은글자뿐만아니라그림도정렬됨, 중앙정렬 */ padding-top:10px; /* 위쪽부분패딩이용 10픽셀공간적용 */ [ 그림 14-25] Just Arrived 부분작업, <div class="clear"> 적용전 : 왼쪽, 적용후 : 오른쪽 http://localhost/yngsite/index09.php 여기서잠깐사이트제작시코드및영문텍스트는소문자로영문텍스트인경우소문자로만드는것이좋습니다. HTML 코딩및 CSS 코딩에서도소문자가편리하고 HTML 코드및텍스트인경우에도소문자를사용하는것이에러를줄이는방법이기도합니다. 또한 HTML 문서내부에있는영문이소문자이면 CSS에서 text-transform 속성을이용하여대문자또는단어의첫글자만대문자로변환가능하기때문입니다. 이제화면중앙에있는 Notice와 News 부분을처리하도록하겠습니다. 이부분은 tab 메뉴처리가되어있는데, 가장많이사용하는효과중하나입니다. 이부분또한 jquery를이용해서처리하도록하겠습니다. jquery 소스는 http://www. htmldrive.net/items/show/542/simple-tabs-w-css-jquery에서참조합니다. 여기까지 HTML과 CSS를적용한결과는 [ 그림 14-23] 에서보실수있습니다. 하지만여기서조금이상한것이 Just Arrived 부분에는배경색상이제대로적용되지않고슬라이드이미지까지만적용된것을알수있습니다. 이부분은단순하게 <div class="clear"> 으로다시닫아주면문제가해결됩니다 ( 그림 14-25 우측그림참조 ). [ 그림 14-26] Simple Tabs w/ CSS & jquery 404 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 405
해당소스파일을다운로드하진마시고, 책에있는설명만보시면됩니다 (^^). 왜냐하면소스파일에는특별한소스가있는것이아니고 jquery 파일만있습니다. 먼저탭메뉴가들어가는부분은 #notinews라고정의한다고했습니다. 따라서 HTML 문서에는다음과같이설정합니다. <div id="notinews"> <!-- 탭부분전체를감싸는아이디선택자 --> <div class="container"> <ul class="tabs"> <!-- 탭부분제목 --> <li><a href="#tab1">notice</a></li> <li><a href="#tab2">news</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!-- 각탭의내용 --> <ul> <li><a href="#"> 여기는공지사항이들어가는곳입니다.</a></li>... 중략... </ul> <div id="tab2" class="tab_content"> <!-- 각탭의내용 --> <ul> <li><a href="#"> 여기는뉴스가들어가는곳입니다.</a></li>... 중략... </ul> HTML 코드만으로는 [ 그림 14-27] 과같은결과를얻습니다. [ 그림 14-27] 단순한 HTML 구조로본 tab 메뉴 이제 Simple Tabs w/ CSS & jquery 에서제공되는 CSS 속성을적용해보겠습니다. 원본파일에서디자인적으로불필요한부분은실제코드에서는주석처리하겠으며, 책에서는주석처리및취소선으로표시하겠습니다. /*.container {width: 500px; margin: 10px auto;*/ /* 원본박스제거 */ #notinews { /* Notice 와 News 박스처리.container 대체함. */ width: 350px; /* 크기 350픽셀로고정 */ float:left; /* 왼쪽정렬 */ margin-left:80px; /* 왼쪽으로마진 80픽셀적용 */ ul.tabs { /* Notice 와 New 탭부분 ul 처리 */ margin: 0; padding: 0; float: left; list-style: none; height: 24px; /* 탭부분전체높이설정 - 다음페이지 < 여기서잠깐 > 참조 */ border-bottom: 1px solid #999; /* 제목부분밑줄적용 */ border-left: 1px solid #999; /* ul 부분왼쪽에만선적용 */ width: 100%; font-family: 'Droid Sans', sans-serif; ul.tabs li { float: left; margin: 0; padding: 0; /*height: 31px;*/ height:23px; /* 리스트에서는 1픽셀작은값적용 - 다음페이지 < 여기서잠깐 > 참조 */ /*line-height: 31px;*/ line-height: 21px; border: 1px solid #999; /* 전체선적용 */ border-left: none; /* ul에서선이적용되어여기서선을제거함 */ margin-bottom: -1px; /* 여기서 li 부분을 1픽셀끌어내림 - 다음페이지 < 여기서잠깐 > 참조 */ background: #F6F6F6; overflow: hidden; position: relative; ul.tabs li a { text-decoration: none; color: #000; display: block; padding: 0 20px; border: 1px solid #fff; outline: none; 406 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 407
ul.tabs li a:hover { background: #ccc; html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; /* active 상태일때밑줄흰색처리 */.tab_container { /*border: 1px solid #999; */ / * 원래는전체박스에선처리되어있음 */ border-top: none; / * 디자인을위해내용부분선제거 */ clear: both; float: left; width: 300px; background: #fff; /* -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;*/.tab_content { /* padding: 20px; font-size: 1.2em;*/ padding: 20px 10px; font-size: 1.1em; /*.tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em;.tab_content h3 a{ color: #254588;.tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; */.tab_container ul { list-style:none;.tab_container ul li { line-height:1.7em; background:url(imgs/bullet.gif) no-repeat left 10px; padding-left:10px; 여기서잠깐탭메뉴모양설정탭메뉴의높이는 ul.tabs에서 24픽셀로설정되어있고 ul.tabs li에서는 23픽셀로설정되어있으며, margin-bottom: -1px; 를이용최종적으로 24픽셀로세팅이되어있습니다. 왜이렇게처리하는가하면 ul.tabs에설정된 border-bottom: 1px solid #999; 속성과선의높이를맞추기위함입니다. 만약 ul.tabs와 ul.tabs li의높이를동일하기 24px로설정하고 marginbottom: -1px; 을적용하지않으면다음과같은현상이벌어집니다. 이런현상을방지하기위해 ul.tabs와 ul.tabs li의높이를 1픽셀정도의차이를준후 margin-bottom: -1px 이용높이를맞춰주는것입니다. 탭과 border-bottom 높이가일치하지않음 ul.tabs에는 height: 24px; ul.tabs li에는 height:24px; 적용시모습 ul.tabs에는 height: 24px; ul.tabs li에는 height:23px; 와 margin-bottom: -1px; 적용후 [ 그림 14-28] 탭메뉴모양설정을위한 CSS 속성현재 CSS만설정한상태에서는다음과같은결과를얻을수있습니다. [ 그림 14-29] jquery 적용전 HTML과 CSS만설정해준상태 408 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 409
여기서 jquery 를이용하여첫부분즉 Notice 는보여주고 News 부분은감춘상태로 그리고 tab 을클릭하면해당탭이활성화되는코드를입력하겠습니다. 현재 HTML 문서맨마지막부분에다음의코드를입력합니다. $(document).ready(function() { // 문서준비단계 //Default Action $(".tab_content").hide(); // 콘텐츠전부감춤 $("ul.tabs li:first").addclass("active").show(); // 첫번째탭활성화 $(".tab_content:first").show(); // 첫번째탭보여줌 $("ul.tabs li").click(function() { // 해당탭을클릭했을때이벤트 $("ul.tabs li").removeclass("active"); // 클래스선택자 active 제거 $(this).addclass("active"); // 선택한탭에 "active" 클래스선택자추가 $(".tab_content").hide(); // 모든탭콘텐츠감춤 var activetab = $(this).find("a").attr("href"); // 변수 activetab에는 active 탭과컨텐츠부분을식별하는값적용 $(activetab).fadein(); // 탭클릭시 activetab( 활성탭과내용부분 ) 페이드인효과 return false; ); ); <div id="social"> <h3>social network</h3> <ul> <li><a href="#"><img src="imgs/icon1.png" alt="facebook"></a></li> <li><a href="#"><img src="imgs/icon2.png" alt="twitter"></a></li>... 중략... </ul> HTML 문서로만구성된상태에서는다음과같은결과를얻을수있습니다. 이렇게 jquery 를적용해주면 [ 그림 14-30] 의결과를얻을수있습니다. [ 그림 14-31] 리스트태그만적용했을경우 Social Network 부분 이제여기에 CSS 를적용하도록하겠습니다. [ 그림 14-30] 완성된 tab 메뉴 _ http://localhost/yngsite/index10.php 이제 social network 부분에대한작업을진행해보겠습니다. 이부분은제목을제외하고는이미지파일로처리되어있습니다. 여기는사이트의로고및메인메뉴와는달리실제아이콘을삽입하는것이좋습니다. 이부분은 #social이라는아이디선택자를이용해서박스모델을구성하겠습니다. 또한모든아이콘들을리스트태그를이용해서정렬하도록하겠습니다. HTML 태그구성은다음과같습니다. #social { float:right; /* 박스를오른쪽정렬합니다. */ margin:0 30px 0 0; /* 박스오른쪽여백을설정합니다. */ width: 180px; /* social 박스의크기를정해줍니다. 박스의크기를정해주면왼쪽으로 float된아이콘들이박스크기에맞게정렬됩니다. */ #social h3 { /* social 제목설정부분 */ padding:0 0 15px 0; font-family: 'Droid Sans', sans-serif; font-weight:normal; font-size:1.1em; text-transform:capitalize; #social ul {list-style:none; /* 리스트스타일제거 */ #social ul li {float:left;margin:5px; /* li float 적용하여좌우로배치, 각 li 별마진은 5픽셀적용 */ 410 PART_3 웹표준사이트개발 chapter_14 사이트제작전준비작업및프론트페이지제작 411