개발일지 14일차

이재경·2021년 6월 11일
네이버웹툰
0

학습 내용

  • 네이버웹툰 상단 / 왼쪽 영역
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/webtoon.css">
</head>
<body>

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

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

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

		<div class="webtoon-header-nav">
			<div class="webtoon-container">
				<nav>
					<ul>
						<li 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>

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

	</header>



	<main role="main" id="webtoon-main">
		
		<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>


				<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/210x110">
								<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/210x110">
								<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/210x110">
								<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/210x110">
								<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/210x110">
								<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/210x110">
								<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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</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>pianopial</p>
											<span>육가족 일상 일기</span>

											<div class="webtoon-content-rating">
												<div class="star"></div>
												<span class="score">9.70</span>
											</div>
										</div>
									</li>
								</ul>
							</li>
						</ul>

					</div>

				</div>
			</div>

			<div class="webtoon-main-right">
				
			</div>
		</div>

	</main>

</body>
</html>

webtoon.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: #000000;
}
img {
	vertical-align: middle;
}
button {
	border: none;
}
input, textarea {
	outline: none;
}
.clearfix {
	clear: both;
}
.container {
	width: 1130px;
	margin: 0 auto;
}
/* 웹툰 페이지 */
.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: gray;
}
#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 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;
}
/* y축 중앙정렬 : height값과 똑같이 line-height값을 적용하면  */
#webtoon-header  .webtoon-header-nav nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 15px;
	line-height: 40px;
}
#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;
}
/* 자식의 높이값을 인식하기 위해 overflow 적용 */
#webtoon-main .webtoon-container {
	overflow: hidden;
}
#webtoon-main .webtoon-main-left {
	float: left;
	width: 694px;
}
#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-right .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:first-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 nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li {
	width: auto;
	height: 22px;
	margin-right: 15px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li.on {
	border-bottom: solid 2px #00d564;
	margin-bottom: -1px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul 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 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;
}

결과

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

webtoon-carousel-right 부분 중 webtoon-carousel-banner-nav의 화면구성이 쉽지 않았다.
webtoon-content-body 부분에 flex가 적용이 안되서 안쪽의 ul li 부분이 제대로 좌우 정렬이 되지않았다.

해결법 작성

개발자 도구 사용을 통해 코드 오류 수정을 하고, 화면 구성을 어떻게 했는지 반복학습 하였다.

학습 소감

코드가 길어질수록 복잡해져서 따라가기 조금 벅차지만 이전 수업에서 배웠던 부분들은 숙지가 어느부분 되어있어서 오류 수정의 속도가 빨라졌음 느껴 약간의 성취감을 느낄 수 있었다. 하지만 아직 부족한 점이 많기 때문에 부족한 부분을 보충해야겠다는 생각을 했다.

profile
이재경
I'm Closer
이전 포스트

개발일지 13일차

다음 포스트

개발일지 15일차

0개의 댓글