8월 11일 Velog

학습한 내용

네이버 e스포츠 실습

0. Default

[css]

.esport_container {
	width: 1280px;
	margin: 0 auto;
}

.esport_flex_between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.esport_flex_start {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

.esport_flex_center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.esport_flex_end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

1. Header

[html]

	<header id="esport_header">

		<nav id="esport_nav">
			<div class="esport_container esport_flex_between">
				
				<div class="nav_left esport_flex_start">
					<h1><a href="index.html">NAVER</a></h1>
					<h2><a href="#">e스포츠</a></h2>
					<ul class="esport_flex_start">
						<li><a href="game.html">GAME</a></li>
						<li><a href="#">PC게임</a></li>
					</ul>
				</div>

				<div class="nav_center">
					<ul class="esport_flex_center">
						<li class="active"><a href="#">홈</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="nav_right esport_flex_end">
					<a href="#">로그인</a>
					<a href="#">메뉴</a>
				</div>
				
			</div>
		</nav>

	</header>

[css]

#esport_header {
	position: fixed;
	/*스크롤 시 고정*/

	width: 100%;
	background-color: #151618;
	border-bottom: solid 1px grey;

	left: 0;
	top: 0;
}

#esport_header #esport_nav {
	/*height: 60px;*/
}

#esport_nav .nav_left {
	height: 60px;
	/*flex가 적용되어 중앙 정렬됨 부모의 높이값에 영향을 미친다.*/
}

#esport_nav .nav_left h1 {
	font-size: 16px;
}

#esport_nav .nav_left h2 {
	font-size: 20px;

	margin-left: 10px;
}

#esport_nav .nav_left h1 a,
#esport_nav .nav_left h2 a {
	color: #ffffff;
}

#esport_nav .nav_left ul li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 14px;
	background-color: rgba(160, 165, 182, 0.3);
	border-radius: 0.5px;

	vertical-align: top;
	margin: 7px 12px 0;
}

#esport_nav .nav_left ul li a {
	font-size: 18px;
	font-weight: 600;
	color: grey;	
}

#esport_nav .nav_center ul li {
	font-size: 17px;
	font-weight: 600;

	margin-right: 24px;
}

#esport_nav .nav_center ul li:last-child {
	margin-right: 0;
}

#esport_nav .nav_center ul li a {
	display: inline-block;

	height: 60px;
	border-bottom: solid 4px transparent;

	padding: 0 5px;

	color: grey;
	line-height: 60px;
}

#esport_nav .nav_center ul li a:hover {
	color: lightgrey;
}

#esport_nav .nav_center ul li.active a {
	color: #ffffff;
	border-bottom: solid 4px #ffffff;
}


#esport_nav .nav_right a {
	border: solid 1px grey;
	border-radius: 8px;

	font-size: 12px;
	color: #ffffff;
	font-weight: 600;

	padding: 4px 8px;
	margin-left: 10px;
}

2. Main

[html]

	<main role="main" id="esport_main">		
		<div id="esport_main_top"></div>
	</main>

[css]

#esport_main {
	padding-top: 61px;
	/*header가 fixed(3차원)이기 때문에 뒤로 겹치기 때문에 밑으로 내려준다*/
}

3. Main Top

구조

[html]

		<div id="esport_main_top">
			<div class="esport_container">

				<ul></ul>

				<div class="live_wrap"></div>
				
			</div>
		</div>

[css]

#esport_main_top {
	background-color: #151618;
	/*height: 550px;*/

	padding: 20px 0 60px;
	/*ul에 margin을 적용했더니 esport_main_top의 높이값이 ul과 같아졌다.*/
}

(1) ul

[html]

				<ul class="esport_flex_start">
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="date">오늘 (08.11)</span>
							<h3>2021 와일드 리프트 라이벌즈 DAY 1</h3>
							<div class="status_wrap esport_flex_between">
								<span class="live">LIVE</span>
								<span class="status">진행중</span>
							</div>
						</a>
					</li>
				</ul>

[css]

#esport_main_top ul {
	overflow: hidden;

	width: 100%;
	height: 141.8px;
	border-radius: 8px;
}

