7월 23일 Velog

류영서·2021년 7월 23일

학습한 내용

네이버 웹툰 실습

https://comic.naver.com/index

0. Default

html 파일 두 개로 두 페이지 제작 = webtoon.html / webtoon_detail.html
두 파일의 header/footer 영역은 같다

[html]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>웹툰</title>
</head>
<body></body>
</html>

[css]

.webtoon_container {
	width: 960px;
	margin: 0 auto;
}

.webtoon_border {
	border: solid 1px #ced2d7;
}

내부 컨텐츠 중앙 정렬과 border를 디폴트로 class 지정하여 적용한다.

1. Header

상단 영역(webtoon_header_top)
nav 영역(webtoon_header_nav)

[html]

	<header id="webtoon_header">		
		<div class="webtoon_header_top">
			<div class="webtoon_container">

				<div class="webtoon_header_left">
					<h1><a href="index.html"><strong>NAVER</strong></a></h1>
					<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>

상단 영역/nav 영역 : 내부 컨텐츠 중앙 정렬을 위해 영역 내부에 div(class = webtoon_container)를 이용하여 컨텐츠들을 감싼다.
em : bar를 넣기 위해 사용되는 태그
i : 아이콘을 넣기 위해 사용되는 태그

[css]

#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 h1 {
	font-size: 14px;
	font-weight: 900;

	margin-right: 5px;
}

#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: 0 10px 0 8px;
}

#webtoon_header .webtoon_header_top .webtoon_header_left h3 {
	margin-right: 30px;

	font-size: 16px;
	/*color: grey: */ -> 직접 a 태그에 지정
}

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

	font-size: 12px;
}

#webtoon_header .webtoon_header_top .webtoon_header_right .btn_menu {
	width: 16px;
	height: 16px;
	background-color: black;
}



#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 ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#webtoon_header .webtoon_header_nav ul li {
	width: auto;
	height: 40px;
}

#webtoon_header .webtoon_header_nav ul li.on a {
	background-color: #00d564;

	color: #ffffff;
}

#webtoon_header .webtoon_header_nav ul li a {
	display: block; -> 공간을 만들기 위해서

	width: 100%;
	height: 100%;

	padding: 0 15px;

	line-height: 40px; -> y축 중앙 정렬 효과
	font-size: 14px;
}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap .icon_ex_mark {
	display: inline-block;

	width: 16px;
	height: 14px;
	background-color: black;

	vertical-align: middle;
}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap a {
	vertical-align: middle; -> inline 성격을 가지기 때문에 x축 중앙 정렬로 사용

	font-size: 12px;
	color: #606060;
}

#webtoon_header .webtoon_header_nav .webtoon_header_link_wrap a:hover {
	text-decoration: underline;
}

2. Main

크게 left, right 나누어 배치 -> float로 레이아웃 적용

[webtoon.html]

	<main role="main" id="webtoon_main">
		<div class="webtoon_container">
			<div class="webtoon_main_left"></div>
			<div class="webtoon_main_right"></div>
		</div>	
	</main>

[css]

#webtoon_main .webtoon_container {
	overflow: hidden; -> 높이값 인식
}

#webtoon_main .webtoon_main_left {
	float: left;

	width: 694px;
}

#webtoon_main .webtoon_main_right {
	float: right;

	width: 240px;
}

3. Main Left

(1) webtoon carousel

왼쪽(webtoon_carousel_left)
오른쪽(webtoon_carousel_right)

[webtoon.html]

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

[css]

#webtoon_main .webtoon_main_left .webtoon_carousel {
	overflow: hidden; -> 자식 요소 left, right를 float 사용해서 정렬

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

#webtoon_main .webtoon_main_left .webtoon_carousel_left h2 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: 36px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel_left ul li {
	font-size: 12px;
	margin-bottom: 10px;
}

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

#webtoon_main .webtoon_main_left .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_carousel_left의 width 값 : 112px
}

#webtoon_main .webtoon_main_left .webtoon_carousel_right .webtoon_carousel_banner {
	width: 582px;
	height: 195px;
}

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

#webtoon_main .webtoon_main_left .webtoon_carousel_right .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; -> 버튼 레이어를 위(nav)로 옮겨서 자리이동

	width: 20px;
	height: 57px;
}

#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav .btn.btn_prev {
	left: 0;
	top: 0;
	background-color: yellow;
}

#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav .btn.btn_next {
	right: 0;
	top: 0;
	background-color: blue;
}

[webtoon.html]

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

[css]

#webtoon_main .webtoon_main_left .webtoon_banner {
	width: 100%;
	height: 80px;
	background-color: black;
}

(3) webtoon content #1

상단 영역(webtoon_content_header)
컨텐츠 영역(webtoon_content_body)

[webtoon.html]

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

[css]

#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_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_content_header의 border와 높이 맞춤
}

#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;
}

류영서

이전 포스트

7월 22일 Velog

다음 포스트

7월 23일 Velog

네이버 웹툰 실습

0. Default

1. Header

2. Main

3. Main Left

(1) webtoon carousel

(2) banner

(3) webtoon content #1

7월 22일 Velog

7월 26일 Velog

0개의 댓글

관련 채용 정보