반응형
SMALL
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout03</title> <style> body {background: #d1c4e9;} #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color:#fff; text-align: center; text-transform: uppercase;} .side {float: left; width: 300px; height: 900px; line-height: 900px; background-color: #4527a0;} .header {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #512da8;} .contents {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #5e35b1;} .footer {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #673ab7;} </style> </head> <body> <div id="wrap"> <div class="side">side</div> <div class="header">header</div> <div class="contents">contents</div> <div class="footer">footer</div> </div> </body> </html> |
반응형
LIST
'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글
| 웹 표준 사이트 만들기 6강 (0) | 2022.12.29 |
|---|---|
| 웹 표준 사이트 만들기 5강 (2) | 2022.12.29 |
| 웹 표준 사이트 만들기 4강 (0) | 2022.12.28 |
| 웹 표준 사이트 만들기 2강 (0) | 2022.12.28 |
| 웹 표준 사이트 만들기 1강 (0) | 2022.12.27 |
