■ 기본 구조에 CSS 디자인을 적용하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { background-color : #5b5c58; font-family : Calibri, Verdana, Arial, sans-serif; font-size : 14px; } header, footer, nav, article, section, aside { width : 100%; margin-top : 2px; margin-bottom : 2px; display : inline-block; } header { background : url(sunset.jpg); background-repeat : no-repeat; background-size : 100% 100%; } header, footer { -moz-border-radius : 12px; -webkit-border-radius : 12px; border-radius : 12px; background-color : #d2ffda; } nav { background-color : #f0f8ff; } aside { height : 130px; background-color : #7b7c78; } section { background-color : white; } section p { margin : 0px 20px 0px; } footer { height : 30px; text-align : center; } #menu { font : 13pt Arial; } #navigation_bar li { list-style : none; float : left; } #navigation_bar li a { padding : 3px 8px; text-decoration : none; display : block; } #navigation_bar li:hover .submenu { position : absolute; margin : 0; padding : 0; display : block; } #navigation_bar li:hover li { float : none; background-color : #ffff99; } .submenu { display : none; } .submenu a:hover { background-color : #ccff99; } #gallery ul li { list-style : none; display : inline-table; padding : 10px; } #gallery ul li .big_image { position : absolute; width : 0px; opacity : 0; -o-transition : all 0.6s linear; -webkit-transition : all 0.6s linear; } #gallery ul li:hover .big_image { position : absolute; width : 320px; opacity : 1; float : right; } </style> </head> <body> <header> <hgroup> <h1 style="margin:5px;">헤더 1</h1> <h2 style="margin:5px; color:white;">서브 헤더 2</h2> </hgroup> </header> <nav> <div id="menu"> <ul id="navigation_bar"> <li> <a href="#">메뉴 1</a> <ul class="submenu"> <li><a href="#">메뉴 1-1</a></li> </ul> </li> <li> <a href="#">메뉴 2</a> <ul class="submenu"> <li><a href="#">메뉴 2-1</a></li> <li><a href="#">메뉴 2-2</a></li> </ul> </li> <li><a href="#">메뉴 3</a></li> </ul> </div> </nav> <aside> <div id="gallery"> <ul> <li> <img class="big_image" src="apple.jpg" /> <img class="small_image" width="80" height="100" src="apple.jpg" /> </li> <li> <img class="big_image" src="rocks.jpg" /> <img class="small_image" width="80" height="100" src="rocks.jpg" /> </li> </ul> </div> </aside> <section> <h1>섹션 1</h1> <article> <p> 신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다. 새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다. 3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다. 같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다. 그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다. 소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다. 소녀의 말에 너틀은 이 집에 방문한 것을 후회했다. 잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다. 그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다. </p> </article> </section> <section> <h1>섹션 2</h1> <article> <p> 신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다. 새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다. 3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다. 같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다. 그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다. 소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다. 소녀의 말에 너틀은 이 집에 방문한 것을 후회했다. 잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다. 그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다. </p> </article> </section> <footer> 대표전화 : 02-1234-5678 | 팩스 02-1234-5678 | 이메일 : abc@abcd.com </footer> </body> </html> |
