개발일지 15일차

학습 내용

• 네이버 메인 오른쪽 / footer 영역

  webtoon.html

<main role="main" id="webtoon-main">
	<div class="webtoon-main-right">

				<div class="webtoon-challenge-wrap webtoon-border">
					<h3><span>새로운</span>베스트 도전만화</h3>
					<img src="https://via.placeholder.com/202x110">

					<div class="webtoon-info">
						<div class="webtoon-title-wrap">
							<h4><a href="">돈벌다 만난사이</a></h4>
							<a href="#">twinee22018</a>
						</div>

						<p>
							<a href="#">회사에서 돌 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a>	
						</p>
					</div>
				</div>


				<div class="webtoon-banner-type-1 webtoon-border"></div>

				<div class="webtoon-popular webtoon-border">
					
					<div class="webtoon-popular-header">
						<h2>인기급상승 만화</h2>
					</div>

					<ul class="webtoon-popular-tabs">
						<li class="tab active">
							<span>인기순</span>
						</li>

						<li class="tab">
							<span>업데이트순</span>
						</li>
					</ul>

					<div class="webtoon-popular-ranking">
						
						<ol>
							<li>
								<div class="rank-content">
									<span class="rank">1</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-stay"></div>
									<span class="number">0</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">2</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-up"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank">3</span>
									<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>
						</ol>

					</div>

				</div>


				<div class="webtoon-popular webtoon-border">
					
					<div class="webtoon-popular-header">
						<h2>30대 실시간 인기만화</h2>
					</div>

					<ul class="webtoon-popular-tabs">
						<li class="tab">
							<span>남자</span>
						</li>

						<li class="tab active">
							<span>여자</span>
						</li>
					</ul>

					<div class="webtoon-popular-ranking">
						
						<ol>

							<li>
								<div class="rank-content">
									<span class="rank rank-custom">1</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30x33">
										<div class="webtoon-info">
											<a href="#">헬퍼 2 : 킬베로스</a>
											<span class="author">삭</span>
										</div>
									</div>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>


							<li>
								<div class="rank-content">
									<span class="rank rank-custom">1</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30x33">
										<div class="webtoon-info">
											<a href="#">헬퍼 2 : 킬베로스</a>
											<span class="author">삭</span>
										</div>
									</div>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank rank-custom">1</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30x33">
										<div class="webtoon-info">
											<a href="#">헬퍼 2 : 킬베로스</a>
											<span class="author">삭</span>
										</div>
									</div>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank rank-custom">1</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30x33">
										<div class="webtoon-info">
											<a href="#">헬퍼 2 : 킬베로스</a>
											<span class="author">삭</span>
										</div>
									</div>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<li>
								<div class="rank-content">
									<span class="rank rank-custom">1</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30x33">
										<div class="webtoon-info">
											<a href="#">헬퍼 2 : 킬베로스</a>
											<span class="author">삭</span>
										</div>
									</div>
								</div>
								<div class="rank-box">
									<!-- status-stay, status-up, status-down  -->
									<div class="status status-down"></div>
									<span class="number">1</span>
								</div>
							</li>
						</ol>

					</div>

				</div>

	<div class="webtoon-banner-type-2 webtoon-border"></div>
				<div class="webtoon-banner-type-2 webtoon-border"></div>
				<div class="webtoon-banner-type-2 webtoon-border"></div>
				<div class="webtoon-banner-type-2 webtoon-border"></div>
			</div>
		</div>

	</main>


	<footer id="webtoon-footer">
		
		<div class="webtoon-container">
			<div class="webtoon-footer-wrap">
				<div class="webtoon-footer-left">
					<ul>
						<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>
					<span>&copy; naver corp</span>
				</div>

				<div class="webtoon-footer-right">
					<ul>
						<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>
					<span>&copy; naver webtoon</span>
				</div>
			</div>
			
			<p class="webtoon-footer-paragraph">
				본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
			</p>
		</div>
	</footer>

webtoon-detail.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>
	<link rel="stylesheet" type="text/css" href="css/webtoon.css">
</head>
<body>

<header id="webtoon-header">
	
	<div class="webtoon-header-top">
		<div class="webtoon-container">
			<div class="webtoon-header-left">
				<h2><a href="webtoon.html">만화</a></h2>
				<em class="bar"></em>
				<h3><a href="#">웹소설</a></h3>

				<div class="webtoon-header-input-wrap">
					<input type="text">
					<button type="button" class="btn-search"></button>
				</div>
			</div>

			<div class="webtoon-header-right">
				<a href="#" class="btn-login">로그인</a>
				<button type="button" class="btn-menu"></button>
			</div>
		</div>
	</div>

	<div class="webtoon-header-nav">
		<div class="webtoon-container">
			<nav>
				<ul>
					<li><a href="webtoon.html">홈</a></li>
					<li class="on"><a href="webtoon-detail.html">웹툰</a></li>
					<li><a href="#">베스트 도전</a></li>
					<li><a href="#">도전만화</a></li>
				</ul>
			</nav>

			<!-- i태그는 inline 요소 -->
			<div class="webtoon-header-link-wrap">
				<i class="icon-ex-mark"></i>
				<a href="#">온천마을 판타지 로맨스 <모락모락 왕세자님></a>
			</div>
		</div>
	</div>

