개발일지 21/07/01

학습 내용
1. 네이버 이스포츠 왼쪽 영역

html

	<div class="esport-container">

		<div class="content-wrap">
			<div class="left">
				
				<div id="esport-main-article">

					<div class="article full">
						<img src="https://via.placeholder.com/150">
						<div class="txt-wrap">
							<h3>Title</h3>
							<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							<span class="source">포모스</span>
						</div>
					</div>

					<div class="article">
						<img src="https://via.placeholder.com/150">
						<div class="txt-wrap">
							<h3>Title</h3>
							<span class="source">포모스</span>
						</div>
					</div>

					<div class="article">
						<img src="https://via.placeholder.com/150">
						<div class="txt-wrap">
							<h3>Title</h3>
							<span class="source">포모스</span>
						</div>
					</div>
					
				</div>








				<div id="esport-replay" class="esport-section">

					<div class="title-wrap">
						<h2>경기 다시보기</h2>
					</div>

					<nav class="game-menu">
						<ul class="esport-flex-start">
							<li>
								<a href="#" class="active">
									<i></i>
									<span>MSI</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span>MSI</span>
								</a>
							</li>
							<li>
								<a href="#">
									<i></i>
									<span>MSI</span>
								</a>
							</li>
						</ul>
					</nav>


					<ul class="play-lists esport-flex-between">
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="image-wrap"> 
									<img src="https://via.placeholder.com/285x160">
									
									<div class="status-wrap esport-flex-between">
										<i></i>
										<span class="time">56:01</span>
									</div>
								</div>
								<h3>롤드컵 Day2 5세트 경기</h3>
							</a>
						</li>
					</ul>


				</div>




				<div id="esport-news" class="esport-section">
					
					<div class="title-wrap">
						<h2>추천 뉴스</h2>
					</div>

					<div class="article-wrap esport-flex-between">

						<ul class="left-lists esport-flex-between">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/226x132">
									
									<h3>타이틀1</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과. 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/226x132">
									
									<h3>타이틀1</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과. 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
								</a>
							</li>
						</ul>

						<ul class="right-lists">
							<li><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>


				<div id="esport-expert" class="esport-section">
					<div class="title-wrap">
						<h2>전문가 칼럼</h2>
					</div>

					<ul class="news-lists esport-flex-between">
						<li>
							<a href="#" class="esport-flex-start">
								<img src="https://via.placeholder.com/153x86">
								<div class="txt-wrap">
									<h3>Title</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고  백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고</p>
									<span class="source">핫매치 리뷰</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="esport-flex-start">
								<img src="https://via.placeholder.com/153x86">
								<div class="txt-wrap">
									<h3>Title</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고</p>
									<span class="source">핫매치 리뷰</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="esport-flex-start">
								<img src="https://via.placeholder.com/153x86">
								<div class="txt-wrap">
									<h3>Title</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고</p>
									<span class="source">핫매치 리뷰</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#" class="esport-flex-start">
								<img src="https://via.placeholder.com/153x86">
								<div class="txt-wrap">
									<h3>Title</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고</p>
									<span class="source">핫매치 리뷰</span>
								</div>
							</a>
						</li>
					</ul>
				</div>


			</div>