2021.07.19 NAVER-1

정혜리·2021년 7월 19일
0

Practice-copy_websites

목록 보기
5/15

Day16, Naver 웹사이트를 따라만들어보았다.

오늘 무엇을 배웠지?

++ 웹프로그래밍 할 때 도움되는 chrome 확장 프로그램

  • wappalyzer : 웹사이트 만들때 사용된 기술 spec 확인 가능
  • css view : '개발자도구-검사' 가 아니더라도 간단하게 css 확인가능
  • Whatfont : css 디자인 확인 가능 (폰트, 색상, 글자크기 등)
  • Lorem Ipsum Generator : 임의의 글 작성해줌
  • colorzilla : 웹사이트에서 사용한 특정영역의 색상값 확인 가능

Naver : https://www.naver.com/

상단

html

  1. new file-save(index0719.html), save(style0719.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
  2. 기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>
	<link rel="stylesheet" type="text/css" href="css/style0719.css">
</head>
<body>

</body>
</html>
  1. <header>태그로 상단 영역을 설정하고 id를 입력한다. <div> 태그로 들어갈 검색창 영역과 검색창 아래에 있는 배너 영역을 설정하고 class를 설정한다.
	<header id="main-header">
		<div class="search_area">
			<div class="search_wrap">
				<!-- <form></form>태그로 서버에 연결되는 작업을 해야하지만 레이아웃 연습용이라 생략, 이 태그 사용시 button 태그의 type은 submit으로 설정해야함, 기본값은 button -->
				<input type="text" name="">
				<button type="button"></button>
			</div>
		</div>

		<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="#">쇼핑</a></li>
				</ul>
			</div>
		</div>
	</header>

CSS-Style

  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; }
input, button { border: none; }
input, textarea { outline: none; }

으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, input, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.
2. .container 를 가진 class는 모두 너비는 항상 1330px, 중앙정렬되도록 설정한다.

.container { width: 1330px; margin: 0 auto; } 
  1. <header> 태그 position을 relative로 설정해 자식태그들과 영향을 받도록 한다.
#main-header { position: relative; background-color: #ffffff; }
  1. .search_area는 position: relative로 설정하고 높이를 설정한다. display를 flex로 설정하고 중앙정렬할 수 있도록 설정한다. 배경색을 설정하고 아래 테두리의 굵기, 색 등을 설정해 경계를 눈에 보이도록 설정한다.
#main-header .search_area { position: relative; height: 160px;
display: flex; justify-content: center; align-items: center; 
background-color: #ffffff; border-bottom: 1px solid #e4e8eb; }
  1. .search_wrap position은 relative로, display:flex를 설정해 웹브라우저의 중앙에 위치하도록 설정한다. 너비, 높이, 테두리 등을 디자인한다.
#main-header .search_wrap { position: relative; display: flex;
flex-wrap: wrap; justify-content: space-between; align-items: center;
width: 582px; height: 52px; border: solid 2px #19ce60; }
  1. .search_wrap 안의 태그들 <input>, <button>의 너비와 높이 등을 설정한다. :focus {outline: none;}으로 설정해 입력할 때 생기는 outline을 없앤다.
#main-header .search_wrap input { width: calc(100% - 52px);
height: 100%; padding: 13px 15px; font-size: 22px; }
#main-header .search_wrap input:focus { outline: none; }
#main-header .search_wrap button { width: 52px; height: 100%;
background-color: #19ce60; }

+++width: calc(100% - npx) 설정한 너비의 100%에서 다른 태그의 영역너비값(npx)을 뺀 값을 너비로 설정하겠다는 뜻

  1. #navbar 아래에 box-shadow로 경계선을 설정한다.
#main-header #navbar { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%); }
  1. #navbar의 자식 태그인 <ul> 태그들의 패딩값을 설정해 위아래 간격을 만들고 <li>태그의 disyplay를 inline-block으로 설정해 옆으로 배열하도록 설정하고 margin값으로 사이 간격을 만든다.
#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_left

html