</header>



<main role="main" id="webtoon-main" class="webtoon-detail">
	
	<nav class="nav-1">
		<div class="webtoon-container">
			<ul>
				<li><a href="#">요일별</a></li>
				<li><a href="#">장르별</a></li>
				<li><a href="#">작품별</a></li>
				<li><a href="#">작가별</a></li>
			</ul>
		</div>
	</nav>


	<div class="webtoon-container">
		

		<div class="webtoon-main-left">
				
			<nav class="nav-2">
				<ul>
					<li class="on"><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>
			</nav>


			<div id="webtoon-this-month">
				<h2>이달의 신규 웹툰</h2>
				
				<ul class="webtoon-this-lists">
					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉 / 여백</span>
						<p>국민 여배우 하은, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>

					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉 / 여백</span>
						<p>국민 여배우 하은, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>

					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉 / 여백</span>
						<p>국민 여배우 하은, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>
				</ul>
			</div>

			<div class="webtoon-banner"></div>


			<div id="webtoon-total-day">
				<div class="webtoon-total-title-wrap">
					<h2>요일별 전체웹툰</h2>
					<ul>
						<li><a href="">인기순</a></li>
						<li><a href="">업데이트순</a></li>
						<li><a href="">조회순</a></li>
						<li><a href="">별점순</a></li>					
					</ul>
				</div>

				<ul class="webtoon-day-lists">
					<li class="webtoon-day-list active">
						<span>월요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>화요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>수요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>목요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>금요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>토요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

					<li class="webtoon-day-list">
						<span>일요웹툰</span>
						
						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>

							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84x90">
								<h3>참교육</h3>
							</li>
						</ul>	
					</li>

				</ul>
			</div>

		</div>

		<div class="webtoon-main-right">
			
			<div class="webtoon-challenge-wrap webtoon-border">
				<h3><span>새로운</span>베스트 도전만화</h3>
				<img src="https://via.placeholder.com/202x110">

				<div class="webtoon-info">
					<div class="webtoon-title-wrap">
						<h4><a href="">돈벌다 만난사이</a></h4>
						<a href="#">twinee22018</a>
					</div>

					<p>
						<a href="#">회사에서 돌 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a>	
					</p>
				</div>
			</div>


			<div class="webtoon-banner-type-1 webtoon-border"></div>

			<div class="webtoon-popular webtoon-border">
				
				<div class="webtoon-popular-header">
					<h2>인기급상승 만화</h2>
				</div>

				<ul class="webtoon-popular-tabs">
					<li class="tab active">
						<span>인기순</span>
					</li>

					<li class="tab">
						<span>업데이트순</span>
					</li>
				</ul>

				<div class="webtoon-popular-ranking">
					
					<ol>
						<li>
							<div class="rank-content">
								<span class="rank">1</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-stay"></div>
								<span class="number">0</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">2</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-up"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank">3</span>
								<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>
					</ol>

				</div>

			</div>


			<div class="webtoon-popular webtoon-border">
				
				<div class="webtoon-popular-header">
					<h2>30대 실시간 인기만화</h2>
				</div>

				<ul class="webtoon-popular-tabs">
					<li class="tab">
						<span>남자</span>
					</li>

					<li class="tab active">
						<span>여자</span>
					</li>
				</ul>

				<div class="webtoon-popular-ranking">
					
					<ol>

						<li>
							<div class="rank-content">
								<span class="rank rank-custom">1</span>
								<div class="image-wrap">
									<img src="https://via.placeholder.com/30x33">
									<div class="webtoon-info">
										<a href="#">헬퍼 2 : 킬베로스</a>
										<span class="author">삭</span>
									</div>
								</div>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>


						<li>
							<div class="rank-content">
								<span class="rank rank-custom">1</span>
								<div class="image-wrap">
									<img src="https://via.placeholder.com/30x33">
									<div class="webtoon-info">
										<a href="#">헬퍼 2 : 킬베로스</a>
										<span class="author">삭</span>
									</div>
								</div>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank rank-custom">1</span>
								<div class="image-wrap">
									<img src="https://via.placeholder.com/30x33">
									<div class="webtoon-info">
										<a href="#">헬퍼 2 : 킬베로스</a>
										<span class="author">삭</span>
									</div>
								</div>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank rank-custom">1</span>
								<div class="image-wrap">
									<img src="https://via.placeholder.com/30x33">
									<div class="webtoon-info">
										<a href="#">헬퍼 2 : 킬베로스</a>
										<span class="author">삭</span>
									</div>
								</div>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>

						<li>
							<div class="rank-content">
								<span class="rank rank-custom">1</span>
								<div class="image-wrap">
									<img src="https://via.placeholder.com/30x33">
									<div class="webtoon-info">
										<a href="#">헬퍼 2 : 킬베로스</a>
										<span class="author">삭</span>
									</div>
								</div>
							</div>
							<div class="rank-box">
								<!-- status-stay, status-up, status-down  -->
								<div class="status status-down"></div>
								<span class="number">1</span>
							</div>
						</li>
					</ol>

				</div>

			</div>




			<div class="webtoon-banner-type-2 webtoon-border"></div>
			<div class="webtoon-banner-type-2 webtoon-border"></div>
			<div class="webtoon-banner-type-2 webtoon-border"></div>
			<div class="webtoon-banner-type-2 webtoon-border"></div>

		</div>
	</div>

