Dev log - 16, 네이버 메인 카피캣 실습 #1

박강산·2021년 7월 19일

대구AI스쿨 - 개발일지

목록 보기

16/44

학습한 내용

유용한 크롬 확장 프로그램

web developer chrome extension
(https://wpastra.com/chrome-developer-extensions/)
Wappalyzer - 웹 사이트의 기술 스펙을 확인하는 확장 프로그램, 모든 웹사이트의 기술 스펙을 볼 수는 없음, 제한적임
CSS Viewer : 웹 사이트의 css 속성과 속성값을 쉽게 보여주는 확장 프로그램
Whatfont : 웹 사이트의 font 속성을 알려주는 확장 프로그램
Lorem Ipsum Generator : 임의의 문장을 만들 때 활용되는 확장 프로그램
ColorZilla : 웹 사이트에서 사용된 색을 확인하는 확장 프로그램

네이버 메인 실습 - 기본 세팅

코드 작성에는 일관성 및 통일성 필요 (유지보수에도 도움) - 예를 들어 CSS 상단은 차원과 관련된 영역, 중단은 공간과 관련된 영역, 하단은 텍스트와 관련된 영역임
container 라는 width 값이 1130px 인 일종의 틀을 만듬
button 은 border 값을 기본적으로 가지고 있기 때문에 초기화 작업
input, textarea 영역 클릭 시 생기는 테두리를 제거 하기 위해 outline: none 사용

}

HTML 문서

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

CSS 문서

