-
[BootStrap] 의류 쇼핑몰 메인 페이지 만들기개발 여정/FrontEnd 2021. 9. 9. 19:07
HTML
<!DOCTYPE html> <html> <head><title>The Man</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="quiz01_style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div id="wrap" class="container"> <!--Header--> <header class="d-flex"> <!--검색영역--> <div class="search d-flex align-items-end"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-prepend"> <button class="btn text-dark">검색</button> </div> </div> </div> <!--로고영역--> <div class="logo text-center d-flex align-items-end justify-content-center"> <div> <div class="the-man"><H2>The Man</H2></div> <div class="the-man">for men</div> </div> </div> <!--상단메뉴--> <nav class="top-menu d-flex align-items-end text-right"> <ul class="nav d-flex nav-fill w-100"> <li class="nav-item"><a href="#" class="menu-text">로그인</a></li> <li class="nav-item"><a href="#" class="menu-text">회원가입</a></li> <li class="nav-item"><a href="#" class="menu-text">고객센터</a></li> <li class="nav-item"><a href="#" class="menu-text">장바구니</a></li> </ul> </nav> </header> <!--중간메뉴--> <nav class="menu d-flex align-items-center mt-3"> <ul class="nav nav-fill w-100 d-flex"> <li class="nav-item"><a href="#" class="menu-font">Outer</a></li> <li class="nav-item"><a href="#" class="menu-font">Top</a></li> <li class="nav-item"><a href="#" class="menu-font">Shirt</a></li> <li class="nav-item"><a href="#" class="menu-font">Pants</a></li> <li class="nav-item"><a href="#" class="menu-font">Accessory</a></li> </ul> </nav> <!--배너사진--> <section class="banner text-center"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_main_banner.jpg" alt="main-image" width="1200px;"> </section> <!--상품정보--> <section class="product mt-4"> <div><H3>Best Seller</H3></div> <section class="products d-flex justify-content-between"> <article> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_best1.jpg"> <div class="mt-2"><b>리얼가죽무스탕</b></div> <div class="text-secondary"><del>87,000원</del></div> <div>55,000원</div> </article> <article> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_best2.jpg"> <div class="mt-2"><b>[1+1] 기본 버튼 반팔티</b></div> <div class="text-secondary"><del>15,000원</del></div> <div>7,000원</div> </article> <article> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_best3.jpg"> <div class="mt-2"><b>정장 스타일 무지 조끼</b></div> <div class="text-secondary"><del>45,000원</del></div> <div>40,000원</div> </article> <article> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_best4.jpg"> <div class="mt-2"><b>스키니핏 씨블루 정장 자켓</b></div> <div class="text-secondary"><del>53,000원</del></div> <div>45,000원</dv> </article> <article> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test05_best5.jpg"> <div class="mt-2"><b>프리미엄 올라운드 데님셔츠</b></div> <div class="text-secondary"><del>33,000원</del></div> <div>30,000원</dv> </article> </section> </section> <footer class="text-center mt-5"> <div class="text-secondary"><small>회사: 더맨 컴패니</small></div> <div class="text-secondary"><small>대표: 플럼 리</small></div> <div class="text-secondary"><small>주소: 서울특별시 강남구 신사동</small></div> <div class="text-secondary"><small>Copyright 2021. The Man All Rights Resereved.</small></div> </footer> </div> </body> </html>CSS
#wrap{width: 1200px;} header{width: 1200px; height: 100px;} .search{width: 300px; height: 100px;} .logo{width: 600px; height: 100px;} .the-man{color: rgb(66, 62, 62)} .top-menu{width: 300px; height: 100px;} .menu-text{font-size: 15px; color:#888} .menu-text:hover{text-decoration: none; color:dimgray} .menu{width: 1200px; height: 50px; background-color: rgb(199, 199, 199);} .menu-font{font-size: 20px; color: rgb(66, 62, 62); font-weight: bolder;} .menu-font:hover{text-decoration: none; color: black;} .banner{height: 400px;} .product{width:1200px; height: 400px;} footer{height: 100px;}*포인트
1) 검색 영역 (input, button)
- input-group으로 input, button 한 데 묶음
- class="input-group-prepend" : **input 옆에 button이 붙도록 함.
2) d-flex align-items-end : 글자가 수직 상 밑으로
3) 각 상품 정보 : article로 구역 나눈 후 d-flex justify-between으로 위치 조정
'개발 여정 > FrontEnd' 카테고리의 다른 글
VS code 유용한 extension (0) 2022.03.20 [Bootstrap] 너튜브 메인 페이지 만들기 (0) 2021.09.09 [BootStrap] 택배회사 메인 페이지 만들기 (0) 2021.09.09 [BootStrap] 레이아웃 구조 (2) :: d-flex 이용해서 header, section, footer 나누기 (0) 2021.09.09 [BooStrap] 레이아웃 구조 (1) :: d-flex 이용해서 header, footer 나누기 (0) 2021.09.09