</main>

<footer id="webtoon-footer">
	
	<div class="webtoon-container">
		<div class="webtoon-footer-wrap">
			<div class="webtoon-footer-left">
				<ul>
					<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>
				<span>&copy; naver corp</span>
			</div>

			<div class="webtoon-footer-right">
				<ul>
					<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>
				<span>&copy; naver webtoon</span>
			</div>
		</div>
		
		<p class="webtoon-footer-paragraph">
			본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
		</p>
	</div>
</footer>

webtoon.css

#webtoon-main .webtoon-main-right {
	float: right;
	width: 240px;	
}
/* 왼쪽 영역의 높이값과 같은 값으로 적용 */
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap {
	width: 100%;
	height: 252px;
	background-color: #f9f9fc;
	padding: 20px 18px;
	margin-bottom: 20px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 {
	font-size: 16px;
	margin-bottom: 11px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 span {
	color: #00d564;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap img {
	width: 100%;
	height: 110px;
	margin-bottom: 18px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info {
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap h4 {
	font-size: 16px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap h4 a {
	font-size: 14px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a:hover{
	text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap a {
	font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p {
	font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p a {
	color: grey;
} 
#webtoon-main .webtoon-main-right .webtoon-banner-type-1,
#webtoon-main .webtoon-main-right .webtoon-banner-type-2 {
	margin-bottom: 8px;
} 
#webtoon-main .webtoon-main-right .webtoon-banner-type-1 {
	height: 240px;
	background-color: yellow;
}
#webtoon-main .webtoon-main-right .webtoon-banner-type-2 {
	height: 86px;
	background-color: pink;
}
#webtoon-main .webtoon-main-right .webtoon-popular {
	background-color: #ffffff;
	margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 9px 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header h2 {
	font-size: 14px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-top: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab {
	width: 50%;
	height: 30px;
	border-bottom: solid 1px #e1e1e1;
	text-align: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab:first-child {
	border-right: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab.active {
	border-bottom: solid 1px #ffffff;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab span {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 30px;
	font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking {
	width: 100%;
	background-color: #ffffff;
	padding: 15px 0 7px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol {
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	margin-bottom: 7px;
	padding: 0 13px;	
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
/* 말줄임표시 */
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a {
	display: inline-block;
	overflow: hidden;
	width: 160px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank {
	margin-right: 5px;
}
/* 실제로 글자 밑에는 약간의 공백이 발생하여 vertical이 맞지 않은 경우가 많다 */
/* top,right,bottom,left를 사용하기위해 position:relative를 적용하고 top으로 위아래 간격을*/
/* 조절하여 vertical을 맞춰준다. */
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center; 
	width: 30px;
	height: 12px;
	top: -3px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status {
	width: 12px;
	height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status-stay {
	background-color: black;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status-up {
	background-color: red;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status-down {
	background-color: blue;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .number {
}
/* 썸네일 이미지가 포함된 랭킹 */
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank.rank-custom {
	position: relative;
	top: -10px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	width: 140px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap img {
	width: 30px;
	height: 33px;
	margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info {
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info a {
	width: 100px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info .author {
	display: block;
}
#webtoon-footer {
	padding-bottom: 78px;
	font-size: 12px;
}
#webtoon-footer .webtoon-container {
	border-top: solid 1px #e6e7e8;
	padding-top: 40px;
}
#webtoon-footer .webtoon-footer-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 32px;
}
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-left,
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-right {
	width: 50%;
	padding-left: 25px;
}
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-left {
	border-right: solid 1px grey;
}
#webtoon-footer .webtoon-footer-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 8px;
}
#webtoon-footer .webtoon-footer-wrap ul li {	
}
#webtoon-footer .webtoon-footer-wrap ul li:before {
	display: inline-block;
	content: "";
	width: 1px;
	height: 11px;
	background-color: #d9d9d9;
	vertical-align: -1px;
	margin: 0 8px;
}
#webtoon-footer .webtoon-footer-wrap ul li:first-child:before {
	content: initial;
}
#webtoon-footer .webtoon-footer-wrap ul li a {	
}
/* 대문자 소문자 앞자리만대문자 순 */
#webtoon-footer .webtoon-footer-wrap span {
	text-transform: uppercase;
	/*text-transform: lowercase;*/
	/*text-transform: capitalize;*/
}
#webtoon-footer .webtoon-footer-paragraph {
	padding-left: 25px;
}	
/* 웹툰 상세페이지 */
.webtoon-detail {
	padding-top: 0;
}
.webtoon-detail .nav-1 {
	background-color: #fafafa;
	border-bottom: solid 1px #ededed;
}
.webtoon-detail .nav-1 ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.webtoon-detail .nav-1 ul li {
	width: auto;
	height: 36px;
	margin-right: 28px;
}
.webtoon-detail .nav-1 ul li:last-child {
	margin-right: 0;
}
.webtoon-detail .nav-1 ul li a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 36px;
	text-align: center;
	font-size: 12px;
	color: #434343;
}
.webtoon-detail .nav-2 {
	padding-top: 20px;
	border-bottom: solid 1px #e5e5e5;
}
.webtoon-detail .nav-2 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.webtoon-detail .nav-2 ul li {
	margin-right: 14px;	
	padding-bottom: 5px;
	border-bottom: solid 2px transparent;
}
.webtoon-detail .nav-2 ul li.on {
	border-color: #00d564;
	margin-bottom: -1px;
	font-weight: 700;
}
.webtoon-detail .nav-2 ul li:last-child {
	margin-right: 0;
}
.webtoon-detail .nav-2 ul li a {
	font-size: 13px;
}
.webtoon-detail #webtoon-this-month {
	padding: 20px 0;
}
.webtoon-detail #webtoon-this-month h2 {
	font-size: 16px;
	margin-bottom: 8px;
}
.webtoon-detail #webtoon-this-month .webtoon-this-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list {
	width: 218px;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap {
	position: relative;
	width: 100%;
	height: 120px;
	margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap .new-mark {
	position: absolute;
	width: 30px;
	background-color: #00c85e;
	color: #ffffff;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list h3 {
	font-size: 14px;
	margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list .author {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-this-list p {
	font-size: 14px;
}
.webtoon-detail #webtoon-total-day {
	padding-top: 20px;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 8px;
	border-bottom: solid 1px #eaeaea;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap h2 {
	font-size: 16px;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul li {
	font-size: 12px;
	margin-right: 10px;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul li:last-child {
	margin-right: 0;
}
.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul li a {
	font-size: 12px;
}
/* flex-start로 해야 순서정렬되기 때문에 열이 안 삐뚤어짐 */
.webtoon-detail #webtoon-total-day .webtoon-day-lists {
	display: flex;
	flex-wrap: wrap;
	border-bottom: solid 1px #f4f4f4;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list {
	width: 14.2855%;
	text-align: center;
	border-right: solid 1px #f4f4f4;
	padding: 0 8px;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list.active {
	background-color: #3a3a3a;
	color: #fbcb80;
	border-color: #3a3a3a;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list:last-child {
	border-right: none;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list span {
	display: block;
	height: 32px;
	line-height: 32px;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list .webtoon-list {
	margin-bottom: 10px;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list .webtoon-lists img {
	width: 100%;
	margin-bottom: 5px;
}
.webtoon-detail #webtoon-total-day .webtoon-day-list span,
.webtoon-detail #webtoon-total-day .webtoon-day-list .webtoon-lists h3 {
	font-size: 14px;
}

결과
네이버웹툰 메인페이지


네이버웹툰 상세페이지

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

webtoon-popular 부분의 구조를 짜는 것이 너무 어렵고 아직 다 이해하지 못하였다.
webtoon-detail.html에서 요일별 전체웹툰의 프레임 구조를 이해하기 힘들었고, 짜기 힘들었다. ul,li안에 또다시 ul,li구조가 들어가는 복잡한 구조였다.

해결한 방법

아직 복습 중이다.

학습 소감

기본적인 구조이기에 대략적인 틀을 짜는 것은 가능할 것 같다. 하지만 오늘처럼 일부 복잡한 구조를 짜는 것은 아직까지 어렵다.