(상단영역 html에 이어서)
1. <main> 태그로 메인 영역을 설정하고 class를 설정한다. 메인영역을 크게 좌/우 영역으로 구분하고 (<div>) id를 설정한다. main_left 영역에 배너, 뉴스영역으로 구분짓고, 뉴스영역에는 뉴스헤더, 신문사 칸으로 구분 짓는다. 신문사 칸은 <ul>,<li>,<img>태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.

	<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>
				</ul>
			</div>
  1. 뉴스영역 아래에 블로그/잡지/essay글을 보여주는 영역을 설정한다(blog_wrap). 이 영역에서도 header부분(<div>), 다른장르 글로 넘어가는 nav부분(<nav>)으로 구분짓는다. header부분은 좌/우측으로 나누어 left_header, right_header로 영역을 나눈다. blog_nav영역은 <ul>,<li>,<a>태그로 각 장르를 선택했을 때 그 페이지로 넘어 가도록 설정한다.
			<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="#">엔터</a></li>
						<li><a href="#">스포츠</a></li>
						<li><a href="#">자동차</a></li>
						<li><a href="#">웹툰</a></li>
						<li><a href="#">경제M</a></li>
						<li><a href="#">레시피</a></li>
						<li><a href="#">게임</a></li>
						<li><a href="#">영화</a></li>
					</ul>
				</nav>
  1. 블로그/잡지/essay에 대한 미리보기 영역은 <div>태그로 영역을 구분짓고 <ul>,<li>,<a>,<img>태그로 이미지를 연결하고 영역을 구분짓는다. 필요한 갯수만큼 <li>태그를 복사하여 붙여넣는다.
				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
							<img src="https://via.placeholder.com/170x113">
							<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>
					</ul>
				</div>
			</div>

		</div>

	</main>

CSS-Style

(상단의 css에 이어서)
1. <main>에 padding값을 적용해 상단영역과의 간격을 만들고 main 영역을 넘어가는 contents에 대해서는 나타나지 않도록 설정한다. #main_left 영역은 좌측정렬 되도록 float:left로 설정하고 너비를 설정한다. #main_right 영역은 우측정렬 되도록 float:right로 설정하고 너비를 설정한다.

main { overflow: hidden; padding: 20px 0 0 0; }

main #main_left { float: left; width: 750px; }
main #main_right { float: right; width: 350px; }
  1. #banner_wrap의 너비, 높이, 배경색 등을 설정하고 margin값으로 간격을 설정한다.
main #banner_wrap { width: 750px; height: 135px; 
	background-color: #000000; margin-bottom: 12px;}
  1. .news_header은 속한 태그가 중간에 공백을 두고 좌측 정렬, 우측정렬 되도록 'Flex' 설정을 해주고 padding 값으로 위, 아래 간격을 설정한다. '뉴스스탠드'라는 <h2>태그의 폰트 사이즈와 폰트 무게를 설정한다.
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;
}
  1. .news_header의 우측에 있는 .news_btn_wrap에 대해 위치를 설정하고 너비를 설정한다. 이에 속한 각 버튼의 너비, 크기, 색 등을 설정한다.
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; }
  1. 뉴스리스트(신문사로고)의 영역 테두리를 설정하고 디자인한다. 각 신문사 로고들이 좌->우 정렬되도록 float:left로 설정하고 너비가 6등분 되도록 16.66%로 설정해준다. 각 신문사 로고가 차지할 영역에 대한 테두리 선을 디자인하고 신문사 로고<img>가 영역안에 중앙정렬 되도록 top, transform으로 설정한다.
