서비스화면 :
오늘 다룰 내용은 유튜브 카피캣이다.
우선 전체적인 서비스화면을 어떻게 구성할지 생각해보자.
지금 현재 header부분과 left-area영역은 fixed속성을 적용해야한다. 그렇다면 main-content영역은 position:abs를 사용해서 전체 영역을 만들어야 한다.
-
html :
-
css :
코드리뷰 :
기본적인 css를 작성했다.
코드리뷰 :
a. #youtube-top-nav .nav-center :
position: absolute; (부모 속성이 3차원)
left: 50%; / transform: translateX(-50%);
b. #youtube-top-nav .nav-center .search-wrap :
width: 640px; / height: 30px;
c. #youtube-top-nav .nav-center .search-wrap input :
width: calc(100% - 65px); / height: 30px;
border: solid 1px grey; / background-color: #212121; / color: #ffffff; / padding: 2px 6px; / font-size: 14px;
d. #youtube-top-nav .nav-center .search-wrap .btn-search :
width: 65px; / height: 30px; / border: solid 1px grey; / background-color: grey;
e. #youtube-top-nav .nav-center .btn-voice :
width: 24px; / height: 24px; / margin-left: 16px;
