개발일지 14일차

154293 단어 네이버웹툰네이버웹툰

학습 내용

  • 네이버웹툰 상단 / 왼쪽 영역
<!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 부분이 제대로 좌우 정렬이 되지않았다.

해결법 작성

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

학습 소감

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

211105, 자료구조 Ch.02
UISplitViewController.DisplayMode

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage