8월 26일 목

학습한 내용

overflow-y: auto; => 선택적으로 스크롤 표시할 때
overflow-y: scroll; => 항상 스크롤 표시할 때
학습한 내용 중 어려웠던 점 또는 해결못한 것들

메인에 css 코드가 안먹힌다. 확실히 보기 위해서 red로 표현했으나 아무것도 안나옴.

해결방법 작성
원인 못찾음

학습 소감
트위치와 유사한 웹페이지라서 트위치 때 작성한 것을 좀 더 보완해서 만드는 위주로 가고 있다.
도데체 main 코드는 왜 오류인지 모르겠다. 찾고는 있는데.

css 코드 초기화 및 기본값 정리 때 body 값을 지정하지 않아서 생긴 문제였다.

---

유튜브

<div id="wrapper">
	
	<nav id="youtube-top-nav">
		
	</nav>

	<nav id="youtube-left-nav">
		<div id="youtube-left-content">
			
		</div>
	</nav>

	<main id="youtube-main" role="main">
		
	</main>
</div>

---

• {
  margin: 0;
  padding: 0;

  box-sizing: border-box;

  }

html {
width: 100%;
height: 100%;
}

ol, ul {
list-style: none;
}

a {
text-decoration: none;
}

img {
vertical-align: top;
}

button {
background-color: transparent;
border: none;
}

input {
outline: none;
border: none;
}

input:focus {
outline: none;
}

#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1320px;
}

#youtube-top-nav {
position: fixed;

width: 100%;
height: 56px;
background-color: #212121;

}

#youtube-left-nav {
overflow-y: auto;
overflow-x: hidden;
position: fixed;

width: 240px;
background-color: #212121;

top: 56px;
left: 0;
bottom: 0;

}

#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
background-color: grey;
}

#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: #212121;
}