728x90
반응형
HTML과 CSS를 활용한 홈 페이지 부분 만듦
header, nav, main, banner, footer로 파트 나눔
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>웹 페이지</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="webPage.css"> </head> <body> <div class="fullscreen"> <div class="wrap"> <div class="header"> Header </div> <div class="nav"> Nav </div> <div class="main"> <div class="section"> <div class="section1"> section1 </div> <div class="section2"> section2 </div> <div class="section3"> section3 </div> </div> <div class="sub"> <div class="login">login</div> <div class="banner1">banner1</div> </div> </div> <div class="banner2"> banner2 </div> <div class="footer"> Footer </div> </div> </div> </body>CSS를 통해 각각의 높이와 넓이를 구성
@charset "UTF-8"; body{ margin: 0; padding: 0; text-align: center; } .fullscreen{ width: 100%; height: 100vh; } .wrap{ width: 100%; height: 100%; margin: 0 auto; } .header{ width: 100%; height: 15%; font-size: 30px; color: white; background: black; line-height: 150px; } .nav{ width: 100%; height: 5%; font-size: 15px; color: white; background: gray; line-height: 55px; } .main{ display: flex; flex-wrap: wrap; background: green; height: 55%; align-content: stretch; } .section{ width: auto; flex: 1 1 50%; align-content: stretch; display: flex; flex-wrap: wrap; flex-direction: row; background: blue; } .section1{ flex: 1 1 40%; font-size: 15px; color: black; background: white; } .section2{ flex: 1 1 40%; font-size: 15px; color: white; background: black; } .section3{ flex: 1 1 100%; font-size: 15px; color: black; background: white; } .sub{ width: auto; flex: 1 1 30%; font-size: 15px; color: black; background: yellow; align-content: stretch; display: flex; flex-wrap: wrap; flex-direction: row; } .login{ flex: 1 1 60%; background: orange; } .banner1{ flex: 1 1 20%; background: blue; } .banner2{ width: 100%; height: 15%; font-size: 20px; color: white; background: purple; line-height: 110px; } .footer{ height: 10%; font-size: 20px; color: white; background: red; line-height: 1; line-height: 90px; }<완성본>
728x90
반응형
'Project Development > Java_programming' 카테고리의 다른 글
| 아이디 찾기 - DB 연결 (0) | 2021.12.15 |
|---|---|
| 회원가입 - DB 연결 (0) | 2021.12.14 |
| 쇼핑몰 홈페이지 (0) | 2021.12.14 |
| 회원가입 페이지 (0) | 2021.12.14 |
| 로그인 페이지 (0) | 2021.12.14 |
댓글