2021.06.14 (네이버 웹툰 3,4)

학습한 내용

[네이버 웹툰 메인 오른쪽 부분]

<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="#">급식아빠-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">4</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">5</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">6</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">7</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">8</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">9</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">10</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">2</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">3</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_up"></div>
									<span class="number">1</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">4</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">5</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">2</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>

#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: 17px;

	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_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: 11px;
}

#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 {
	width: 100%;
	height: 240px;
	background-color: yellow;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_2 {
	width: 100%;
	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 li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	font-size: 11px;

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

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;	
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_content .rank {
	margin-right: 5px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_content a {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;

	width: 140px;

	white-space: nowrap;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_box {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 30px;
	height: 12px;

	top: -2px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_box .status {
	width: 12px;
	height: 12px;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_box .status.status_stay {
	background-color: black;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_box .status.status_up {
	background-color: red;
}

#webtoon_main .webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li .rank_box .status.status_down {
	background-color: blue;
}

/* 썸네일 이미지가 포함된 랭킹 */
#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;
	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 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>

#webtoon_main {
	padding-bottom: 100px;
}

#webtoon_footer {
	padding-bottom: 78px;

	font-size: 12px;

}

#webtoon_footer .webtoon_container {
	border-top: solid 1px #e6e7e8;

	padding-top: 40px;
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-bottom: 32px;
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap .webtoon_footer_left,
#webtoon_footer .webtoon_container .webtoon_footer_wrap .webtoon_footer_right {
	width: 50%;
	padding-left: 25px;
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap .webtoon_footer_right {
	border-left: solid 1px grey;
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-bottom: 8px;
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap ul li {
	/*margin-right: 5px;*/
}

#webtoon_footer .webtoon_container .webtoon_footer_wrap ul li:first-child:before {
	content: initial;
}

#webtoon_footer .webtoon_container .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_container .webtoon_footer_wrap span {
	text-transform: uppercase;
}

#webtoon_footer .webtoon_container .webtoon_footer_paragraph {
	padding-left: 25px;
}

text-transform: uppercase; /* 전체 영문을 대문자로 */
text-transform: lowercase; /* 전체 영문을 소문자로 */
text-transform: capitalize; /* 각 단어의 첫글자만 대문자 */

[네이버 웹툰 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 class="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/218x120">
								<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/218x120">
								<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/218x120">
								<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="#">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="#">급식아빠-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">4</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">5</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">6</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">7</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">8</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">9</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">10</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">2</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">3</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_up"></div>
									<span class="number">1</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">4</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_stay"></div>
									<span class="number">0</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank rank_custom">5</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">2</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>

/* 웹툰 상세 페이지 */
.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;
	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_lists .webtoon_this_list {
	width: 218px;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list .this_image_wrap {
	position: relative;

	width: 100%;
	height: 120px;

	margin-bottom: 5px;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list .this_image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list .this_image_wrap .new_mark {
	position: absolute;

	width: 30px;
	background-color: #00c85e;
	color: #ffffff;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list h3 {
	margin-bottom: 5px;

	font-size: 14px;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list .author {
	display: block;
	margin-bottom: 5px;

	font-size: 13px;
}

.webtoon_detail .webtoon_this_month .webtoon_this_lists .webtoon_this_list p {
	font-size: 12px;
}

.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 {
	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;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch; /* flex에 영향을 받는 것중에 높이값이 가장 큰 값에 맞춰짐 */

	border-bottom: solid 1px #f4f4f4;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list {
	width: 14.2855%;
	text-align: center;

	border-right: solid 1px #f4f4f4;

	padding: 0 8px;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list.active {
	background-color: #3a3a3a;
	border-color: #3a3a3a;
	color: #fdcb00;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list:last-child {
	border-right: none;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list span {
	display: block;
	height: 32px;
	line-height: 32px;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list {
	margin-bottom: 10px;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list img {
	width: 100%;

	margin-bottom: 5px;
}

.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list span,
.webtoon_detail #webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list h3 {
	font-size: 14px;
}

학습내용 중 어려웠던 점

따로 어려웠던 점은 없었지만 중간중간 코드가 적용이 안되는 부분이 가끔 있었습니다.

해결방법

선택자를 계속 다 써놓는 식으로 작업을 했기 때문에 적용이 안되는 부분은 html과 css의 클래스명이나 id명의 오타가 있는지 우선적으로 찾아보고 그 다음 선택자가 순서대로 적용됐는지와 같은 클래스명이 두번 적히진 않았는지 확인하면서 해결했습니다.

학습소감

네이버 웹툰 페이지를 작업하다 보니 선택자의 길이가 길어지도 오타나 선택자 순서 이런 실수로 인해서 적용이 안되는 부분이 많아 그걸 해결하기 위해 코드를 다시 여러번 보다보니 점점 코드에 대해 익숙해지고 오류도 금방 찾아 가는거 같습니다.