예제 3-1. 구조화된 HTML5 문서 작성
WEB/HTML5-CONCEPT 2017. 11. 4. 18:40 |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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 문서 구조 시맨틱 태그 사용</title> <style> html, body { margin: 0; padding: 0; height: 100%; } .header { width: 100%; height: 15%; background: yellow; } .nav { width: 15%; height: 70%; float: left; background: orange; } .section { width: 70%; height: 70%; float: left; background: olivedrab; } .aside { width: 15%; height: 70%; float: left; background: orange; } .footer { width: 100%; height: 15%; clear: both; background: plum; } </style> </head> <body> <header class="header">header</header> <nav class="nav">nav</nav> <section class="section">section</section> <aside class="aside">aside</aside> <footer class="footer">footer</footer> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 그림 2-4. P94 만들어보기. 브라우저 윈도우와 프레임 윈도우 사이의 계층 관계. (0) | 2017.11.04 |
|---|---|
| 예제 3-2. <figure> 태그 활용 (1) | 2017.11.04 |
| 예제 2-26. <audio> 태그로 오디오 삽입, <source> 태그 (0) | 2017.11.04 |
| 예제 2-25. <video> 태그로 비디오 삽입, <source> 태그 (0) | 2017.11.04 |
| 예제 2-24. target 속성으로 프레임 윈도우 활용 (0) | 2017.11.04 |