210723 개발일지

1) 학습한 내용

국내외 사이트 카피캣 (네이버 웹툰 1편)

> 상단영역

<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 class="on"><a href="webtoon.html">홈</a></li>
<li><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>

.webtoon-border {border: solid 1px #ced2d7;}

.webtoon-container 
	{width: 960px;
	margin: 0 auto;}

#webtoon-header {background-color: #ffffff;}

#webtoon-header .webtoon-header-top 
	{background-color: #ffffff;
	border-bottom: solid 1px #f2f2f2;

	padding: 10px 0 8px 0;}

#webtoon-header .webtoon-header-top .webtoon-container 		
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}

#webtoon-header .webtoon-header-top .webtoon-header-left 	
	{display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 550px;}

#webtoon-header .webtoon-header-top .webtoon-header-left h2 {font-size: 20px;}

#webtoon-header .webtoon-header-top .webtoon-header-left .bar 
	{width: 1px;
	height: 13px;
	background-color: #d2d2d2;

	margin-left: 8px;
	margin-right: 10px;}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 {margin-right: 30px;

	font-size: 16px;}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {color: grey;}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 315px;
	height: 37px;
	border: solid 1px #e5e5e5;}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input 
	{width: calc(100% - 35px);
	height: 100%;
	border: none;

	padding: 0 10px;}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input:focus 
	{outline: none;}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap .btn-search 
	{width: 35px;
	height: 100%;
	background-color: #00d564;}

#webtoon-header .webtoon-header-top .webtoon-header-right 	
{display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;}

#webtoon-header .webtoon-header-top .webtoon-header-right .btn-login 
	{border: solid 1px #000000;
	
	padding: 2px 4px;
	margin-right: 20px;
	
	font-size: 12px;}

#webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu 
	{width: 16px;
	height: 16px;
	background-color: blue;}

#webtoon-header .webtoon-header-nav 
	{border-bottom: solid 1px #e5e5e5;}

#webtoon-header .webtoon-header-nav .webtoon-container 	
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}

#webtoon-header .webtoon-header-nav nav {}

#webtoon-header .webtoon-header-nav nav ul 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;}

#webtoon-header .webtoon-header-nav nav ul li 
	{width: auto;
	height: 40px;}

#webtoon-header .webtoon-header-nav nav ul li.on a {
	background-color: #00d564;
	color: #ffffff;}

#webtoon-header .webtoon-header-nav nav ul li a 		
	{display: block;
	width: 100%;
	height: 100%;
	padding: 0 15px;

	line-height: 40px;

	font-size: 14px;}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap {}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark
	{display: inline-block;
	width: 16px;
	height: 14px;
	background-color: #000000;	

	vertical-align: middle;}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a 
	{vertical-align: middle;
	font-size: 12px;
	color: #606060;}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {text-decoration: underline;}

> 메인 왼쪽

<main role="main" id="webtoon-main">
		
<div class="webtoon-container">
			
<div class="webtoon-main-left">
				
<div class="webtoon-carousel webtoon-border">
					
<div class="webtoon-carousel-left">
<h2>오늘의<br><span>웹툰</span></h2>
<p>5월 19일 수요일</p>
<ul>
<li class="on"><a href="#">인기순</a></li>
<li><a href="#">업데이트순</a></li>
<li><a href="#">조회순</a></li>
<li><a href="#">별점순</a></li>
</ul>
</div>

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

#webtoon-main 
	{padding-bottom: 100px;}

#webtoon-main .webtoon-container 
	{overflow: hidden;}

#webtoon-main .webtoon-main-left 
	{float: left;

	width: 694px;
	height: 2000px;
	background-color: yellow;}

#webtoon-main .webtoon-main-left .webtoon-carousel 
	{overflow: hidden;
	width: 694px;
	height: 252px;
	background-color: #ffffff;

	margin-bottom: 20px;}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left 
	{float: left;
	width: 112px;
	padding: 20px 5px 0 15px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left h2 
	{font-size: 25px
	margin-bottom: 13px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left span 
	{color: #00d564;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left p 	{font-size: 12px;
	color: #808285;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left ul {margin-top: 48px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li 
	{font-size: 12px;
	margin-bottom: 10px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li.on a 
	{color: #00d564;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li:last-child 
	{margin-bottom: 0;}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right 
	{float: right;
	width: calc(100% - 112px);}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner 
	{width: 582px;
	height: 195px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner img 
	{width: 100%;
	height: 100%;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav 
	{position: relative;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 540px;
	margin: 0 auto;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li 
	{width: 135px;
	height: 57px;
	border-left: solid 1px #e5e5e5;
	border-right: solid 1px #e5e5e5;}


#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:fist-child 
	{border-left: none;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child 
	{border-right: none;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img 
	{width: 100%;
	height: 100%;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn 
	{position: absolute;
	width: 20px;
	height: 57px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev 
	{left: 0;
	top: 0;
	background-color: pink;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next 
	{right: 0;
	top: 0;	
	background-color: blue;}

> 메인 왼쪽2

<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-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-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-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-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-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-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-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="">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-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-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-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-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-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>

#webtoon-main 
	{padding-bottom: 100px;}

#webtoon-main .webtoon-container 
	{overflow: hidden;}

#webtoon-main .webtoon-main-left 
	{float: left;

	width: 694px;
	height: 2000px;}

#webtoon-main .webtoon-main-left .webtoon-carousel 
	{overflow: hidden;
	width: 694px;
	height: 252px;
	background-color: #ffffff;

	margin-bottom: 20px;}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left 
	{float: left;
	width: 112px;
	padding: 20px 5px 0 15px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left h2 
	{font-size: 25px
	margin-bottom: 13px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left span 
	{color: #00d564;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left p 
	{font-size: 12px;
	color: #808285;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left ul 
	{margin-top: 48px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li 
	{font-size: 12px;
	margin-bottom: 10px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li.on a 
	{color: #00d564;}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li:last-child 
	{margin-bottom: 0;}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right 
	{float: right;
	width: calc(100% - 112px);}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner 
	{width: 582px;
	height: 195px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner img 
	{width: 100%;
	height: 100%;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav 	
	{position: relative;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 540px;
	margin: 0 auto;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li 
	{width: 135px;
	height: 57px;
	border-left: solid 1px #e5e5e5;
	border-right: solid 1px #e5e5e5;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:fist-child 
	{border-left: none;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child 
	{border-right: none;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img 
	{width: 100%;
	height: 100%;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn 
	{position: absolute;
	width: 20px;
	height: 57px;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev 
	{left: 0;
	top: 0;
	background-color: pink;}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next 
	{right: 0;
	top: 0;	
	background-color: blue;}


#webtoon-main .webtoon-main-left .webtoon-banner 
	{width: 100%;
	height: 80px;
	background-color: black;}

#webtoon-main .webtoon-main-left .webtoon-content 	
	{background-color: #ffffff;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header 
	{position: relative;
	border-bottom: solid 1px #e5e5e5;
	padding: 26px 0 10px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header.webtoon-content-header-recommend 
	{padding-bottom: 0;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 {font-size: 20px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 span 
	{color: #00d564;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav 
	{margin-top: 20px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header ul 
	{display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li 
	{width: auto;
	height: 22px;
	margin-right: 15px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li.on 
	{border-bottom: solid 2px #00d564;
	margin-bottom: -1px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li a 
	{display: block;
	padding-bottom: 6px;

	font-size: 13px;
	color: #737373;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav 
	{padding: 12px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul 
	{display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li 
	{margin-right: 8px;
	font-size: 12px;}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li a {color: grey;}

#webtoon-main .webtoon-main-left .webtoon-content-col-3
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;} 

#webtoon-main .webtoon-main-left .webtoon-content-col-3 .webtoon-content-col-type-1 
	{width: 210px;
	height: 196px;
	font-size: 12px;} 

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 img {margin-bottom: 10px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info h4 
	{margin-bottom: 5px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info p 
	{margin-bottom: 5px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info span 
	{color: grey;}


#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 
	{width: 210px;
	font-size: 12px;
	margin-top: 14px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 h3 
	{font-size: 14px;
	color: grey;
	margin-bottom: 10px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 .webtoon-lists {	}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 .webtoon-lists li 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 90px;

	margin-bottom: 20px}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 .webtoon-lists li img 
	{margin-right: 10px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating 
	{margin-top: 15px;}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating .star 
	{display: inline-block;

	width: 60px;
	height: 14px;
	background-color: red;

	vertical-align: middle;}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating .score 
	{font-size: 12px;
	color: grey;

	vertical-align: middle;}

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

내용이 너무 많았다
그래서 중간중간 오타도 많이 나고 조금 따라잡기 힘들었다.

3)해결방법 작성

다시 돌려보고 수정하는것뿐..
해결은 했다.

4)학습 소감

내용이 너무 많아서 힘들었다.
7월 셋째주도 끝났다 후.. 힘든 주 였다