-
[Bootstrap] 너튜브 메인 페이지 만들기개발 여정/FrontEnd 2021. 9. 9. 19:12
HTML
<!DOCTYPE html> <html> <head><title>iTube</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="youtube_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 justify-content-around"> <div class="logo col-2"> <h1 class="text-danger"><b>iTube</b></h1> </div> <div class="search col-8 d-flex justify-content-center"> <div class="input-group col-8"> <input type="text" class="form-control"> <div class="button input-group-prepend"> <button class="btn">조회</button> </div> </div> </div> <div class="member col-2 d-flex mr-5"> <div>Calm Lee</div> <a href="#" class="log-out ml-3">로그아웃</a> </div> </header> <section class="d-flex"> <aside class="menu"> <nav class="side-menu"> <ul class="nav flex-column"> <li class="nav-item mt-2"><a href="#" class="menu-text">추천 동영상</a></li> <li class="nav-item mt-2"><a href="#" class="menu-text">탐색</a></li> <li class="nav-item mt-2"><a href="#" class="menu-text">시청기록</a></li> <li class="nav-item mt-2"><a href="#" class="menu-text">나중에 볼 동영상</a></li> </ul> </nav> </aside> <section class="contents"> <article class="videos d-flex flex-wrap"> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail1.jpg"> <div><b>[직캠] 잇츠원 유태양 ♬왕과비</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail2.jpg"> <div><b>[직캠] 아이즈원 권은비 ♬Panorama</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail3.jpg"> <div><b>[직캠] 스트레이 키즈 리노 ♬미친놈</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail4.jpg"> <div><b>[직캠] 아이즈원 장원영 ♬Panorama</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail5.jpg"> <div><b>[직캠] NCT DREAM 제노 ♬맛(Hot Sauce)</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> <div class="video"> <img src="http://marondal.com/material/images/dulumary/web/front/bootstrap/test06_thumbnail6.jpg"> <div><b>[직캠] 아이즈원 미야와키 사쿠라 ♬Panorama</b></div> <div class="description">N net</div> <div class="description">조회수: 80만회 1개월 전</div> </div> </article> </section> </section> <footer class="d-flex justify-content-center align-items-center"> <div class="copyright">Copyright 2021. All rights reserved.</div> </footer> </div> </body> </html>CSS
#wrap{width: 1200px; margin: auto;} .d-flex{display: flex;} .auto {overflow: auto;} header{width: 1200px; height: 100px;} .log-out{color:black;} .log-out:hover{text-decoration:none; color:black; font-weight: bolder;} section{height: 500px;} section > .menu{width: 200px;} .nav .nav-item:hover{background-color: dimgray;} .menu-text{color:black; font-weight: bolder;} .menu-text:hover{text-decoration:none; color:black; font-weight: bolder;} .description{color:grey; font-size: 12px;} section > .contents{width: 1000px; background-color: rgb(241, 241, 241);} .video{width: 300px; margin: 3px;} footer{height: 100px;} .copyright{font-size: 14px;}*포인트
1) input 크기 조절 : div로 감싼 뒤 해당 div col-num 태그로 조절
2) 세로 메뉴 정렬 : flex-column
3) 메뉴 li 에 hover background 입힐 때
: 위치 명시 해줘야 함 (위치 명시 안 할 경우 안 먹히거나 바 전체에 먹힘)
ex) .contents > aside .nav-item:hover{background-color: gray;}
4) 이미지 블록 크기 안 정해줄 시 이미지나 글자 이탈할 수 있음
'개발 여정 > FrontEnd' 카테고리의 다른 글
개발자 선호도 프레임워크 1위, Svelte (0) 2022.09.16 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