/* 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;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

네이버 메인 실습 - 네이버 소개

검색바는 input, button 태그로 작업 가능
width: calc 는 계산식으로 범위를 지정하는 속성

width: 100%

width: calc(100% - 52px)

inline 사이에는 공백이 있기 때문에, space-between 을 사용하여 공백 제거
클릭이나 선택, 즉 포커스를 받으면 나타나는 효과 지정은 :focus (가상 선택자)

HTML 문서

<body>
	<header id="main-header">
		<div class="search_area">		
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>
		</div>
	</header>
</body>

CSS 문서 1 - style.css

#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;
}

#main-header .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;

	font-size: 22px;
	border: none;
}

#main-header .search_wrap input:focus {
	outline: none;
}

#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

네이버 메인 실습 - 네이버 상단

'https://cssgenerator.org/box-shadow-css-generator.html'
사이트를 통해 box-shadow 속성 활용 - 여기서는 경계선으로 활용

HTML 문서

<body>
	<header>
		<div id="navbar">
			<div class="container">				
				<ul>
					<li><a href="#">메일</a></li>
					<li><a href="#">카페</a></li>
					<li><a href="#">블로그</a></li>
					<li><a href="#">지식인</a></li>
					<li><a href="shop.html">쇼핑</a></li>
					<li><a href="webtoon.html">웹툰</a></li>
				</ul>
			</div>
		</div>
	</header>
</body>

CSS 문서 1 - style.css

#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main-header #navbar ul {
	padding: 11px 0;
}

#main-header #navbar ul li {
	display: inline-block;
	margin-right: 5px;
}

#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}

네이버 메인 실습 - 네이버 왼쪽(광고, 뉴스)

main 영역을 main-left 와 main-right 로 나누어 영역 설정, 각각 flaot 속성을 사용하여 왼쪽-오른쪽 정렬

HTML 문서

<body>
	<main role="main" class="container">
		<div id="main_left">		
			<div id="banner_wrap"></div>

			<div id="news_wrap">		
				<div class="news_header">
					<h2>뉴스스탠드</h2>
                    
					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
					</div>
				</div>

				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
				</ul>
			</div>
		</div>     
</body>

CSS 문서 1 - style.css

main {
	overflow: hidden;
	padding-top: 20px;
}

main #main_left {
	float: left;
	width: 750px;
}

main #main_right {
	float: right;
	width: 350px;
}

main #banner_wrap {
	width: 750px;
	height: 135px;
	background-color: #000000;

	margin-bottom: 12px;
}

main #news_wrap .news_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 22px 0 16px 0;
}

main #news_wrap .news_header h2 {
	font-size: 14px;
	font-weight: 700px;
}

main #news_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 60px;
}

main #news_wrap .news_header .news_btn_wrap button {
	width: 15px;
	height: 15px;
	background-color: blue;
}

main #news_wrap .news_lists {
	overflow: hidden;
	border: solid 1px #dae1e6;
}

main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;

	text-align: center;
}

main #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}

main #news_wrap .news_lists .news_list:nth-child(19),
main #news_wrap .news_lists .news_list:nth-child(20),
main #news_wrap .news_lists .news_list:nth-child(21),
main #news_wrap .news_lists .news_list:nth-child(22),
main #news_wrap .news_lists .news_list:nth-child(23),
main #news_wrap .news_lists .news_list:nth-child(24) {
	border-bottom: none;
}

main #news_wrap .news_lists .news_list img {
	position: relative;

	top: 50%;
	transform: translateY(-50%);
}

네이버 메인 실습 - 네이버 왼쪽(오늘 읽을만한 글)

레이아웃 높이 값이 있을 때, line-height 에 높이 값과 동일한 값을 넣게되면, y축 가운데 정렬이 됨

HTML 문서

<body>
	<main role="main" class="container">
		<div id="main_left">		
			<div id="blog_wrap">
				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>
					<div class="right_header">
						<span class="count"><strong>1,853</strong> 개의 글</span>
						<span>관심주제 설정</span>
					</div>
				</div>

				<nav class="blog_nav">
					<ul>
						<li><a href="#">엔터1</a></li>
						<li><a href="#">엔터2</a></li>
						<li><a href="#">엔터3</a></li>
						<li><a href="#">엔터4</a></li>
						<li><a href="#">엔터5</a></li>
						<li><a href="#">엔터6</a></li>
						<li><a href="#">엔터7</a></li>
						<li><a href="#">엔터8</a></li>
					</ul>
				</nav>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

CSS 문서 1 - style.css

main #blog_wrap {
	padding-top: 35px;
}

main #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 17px;
}

main #blog_wrap .blog_header .left_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;	
}

main #blog_wrap .blog_header .left_header h3 {
	font-size: 14px;
	margin-right: 8px;
}

main #blog_wrap .blog_header .left_header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;	
}

main #blog_wrap .blog_header .right_header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right_header .count strong {
	color: #000000;
}

main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;
}

main #blog_wrap .blog_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;

	line-height: 49px;
	text-align: center;
}

main #blog_wrap .blog_list_wrap {
	padding-top: 18px;
	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
	margin-bottom: 18px;
}

main #blog_wrap .blog_list_wrap li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
	width: 170px;
	height: 114px;
	margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
	width: 559px;
	padding-right: 47px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {
	font-size: 12px;
	color: #35ae5e;
}

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {
	color: #505050;
}

main #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info {
	padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info span {
	font-size: 12px;
}

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

부모 height 값과 자식 line-height 값이 같으면 y축 가운데 정렬 되는 것

해결방법

강의 복습과 인터넷 검색을 통해, 부모 height 크기에 딱 맞게 자식의 줄 간격이 맞춰지는 것이기 때문에, y축 가운데 정렬이 되는 것임을 알았음.

학습 소감

오늘은 대형 포털사이트 '네이버' 웹 사이트를 통해 카피캣 실습을 해보았음. 저번부터 생각했던 것이지만, 확실하게 하나의 레이아웃을 잘 만들면, 그와 비슷한 영역들은 반복하여 작업한다는 것이 잘 느껴졌음.

기본 반복적인 레이아웃들을 계속 연습해보면서, 영상을 보지 않아도 간단한 레이아웃 작업은 할 수 있도록 계속 만들어 봐야겠음.

박강산

안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.

Dev log - 16, 네이버 메인 카피캣 실습 #1

대구AI스쿨 - 개발일지

학습한 내용

유용한 크롬 확장 프로그램

네이버 메인 실습 - 기본 세팅

네이버 메인 실습 - 네이버 소개

네이버 메인 실습 - 네이버 상단

네이버 메인 실습 - 네이버 왼쪽(광고, 뉴스)

네이버 메인 실습 - 네이버 왼쪽(오늘 읽을만한 글)

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

해결방법

학습 소감

Dev log - 15, 덴마크 쇼핑몰 카피캣 실습 #1

Dev log - 17, 네이버 메인 카피캣 실습 #2

0개의 댓글