#esport_main_top ul li {
	width: 16.6%;
	background-color: #272b31;

	margin-right: 1px;
}

#esport_main_top ul li:last-child {
	margin-right: 0;
}


#esport_main_top ul li a {
	display: inline-block;

	width: 100%;

	padding: 14px 8px 14px;
}

#esport_main_top ul li a .date {
	font-size: 12px;
    font-weight: 500;
    color: #ffffff;
}

#esport_main_top ul li a h3 {
	font-size: 13px;
	color: #a0a5b6;

	margin-top: 6px;
}

#esport_main_top ul li a .status_wrap {
	margin-top: 35px;

	padding: 0 10px;
}

#esport_main_top .status_wrap .live {
	font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

#esport_main_top .status_wrap .live:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background-color: red;
	border-radius: 50%;

    vertical-align: top;
    margin: 6px 7px 0 0;
}

#esport_main_top .status_wrap .status {
	font-size: 12px;
	font-weight: 500;
	color: red;
}

(2) live wrap

[html]

				<div class="live_wrap">
					<h3>라이브중인 경기<span class="count"> 2</span></h3>
					<ul class="esport_flex_between">
						<li>
							<a href="#" class="esport_flex_start">
								<div class="image_wrap">
									<img src="https://via.placeholder.com/442x250">
									<span class="live">LIVE</span>
									<span class="number">385 시청</span>
								</div>

								<div class="txt_wrap">
									<span class="status">진행중</span>
									<h4>2021 와일드 리프트 라이벌즈</h4>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="esport_flex_start">
								<div class="image_wrap">
									<img src="https://via.placeholder.com/442x250">
									<span class="live">LIVE</span>
									<span class="number">385 시청</span>
								</div>

								<div class="txt_wrap">
									<span class="status">진행중</span>
									<h4>2021 와일드 리프트 라이벌즈</h4>
								</div>
							</a>
						</li>
					</ul>
				</div>

[css]

#esport_main #esport_main_top .live_wrap {
	margin-top: 30px;
}

#esport_main_top .live_wrap h3 {
	font-size: 18px;
	color: #ffffff;

	margin-bottom: 20px;
}

#esport_main_top .live_wrap h3 .count {
	color: #8a7cff;
}

#esport_main_top .live_wrap ul {
	height: 250px;

	border-radius: 0px;
}

#esport_main_top .live_wrap ul li {
	overflow: hidden;

	width: 625px;
	height: 250px;
	border-radius: 8px;
}

#esport_main_top .live_wrap ul li a {
	display: flex;
	/*위에서 a에 inline-block을 줬기 때문에 flex 적용이 안됨*/

	width: 100%;
	height: 100%;

	padding: 0;
}

#esport_main_top .live_wrap ul li a .image_wrap {
	position: relative;

	width: 442px;
	height: 250px;
}

#esport_main_top .live_wrap .image_wrap img {
	position: absolute;
	display: inline-block;

	width: 100%;
	height: 100%;
}

#esport_main_top .live_wrap .image_wrap .live {
	position: absolute;
	display: inline-block;

	background-color: red;
	border-radius: 4px;

	font-size: 12px;
	font-weight: 600;
	color: #ffffff;

	padding: 2px 7px;

	left: 10px;
	top: 10px;
}

#esport_main_top .live_wrap .image_wrap .number {
	position: absolute;
	display: inline-block;

	background-color: black;
	border-radius: 4px;

	font-size: 12px;
	font-weight: 600;
	color: #ffffff;

	padding: 2px 7px;

	top: 10px;
	left: 52px;

}

#esport_main_top .live_wrap .txt_wrap {
	width: calc(100% - 442px);
	height: 250px;

	padding: 17px 20px 22px;;
}

#esport_main_top .live_wrap .txt_wrap .status {
	background-color: rgba(255, 0, 0, 0.2);
	border-radius: 3px;

	font-size: 12px;
	color: red;

	padding: 3px 7px;
}

#esport_main_top .live_wrap .txt_wrap h4 {
	font-size: 15px;
	color: #ffffff;

	margin-top: 8px;
}