*tip*
-전체적 쓰임은 id
-세부적 쓰임은 class
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>layout07</title> <style> /* 리셋 */ * {margin: 0; padding: 0;} /* 전체 레이아웃 */ #wrap {font-size: 20px; color: #fff; text-align: center;} #header {height: 140px; } #banner {height: 450px; background: #4dd0e1;} #contents {height: 950px;} #footer {height: 220px;} /* 레이아웃 */ #header-top {height: 70px; line-height: 70px; background: #b2ebf2;} #header-nav {height: 70px; line-height: 70px; background: #80deea;} #content1 {height: 90px; line-height: 90px; background-color: #26c6da;} #content2 {height: 480px; line-height: 480px; background-color: #00bcd4;} #content3 {height: 380px; line-height: 380px; background-color: #00acc1;} #footer-nav {height: 60px; line-height: 60px; background-color: #0097a7;} #footer-info {height: 160px; line-height: 160px; background-color: #00838f;} /* 컨테이너 */ .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 id="header-top"> <div class="container">header-top</div> </div> <div id="header-nav"> <div class="container">header-nav</div> </div> </div> <!-- //header --> <div id="banner"> <div class="container">banner</div> </div> <!-- //banner --> <div id="contents"> <div id="content1"> <div class="container">content1</div> </div> <div id="content2"> <div class="container">content2</div> </div> <div id="content3"> <div class="container">content3</div> </div> </div> <!-- //contents --> <div id="footer"> <div id="footer-nav"> <div class="container">footer-nav</div> </div> <div id="footer-info"> <div class="container">footer-info</div> </div> </div> <!-- //footer --> </div> <!-- //wrap --> </body> </html> |
'웹 표준 사이트 만들기 > 레이아웃 구조 실습' 카테고리의 다른 글
| 웹 표준 사이트 만들기 9강 (2) | 2022.12.30 |
|---|---|
| 웹 표준 사이트 만들기 8강 (0) | 2022.12.29 |
| 웹 표준 사이트 만들기 6강 (0) | 2022.12.29 |
| 웹 표준 사이트 만들기 5강 (2) | 2022.12.29 |
| 웹 표준 사이트 만들기 4강 (0) | 2022.12.28 |
