| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>layout06</title> <style> * {margin: 0; padding: 0;} #wrap {text-align: center; font-size: 30px; color: #fff;} #header {height: 140px; line-height: 140px; background: #ffe1e4;} #banner {height: 450px; line-height: 450px; background: #fbd6e3;} #contents {height: 950px; line-height: 950px; background: #ead5ee;} #footer {height: 220px; line-height: 220px; background: #d6ebfd;} .container {width: 1100px; margin: 0 auto; height: inherit; background: rgba(0,0,0,0.3);} </style> </head> <body> <div id="wrap"> <div id="header"> <div class="container">header</div> </div> <div id="banner"> <div class="container">banner</div> </div> <div id="contents"> <div class="container">contents</div> </div> <div id="footer"> <div class="container">footer</div> </div> </div> </body> </html> |
'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글
| 웹 표준 사이트 만들기 8강 (0) | 2022.12.29 |
|---|---|
| 웹 표준 사이트 만들기 7강 (0) | 2022.12.29 |
| 웹 표준 사이트 만들기 5강 (2) | 2022.12.29 |
| 웹 표준 사이트 만들기 4강 (0) | 2022.12.28 |
| 웹 표준 사이트 만들기 3강 (0) | 2022.12.28 |
