-
[BootStrap] 택배회사 메인 페이지 만들기개발 여정/FrontEnd 2021. 9. 9. 18:59
<!DOCTYPE html> <html> <head><title>MD택배에 오신 것을 환영합니다.</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 class="d-flex align-items-center"> <div class="col-3 logo text-info text-left"><h2><b>MD 택배</b></h2></div> <nav class="col-9"> <ul class="nav d-flex nav-fill w-100"> <li class=col-3><a href="#" class="text-info menu"><b>회사 소개</b></a></li> <li class=col-3><a href="#" class="text-info menu"><b>기업 택배</b></a></li> <li class=col-3><a href="#" class="text-info menu"><b>개인 택배</b></a></li> <li class=col-3><a href="#" class="text-info menu"><b>고객센터</b></a></li> </ul> </nav> </header> <section class="d-flex"> <section class="col-6"> <img src="https://cdn.pixabay.com/photo/2017/08/27/21/20/box-2687558_960_720.png" alt="택배" width="380" height="380"> </section> <section class="col-6 ml-5 mt-4"> <article class="ml-2"><h3>물류를 선도하는</h3></article> <article class="text-info text-center"><h2><b>MD택배</b></h2></article> <div class="block"></div> <article class="mt-3">운송장 조회</article> <input type="text" class="input w-100 mt-2"> <div class="text-right mt-2"> <button type="button" class="btn btn-info">조회</button> </div> </section> </section> <footer class="d-flex mt-3"> <div class="col-2"><h3>MD택배</h3></div> <address class="col-8 text-center">Copyright ⓒ All Rights Reserved.</address> <div class="col-2"><b>고객센터:</b><br> 02-000-0000 </div> </footer> </div> </body> </html>CSS
#wrap{width: 1000px;} .d-flex{display: flex;} header{height: 100px;} .nav .menu:hover{text-decoration: none; color:aquamarine;} section{height: 400px;} .block{height: 30px;} footer{height: 100px;}* 포인트
1. 메뉴 hover 기본 데코레이션 없애기
: .menu:hover{text-decoration: none}
2. input 가로길이 섹션 너비 만큼
: input class = "w-100"
3. 오른쪽으로 위치시키기
: class="text-right" (text뿐만 아니라 다른 요소들도 이동 가능)
'개발 여정 > FrontEnd' 카테고리의 다른 글
[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 [HTML/CSS] 가계부 만들기 (0) 2021.09.09