Dev log - 21, 네이버 웹툰 카피캣 실습 #2

박강산·2021년 7월 26일
0

대구AI스쿨 - 개발일지

목록 보기
21/44
post-thumbnail

학습한 내용

네이버 웹툰 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버 웹툰</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

CSS 문서

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

네이버 웹툰 실습 - 메인 오른쪽 영역

  • 의미있는 순서가 있는 리스트는 ol 태그 사용

  • CSS 문서 기본 세팅에서 list-style: none 속성을 적용했기 때문에, ol 태그 번호를 출력하려면 list-style: decimal 이란 속성을 사용해야 정상적으로 번호가 출력 됨 (여기서는 레이아웃 영역을 벗어나서 따로 적용하지 않고, span 태그로 숫자 기입)

  • white-space: nowrap 속성은 줄바꿈 현상을 일어나지 않게 하고, text-overflow: ellipsis 속성은 영역을 넘어간 글자들을 ‘...’ 으로 표시함

  • 보통 레이아웃 간 간격을 세밀하게 조절할 때는, relative, absolute 속성을 지니게 해서 top, right, bottom, left 속성을 쓸 수 있게 해서 조정 함. 그러나 글자가 지니고 있는 공백 때문에 정확히 맞추기는 힘듦

HTML 문서

<body>
	<main role="main" id="webtoon-main">   
        <div class="webtoon-container">         
						<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="#">qzqz121</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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>20대 실시간 인기만화</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="#">참교육</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="#">참교육</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="#">참교육</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="#">참교육</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="#">참교육</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>
</body>

CSS 문서 1 - style.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: 18px;
	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 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: 14px;
}

#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;

	margin-bottom: 7px;
	padding: 0 13px;

	font-size: 12px;
}

#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: 140px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank {
	margin-right: 5px;
}

#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.status-stay {
	background-color: black;
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up {
	background-color: red;	
}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.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 {
	/*background-color: yellow;*/
}

#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;
}

네이버 웹툰 실습 - 메인 footer 영역

  1. text-transform: uppercase; : 전체 대문자
  2. text-transform: lowercase; : 전체 소문자
  3. text-transform: capitalize; : 첫 글자만 대문자

HTML 문서

<body>
	<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>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>naver webtoon corp</span>
				</div>				
			</div>

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

CSS 문서 1 - style.css

#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-right {
	border-left: solid 1px grey;
}

#webtoon-footer .webtoon-footer-wrap ul {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	margin-bottom: 8px;
}	

#webtoon-footer .webtoon-footer-wrap ul li {
	/*margin-right: 5px;*/
}

#webtoon-footer .webtoon-footer-wrap ul li:first-child:before {
	content: initial;
}

#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 a  {

}

#webtoon-footer .webtoon-footer-wrap span {
	text-transform: uppercase;
}

#webtoon-footer .webtoon-footer-paragraph {
	padding-left: 25px;
}

네이버 웹툰 실습 - 상세 페이지(웹툰 탭) 영역

  • border 값이 일괄 설정된 영역에서, 특정 영역에서 border 값을 추가로 설정할 때는, 그 영역에 class 를 따로 지정하여 속성 기입

  • flex 속성에서, (ul, li 태그 기준)

  1. align-items: flex-start; 은 각각의 영역이 독립적인 높이를 가지고, 위에서부터 정렬
  2. align-items: stretch;(기본 설정) 은 각각의 영역이 높이가 긴 영역을 기준으로 높이가 지정되고, 위에서부터 정렬

HTML 문서

<body>
<header id="webtoon-header">		
		<div class="webtoon-header-top">
			<div class="webtoon-container">
            
				<div class="webtoon-header-left">
					<h2><a href="#">만화</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>

				<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>
							</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>
							</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>
							</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>
							</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>
							</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>
							</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>
							</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="#">twinee2018</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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="#">뷰티풀 군바리-300화_탈영의 결말</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>20대 실시간 인기만화</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="#">참교육</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="#">참교육</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="#">참교육</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="#">참교육</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="#">참교육</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>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>naver webtoon corp</span>
				</div>				
			</div>
            
			<p class="webtoon-footer-paragraph">
				본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다.
			</p>
		</div>
	</footer>
</body>

CSS 문서 1 - style.css

/* 웹툰 상세 페이지 */
.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 li {
	margin-right: 10px;
}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap li:last-child {
	margin-right: 0;
}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap a {
	font-size: 12px;
}

.webtoon-detail #webtoon-total-day .webtoon-day-lists {
	display: flex;
	flex-direction: row;
	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;
	border-color: #3a3a3a;
	color: #fbcb00;
}

.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-list img {
	width: 100%;
	margin-bottom: 5px;
}

.webtoon-detail #webtoon-total-day .webtoon-day-list span,
.webtoon-detail #webtoon-total-day .webtoon-day-list .webtoon-list h3 {
	font-size: 14px;
}

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

  • 비슷한 명칭의 class 가 많아서, 오타가 생겼을 때 찾기가 힘들었음.

  • 인기급상승 레이아웃 영역에 대한 이해도가 부족하여 복습 필요할 듯.

해결방법

  • 강의 복습을 통해 헷갈리는 부분에 대해 이해도를 높였음.

학습 소감

  • 오늘은 어제에 이어서 네이버 웹툰 카피캣 실습을 진행하였다. 하나의 CSS 문서로 작업하다 보니, 오타가 생겨서 찾을 때 비슷한 class 들이 많아서 찾기가 힘들었음. 다음 번엔 하나의 CSS 문서로 만들기 보다는, 여러 개의 CSS 문서를 만들어 적용시키는 것을 생각해 봐야겠음.

    또한, 오늘 인기급상승 영역의 div 태그와 span 태그의 차이점에 대해 궁금증이 생겨 따로 검색을 통해 조금 더 알아볼 예정임

profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 20, 네이버 웹툰 카피캣 실습 #1

다음 포스트

Dev log - 22, 네이버 블로그 카피캣 실습 #1

0개의 댓글