2021.06.11 (네이버 웹툰 1,2)

이상화·2021년 6월 11일
0

학습한 내용

[네이버 웹툰 상단 부분]

	<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="webtonn.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_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: 18px;
}

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

#webtoon_header .webtoon_header_top .webtoon_header_left h3 a {
	color: grey;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .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_left .webtoon_header_input_wrap input {
	width: calc(100% - 35px);
	height: 100%;

	border: none;

	padding: 0 10px;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .webtoon_header_input_wrap input:focus {
	outline: none;
}

#webtoon_header .webtoon_header_top .webtoon_header_left .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: 11px;
}

#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;
	font-weight: 700;
}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap {

}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap .icon_ex_mark {
	vertical-align: middle;

	display: inline-block;
	width: 16px;
	height: 13px;
	background-color: #000000;
}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap a {
	vertical-align: middle;
	
	font-size: 11px;
	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>

				<div class="webtoon_banner"></div>

			</div>

			<div class="webtoon_main_right">
				
			</div>
		</div>
	</main>
#webtoon_main .webtoon_container {
	overflow: hidden;
}

#webtoon_main .webtoon_main_left {
	float: left;
	font-size: 12px;
	width: 694px;
	height: 2000px;
	background-color: yellow;
}

#webtoon_main .webtoon_main_left .webtoon_carousel {
	overflow: hidden;

	width: 694px;
	height: 252px;

	margin-bottom: 20px;

	background-color: #ffffff;
}

#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 .webtoon_carousel_left h2 {
	font-size: 24px;

	margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left span {
	color: #00d564;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left p {
	font-size: 11px;
	color: #808285;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left ul {
	margin-top: 40px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left ul li {
	font-size: 11px;

	margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left ul li.on a {
	color: #00d564;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left ul 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 .webtoon_carousel_right .webtoon_carousel_banner {
	width: 582px;
	height: 195px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner img {
	width: 100%;
	height: 100%;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav {
	position: relative;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .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 .webtoon_carousel_right .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 .webtoon_carousel_right .webtoon_carousel_banner_nav ul li:first-child {
	border-left: none;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li:last-child {
	border-right: none;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav ul li img {
	width: 100%;
	height: 100%;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav .btn {
	position: absolute;

	width: 20px;
	height: 57px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .webtoon_carousel_banner_nav .btn.btn_prev {
	left: 0;
	top: 0;

	background-color: pink;	
}

#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right .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;
}

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

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

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body nav ul li a {
	color: grey;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 {
	width: 210px;
	height: 196px;

	font-size: 11px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 img {
	margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info h4 {
	margin-bottom: 5px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info p {
	margin-bottom: 5px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_1 .webtoon_content_col_3_info span {
	color: grey;
}

				<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.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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>pianopia1</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>
#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 {
	width: 210px;
	
	font-size: 12px;

	margin-top: 14px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 h3 {
	font-size: 14px;
	color: grey;
	
	margin-bottom: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 .webtoon_lists {

}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .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 .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 .webtoon_lists li img {
	margin-right: 10px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 .webtoon_lists li .webtoon_content_col_info_right .webtoon_content_rating {
	margin-top: 15px;
}

#webtoon_main .webtoon_main_left .webtoon_content .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 .webtoon_lists li .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 .webtoon_content_body .webtoon_content_col_3 .webtoon_content_col_type_2 .webtoon_lists li .webtoon_content_col_info_right .webtoon_content_rating .score {
	font-size: 11px;
	color: grey;

	vertical-align: middle;
}

학습내용 중 어려웠던 점

점점 html코드와 css코드가 길어지고 선택자들이 길어지고 많아지다보니 코드를 넣어야 하는 위치를 찾는게 점점 햇갈리기 시작했습니다.

그리고 초반엔 괜찮았는데 를 사용해 네이밍하다 영상에선 -로 어느순간부터 넘어갔는데 초반에 를 사용했고 저같은 경우도 가 익숙해서 계속 를 사용하다 보니 영상이라 네이밍이 달라져서 오류찾는데 어려움이 있었습니다.

해결방법

id나 class명 길이의 경우 익숙해지면 중간 생략이나 간략화 해서 줄일수 있긴 하겠지만 아직은 최대한 영역을 구분짓기 위해 계속 전체 경로를 사용해서 작성했습니다.

네이밍 규칙에 _가 익숙한 네이밍이라 이름이나 별명을 만드는데는 문제가 없는데 오류 찾는데 어려움이 있어서 따로 올려주신 ex파일과 개발자 도구를 통해 어느 선택자까지 적용됬고 어디서 부터 안됬는지 차근차근 순서대로 찾아가는 방식으로 해결했습니다.

학습소감

초반엔 잘 몰랐는데 이게 클래스명이 길어지다보니 선택자의 길이가 화면을 벗어날 정도로 길어져서 최대한 빠르게 선택자에 대해서 익숙해진 다음 생략 할 수 있는 부분은 빠르게 생략하면서 작성 해야 겠다고 생각했습니다.

profile
이상화
개발자를 꿈꾸는 이상화입니다.
이전 포스트

2021.06.10 (네이버 쇼핑 2편)

다음 포스트

2021.06.14 (네이버 웹툰 3,4)

0개의 댓글

관련 채용 정보