2021.07.23 NAVER-5

정혜리·2021년 7월 23일

CSS Naver html 개발일지 코린이 프론트엔드

Practice-copy_websites

목록 보기

9/15

Day20,
오늘은 Naver 웹툰 페이지를 따라 만들어봤다! 정말 어렵다...

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기

Naver-'웹툰 : https://comic.naver.com/index

`<header>`

html

new file-save(webtoon.html, webtoon-detail.html), save(style0723.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
기본 설정 + html, css 파일을 연동

<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>
	<link rel="stylesheet" type="text/css" href="css/style0723.css">
</head>
<body>

</body>
</html>

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

CSS-Style

(어제의 css에 이어서)
1. Default CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
ol, ul { list-style: none; }
a {	text-decoration: none; 	color: #000000; }
img { vertical-align: middle; }
.clearfix { clear: both; }
button { border: none; }
input, textarea { outline: none; }

/*웹툰 페이지*/
.webtoon-container { width: 960px; margin: 0 auto; }
.webtoon-border { border: solid 1px #ced2d7; }

#webtoon-header의 배경색을 흰색으로 설정한다.

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

.webtoon-header-top 배경색을 설정하고, 아래 경계를 디자인한다. padding 값으로 상,하에 간격을 만든다. .webtoon-container, .webtoon-header-left의 배열을 'flex'기능으로 설정한다.

#webtoon-header .webtoon-header-top { background-color: #ffffff;
	padding: 10px 0 7px 0; border-bottom: solid 1px #f2f2f2; }
#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 { width: 550px;
	display: flex; flex-wrap: wrap; align-items: center; }

.webtoon-header-left의 <h2>,<h3>(<h3>태그의 기본 속성 값때문에 <a>태그로 묶어 글자색을 설정 한다.)는 태그의 글자를 디자인하고 margin 값으로 태그 간격을 설정한다.

#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 8px 0 10px; }
#webtoon-header .webtoon-header-top .webtoon-header-left h3 { margin-right: 30px; }
#webtoon-header .webtoon-header-top .webtoon-header-left h3 a { font-size: 16px;
	color: grey;  }

검색창인 .webtoon-header-input-wrap의 너비, 높이 등을 설정하고 'flex'기능으로 배열, 테두리 디자인한다. input-wrap 안의 .input, .btn-search의 너비, 높이를 설정하고 디자인한다.

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap { width: 315px;
	height: 37px; display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; border: solid 1px #e5e5e5; }
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input { 
	width: calc(100% - 35px); height: 100%; border: none; }
#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-right의 배열을 'flex'기능으로 설정하고 .btn-login, .btn-menu를 디자인한다.(글자크기, 너비, 높이, 배경색 등)

#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 { 
	font-size: 12px; border: solid 1px #000; padding: 2px 4px; margin-right: 20px; }
#webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu { 
	width: 16px; height: 16px; background-color: blue; }

.webtton-header-nav영역 아래에 border값으로 경계를 만들고 .webtoon-container의 배열을 'flex'기능으로 설정한다. .webtoon-header-nav에 속한 태그들(<ul>,<li>,<a>)을 디자인한다. <li>태그 중 "on"이라는 class를 가진 태그에 한하여 배경색과 글자 색이 달라지도록 설정한다.

#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 { color: #ffffff;
	background-color: #00d564; }
#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-heade-link-wrap의 태그들을 디자인한다. icon-ex-mark의 너비, 높이, 배경색 등을 디자인하고 속한 태그들의 배열을 일렬로 설정한다. .webtoon-header-link-wrap의 <a>태그에 커서를 움직이면 밑줄이 생기도록 :hover로 text-decoration: underline;을 설정한다.

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark { 
	display: inline-block; width: 16px; height: 14px; background-color: #000;
	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>` - 1

html

(<header> html에 이어서)
1.

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

(main_right css에 이어서)
1. <main>과 <header>의 간격을 padding-top으로 설정한다. .webtoon-container에 속한 태그들과 영향을 받도록 overflow: hidden으로 설정한다.

#webtoon-main { padding-top: 100px; }
#webtoon-main .webtoon-container { overflow: hidden; }

.webtoon-main-left영역이 main영역의 좌측으로 설정하고 너비를 설정한다. .webtoon-carousel의 너비, 높이, 배경색 등을 디자인하고 margin 값으로 간격을 생성한다.

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

.webtoon-carousel-left가 영역의 좌측에 배열되도록 float:left;로 설정하고 너비, 간격을 설정한다. 이에 속한 태그들(<h2>,<span>,<p>)을 디자인한다.

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left { 
	width: 112px; float: left; padding: 20px 5px 0 15px; }
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 { 
	font-size: 25px; }
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 span { 
	color: #00d564; }
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left p { 
	font-size: 12px; color: #808285; }

.webtoon-carousel-left에 속한 태그 들을 디자인한다. (<ul>,<li>) 이때, <li>태그 간의 간을 설정하되, 가장 마지막 태그에는 적용되지 않도록 설정한다.

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul { 
	margin-top: 48px; }
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li { 
	font-size: 12px; margin-bottom: 10px; }
#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-left li.on a { 
	color: #00d564; }

.webtoon-carousel-right의 너비를 설정한다. 이 태그가 우측에 배열 되도록 float:right;로 설정하고 배너의 너비와 높이를 설정한다.

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right { 
	width: calc(100% - 112px); float: right; }
#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-carousel-banner에 속한 태그들(<nav>,<ul>,<li>)을 디자인한다. <nav>태그가 자식태그들과의 영향을 받도록 position을 relative로 설정하고 자식태그들의 배열을 'flex'기능으로 설정한다. <li>태그 간의 간격을 설정하되, 양끝에는 간격이 없도록 설정한다.

#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-right: solid 1px #e5e5e5;
	border-left: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-carousel-banner-nav 태그에 속한 <img>태그의 너비와 높이를 설정하고 .btn을 디자인(위치, 색상 등)한다.

#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-banner를 디자인한다.

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

결과 ▼

9. .webtoon-content와 이에 속한 태그들을 디자인한다. .webtoon-content-header는 자식 태그와 영향을 받기 위해 position을 relative로 설정하고 아래에 경계를 위해 border-bottom값을 설정한다. <h2>,<span>태그를 디자인한다.

#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-contetn-header의 태그들(<nav>,<ul>,<li>,<a>)을 디자인한다. 'flex'기능으로 <ul>태그의 배열을 설정하고, 이에 속한 <li>태그 간의 간격을 margin값으로 설정한다. 각 항목에 링크기능이 속한 영역 전체에 적용되도록 <a>태그를 block 속성을 띄도록 설정하고 글자를 디자인한다.

#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; 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; }
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li a { 
	display: block; padding-bottom: 6px; font-size: 13px; color: #737373; }

.webtoon-content-body에 속하는 태그들(<nav>, <ul>, <li>,<a>)을 디자인한다. 'flex'기능으로 <ul>태그의 배열을 설정하고, 이에 속한 <li>태그 간의 간격을 margin값으로 설정한다. <a>태그의 글자를 디자인한다.

#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-content-col-3의 배열을 'flex'기능으로 설정하고 그에 속한 .webtoon-content-col-type-1의 너비, 높이, 글자크기를 디자인한다. .webtoon-content-col-type-1에 속한 태그들에 margin값을 설정해 간격을 설정하고 글자 색을 디자인한다.

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

결과 ▼

무엇이 어려웠지?

input에 설정한 너비가 이상하게 꽉 차지 않고 절반 정도에 그쳤다..

어떻게 해결했지?

justify-content: space-between;으로 깔-끔하게 해결! 그리고 너비를 설정할 때 calc이라고 적어야 하는걸 cal 만 적고 왜 너비가 원하는대로 안되는거지 고민 했었다..! 결국 오탈자와의 싸움은 끝나지 않음..

그래서?

아 양이 너무 많아서 개발일지 쓰는거 너무 힘들다.. 단순 반복적인 다음 개발일지 부터는 이렇게 자세하게 다루기 보다는 레이아웃을 어떤 식으로 구상했는지에 대해 포커스를 맞춰서 쓰고, CSS 디자인도 보편적으로 반복되는 디자인은 빼고 특이하게 적용하는 디자인이 있는 것만 적어야 겠다. 너무 세세한데 시간을 뺏기는 기분이다...ㅠ

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0723

정혜리

이전 포스트

2021.07.22 NAVER-4

다음 포스트

2021.07.23 NAVER-5

Practice-copy_websites

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기

`<header>`

html

CSS-Style

`<main>` - 1

html

CSS-Style

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.22 NAVER-4

2021.07.26 NAVER-6

0개의 댓글

2021.07.23 NAVER-5

Practice-copy_websites

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기

<header>

html

CSS-Style

<main> - 1

html

CSS-Style

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.22 NAVER-4

2021.07.26 NAVER-6

0개의 댓글

`<header>`

`<main>` - 1