2021.07.26네이버만화2
오늘의 강의 내용
카피캣 할 네이버만화 오른쪽 부분
네이버 만화 오른쪽부분 카피캣 완료된 모습
네이버 만화 웹툰 카피캣 완료된 모습
<!-- webtoon.html 언어 -->
<div class="webtoon_carousel_right">
<div class="webtoon_carousel_banner">
<img src="https://via.placeholder.com/582x195">
</div>
<div class="webtoon_carousel_banner_nav">
<ul>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
</ul>
<a href="#" class="btn btn_prev"></a>
<a href="#" class="btn btn_next"></a>
</div>
</div>
</div>
<div class="webtoon_banner"></div>
<div class="webtoon_content">
<div class="webtoon_content_header webtoon_content_header_recommend">
<h2>장르별<span>추천웹툰</span></h2>
<nav>
<ul>
<li class="on"><a href="#">에피소드</a></li>
<li><a href="#">옴니버스</a></li>
<li><a href="#">스토리</a></li>
</ul>
</nav>
</div>
<div class="webtoon_content_body">
<nav>
<ul>
<li><a href="#">인기순</a></li>
<li><a href="#">업데이트순</a></li>
<li><a href="#">조회순</a></li>
<li><a href="#">별점순</a></li>
</ul>
</nav>
<ul class="webtoon_content_col_3">
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
<li class="webtoon_content_col_3_type_1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon_content_col_3_info">
<h4>기억의 흔적</h4>
<p>60화</p>
<span>브라보 장</span>
</div>
</li>
</ul>
</div>
</div>
<div class="webtoon_content">
<div class="webtoon_content_header">
<h2>베스트 도전<span>추천웹툰</span></h2>
</div>
<div class="webtoon_content_body">
<ul class="webtoon_content_col_3">
<li class="webtoon_content_col_3_type_2">
<h3>에피소드</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon_content_col_3_type_2">
<h3>옴니버스</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon_content_col_3_type_2">
<h3>스토리</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="webtoon_content">
<div class="webtoon_content_header">
<h2>장르별<span>인기 단행본 만화</span></h2>
</div>
<div class="webtoon_content_body">
<ul class="webtoon_content_col_3">
<li class="webtoon_content_col_3_type_2">
<h3>에피소드</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon_content_col_3_type_2">
<h3>옴니버스</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon_content_col_3_type_2">
<h3>스토리</h3>
<ul class="webtoon_lists">
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
<li class="webtoon_list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon_content_col_info_right">
<h4>육가족</h4>
<p>pianopia1</p>
<span>육가족의 일상 일기</span>
<div class="webtoon_content_rating">
<div class="star"></div>
<span class="score">9.07</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</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">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">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">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">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">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">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">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>
</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">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">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">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">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>
</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>
<!-- webtoondetail.html 언어 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<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="#">급식아빠-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">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">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">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">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">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">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">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>
</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">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">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">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">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>
</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>
</html>
<!-- style.css언어 -->
/*만화 오른쪽 디자인*/
#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: 12px;
}
#webtoon_main .webtoon_main_right .webtoon_challenge_wrap .webtoon_info p a {
color: gray;
}
#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: 240px;
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 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 30px;
height: 12px;
}
#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;
}
#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 gray;
}
#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 {
/*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;
}
/* 웹툰 상세 페이지 */
.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-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;
border-color: #3a3a3a;
color: #fbc000;
}
.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;
}-
순서가 있고, 순서가 의미가 있는 리트스라면 ol태그 사용
-
리스트를 만들때 앞에 숫자를 나타나게 하는 속성으로 list-style: decimal 이 있다.
-
html특수문자
1.&cop : © 저작권 특수문자
공백을 만들어줄때 쓰는 특수문자 
-
text-transform: uppercase 일괄적으로 대문자로 변환
-
text-transform: lowercase 일괄적으로 소문자로 변환
-
text-transform: capitalize 첫글자만 대문자로 변환
-
transparent : 투명색
강의가 끝난후 소감
소스코드도 정말 길었고, 강의 내용 자체에 수정하고, 추가하는 부분이 많아 머리가 너무 복잡하다.
힘든점, 문제점
소스코드가 길어지는 확실히 큰그림? 이걸 보는 능력이 많이 떨어진다는걸 느꼇다
개선방안
결국 저문제를 해결할려면 많이 해보는 수밖에는 없는거 같다.
Author And Source
이 문제에 관하여(2021.07.26네이버만화2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dogyeomyeo/2021.07.26네이버만화2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
