[배운내용]

네이버 e스포츠 페이지 실습

• 위와 같이 상단 nav바가 고정된 상태로 스크롤을 내려도 항상 화면에 표시된다.
  안에 내용물은 margin: 0 auto;값으로 컨테이너로 감싸줄 수 있지만 아래 회색 border는 화면 너비 전체에 적용되어있다.

<header id="esport_header">
	<nav id="esport_nav">
		<div class="esport_container">
			<div class="nav_wrap esport_flex_between">
				<div class="left esport_flex_start">
					<h1><a href="#">e스포츠</a></h1>
					<ul class="esport_flex_start">
						<li><a href="#">GAME</a></li>
						<li><a href="#">PC게임</a></li>
					</ul>
				</div>

				<div class="center">
					<ul lass="esport_flex_center">
						<li><a href="#" class="active">홈</a></li>
						<li><a href="#">뉴스</a></li>
						<li><a href="#">영상</a></li>
						<li><a href="#">일정</a></li>
						<li><a href="#">순위</a></li>
					</ul>
				</div>

				<div class="right esport_flex_end">
					<a href="#">로그인</a>
					<a href="#">메뉴</a>
				</div>
			</div>
		</div>
	</nav>
</header>

#esport_header{
	position: fixed;
	width: 100%;
	background-color: #151618;
	border-bottom: solid 1px gray;

	left: 0;
	top: 0;
}

header에는 width를 100%를 주면서 border를 적용해주고, position:fixed;로 상단에 고정하면서 left, top: 0을 지정하면서 한번 더 왼쪽 상단 위치에 고정해준다.

[어려웠던 점]

[학습소감]

e스포츠 페이지의 상단 역영에 라이브 중계 타임라인 섹션이 있었는데, 이 부분을 100% 구현하지 못한 점이 아쉬웠다.
오늘날짜가 있는 칸과 없는 칸이 있는데 이런 칸들은 일일이 글자를 넣었다 뺐다 하는 것인지, 라이브 진행중인 칸은 'LIVE'표시로 바뀌는데 이것도 특정 시간 중에만 변경되는 것일텐데 이런것은 어떻게 구현하는지 궁금하다.