반응형
SMALL
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout01</title> <style> body {background: #c8e6c9;} #wrap {width: 1000px; height: 900px; margin: 0 auto; color: #fff; font-size: 40px; text-align: center;} #header {width: 1000px; height: 100px; line-height: 100px; background: #2e7d32;} #nav {width: 1000px; height: 100px; line-height: 100px; background: #388e3c; } #side {float: left; width: 300px; height: 600px; line-height: 600px; background: #43a047;} #contents {float: left; width: 700px; height: 600px; line-height: 600px; background: #4caf50;} #footer {float: left; width: 1000px; height: 100px; line-height: 100px; background: #66bb6a;} </style> </head> <body> <div id="wrap"> <div id="header">HEADER</div> <div id="nav">NAV</div> <div id="side">SIDE</div> <div id="contents">CONTENTS</div> <div id="footer">FOOTER</div> </div> </body> </html> |
반응형
LIST
'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글
| 웹 표준 사이트 만들기 6강 (0) | 2022.12.29 |
|---|---|
| 웹 표준 사이트 만들기 5강 (2) | 2022.12.29 |
| 웹 표준 사이트 만들기 4강 (0) | 2022.12.28 |
| 웹 표준 사이트 만들기 3강 (0) | 2022.12.28 |
| 웹 표준 사이트 만들기 2강 (0) | 2022.12.28 |
