Day 44. 유튜브 상단 영역 1
08월 26일
1. 학습 내용
css 초기화
* {
margin: 0;
padding: 0;
box-sizing: border-box;}
html, body {
width: 100%;
height: 100%;}
ol, ul {
list-style: none;}
a {
text-decoration: none;}
img {
vertical-align: middle;}
button {
background-color: transparent;
border: none;}
input {
outline: none;
border: none;}
input:focus {
outline: none;}
기본 틀 / 상단 설계도면
HTML
<div class="nav-center flex-align-start">
<div class="search-wrap flex-align-start">
<input type="text" placeholder="검색">
<button type="button" class="btn-search"></button>
</div>
<button class="btn-voice"></button>
</div>
<div class="nav-right flex-align-end">
<button type="button" class="btn-menu btn-menu1"></button>
<button type="button" class="btn-menu btn-menu2"></button>
<a href="#" class="btn-login">로그인</a>
</div>
</div>
</nav>
<nav id="youtube-left-nav">
<div id="youtube-left-content">
</div>
</nav>
<main id="youtube-main" role="main">
</main>
</div>CSS
/ 공통 /
.flex-align-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;}
.flex-align-start {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;}
.flex-align-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;}
- 미리 flex를 설정
#wrapper {
position: relative;
height: 100%;
width: 100%;
min-width: 1320px;}
/* 상단 메뉴 */
#wrapper #youtube-top-nav {
position: fixed;
width: 100%;
height: 56px;
background-color: #212121;}
- 상단을 고정
/* 왼쪽 네비 */
#wrapper #youtube-left-nav {
position: fixed;
width: 240px;
top: 56px;
bottom: 0;
left: 0;
- 상단 메뉴의 높이만큼 내려줌
background-color: #212121;
overflow-y: auto;
/* 컨텐츠가 넘어갈때 스크롤이 생성 */
overflow-x: hidden;}
#wrapper #youtube-left-nav #youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
background-color: grey;}
- 스크롤이 생길때 컨텐츠들의 망가지는 것을
새로운 div를 통해 방지
/* 유투브 메인 */
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: grey;}
- 상단 메인과 오른쪽 고정된 부분을 제외하고 넓이를 설정2. 학습 중 어려웠던 점
내용이 별로 없고 초반이라 어려운 점은 없었다.3. 해결방안
4. 학습 소감
더 깊은 공부를 하고 싶다.
안녕하세요!