main #news_wrap .news_lists { overflow: hidden;
border: solid 1px #dae1e6; }
main #news_wrap .news_lists .news_list { 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 img { position: relative;
	top: 50%; transform: translateY(-50%); }
  1. 5.에서 설정한 신문사로고의 테두리가 중복되지 않도록 설정한다.
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; }
  1. 블로그/잡지/essay를 미리보여주는 영역(블로그영역)인 #blog_wrap과 뉴스 영역과의 간격을 padding값으로 설정해 준다. 블로그영역의 .blog_header가 좌/우측 정렬이 되도록 'flex'로 디자인해준다. blog_header영역과 그 아래의 영역의 간격을 padding-bottom으로 설정해준다.
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; }
  1. .left_header영역의 태그들이 위치가 좌측에서 서로 간격을 두고 위치할 수 있도록 'flex'로 설정한다. <h3>,<span>태그들의 글자 사이즈, 색상 등을 설정한다.
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; }
  1. .right_header의 태그들이 우측에서 사이에 간격을 두고 위치할 수 있도록 'flex'로 설정한다. .right_header의 <span>,<strong>의 글자 색상, 크기 등을 설정한다.
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; }
  1. 블로그 영역의 장르를 선택하는 영역인 <ul>이 자식태그의 속성을 영향을 받기 위해 overflow:hidden; 으로 설정하고 테두리를 디자인한다. <li> 태그들이 좌->우정렬되도록 float: left로 설정하고 8개의 영역의 너비가 동일하도록 너비를 12.5%로 설정한다. <li>태그의 테두리를 디자인할 때 테두리가 중복되지 않도록 설정한다. <a> 태그가 속한 영역에 모두 <a>태그 기능이 작동하도록 display:block으로 설정하고 너비, 높이, 글사이 간격, 중앙정렬등을 설정해 디자인한다.
main #blog_wrap .blog_nav ul { overflow: hidden;
	border: solid 1px #eae1e6; }
main #blog_wrap .blog_nav ul li { float: left; width: 12.5%;
	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; }
  1. .blog_list_wrap의 영역(미리보기 영역)에 속한 <li>태그들이 위아래로 간격이 있도록 padding,margin 값을 설정하고, border를 디자인해 경계를 짓는다. <a>의 자식태그들이 좌/우로 사이에 간격을 두고 위치하도록 'flex'로 설정하고 <img>태그의 너비, 높이, margin값 등을 설정한다.
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; }
  1. 미리보기의 장르, 글 제목, 본문, 출처, post되고 난 후 지난 시간 등을 알려주는 .blog_list_info 의 너비를 설정하고 padding값으로 간격을 설정한다. 장르, 제목, 본문, 출처, 시간을 나타내는 태그들의 글자를 디자인한다.
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; }
  1. 글 미리보기 영역 아래의 동영상 영역인 .blog_media_wrap의 배치를 'flex' 속성을 통해 영역 사이에 간격을 두고 중앙 정렬할 수 있도록 설정한다. padding 값으로 상하 간격을 설정하고, border-bottom으로 영역을 구분짓는다. 이미지와 설명 글 사이의 간격을 padding 값으로 설정하고, .blog_media_wrap 자식태그들의 글자를 디자인한다.
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; }

무엇이 어려웠지?

오늘 수업을 들으면서 분명 선생님이 하신대로 똑같이 했는데도, 검색창 사이에 간격이 없어지지 않고 있는게 너무 불편해서 border의 두께를 1px, 2px, 3px, 4px 설정해봤다. .search_wrap의 border 굵기를 달리 할 때 button과 .search_wrap 사이의 여백이 생겼다가 없어지기도 하는데 그 이유가 궁금해졌다.


어떻게 해결했지?

처음에는 여러가지로 두께를 달리했을 때 몇몇 두께에서는 간격이 안보이는 것을 확인 할 수 있었다. 그치만 웹브라우저를 100~500%로 확대해보니깐 분명 100%에서는 보이던 간격이 다른 배율에서는 안보이기도 하고 반대로 안보이던게 보이기도 했다. 그래서 멘토님께 여줘봤고, box-sizing으로 설정했기 때문에 border의 두께에 따라 간격이 달라진다고 말씀하셨다.

그래서?

margin, padding값을 모두 0으로 설정했는데도 간격이 없어지지 않아서 너무 답답했다. 나중에 선생님이 올리신 source로 html 파일을 열어보니 선생님도 동일하게 간격이 있었다..! 그래서 일단, 내가 코딩을 잘못하거나 내가 box-sizing을 잘못 이해한건 아니라는 걸 알았지만, 여전히 간격을 채우지 못해서 뭔가 찝찝하다.

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

0개의 댓글