7월 19일 (네이버 메인 카피캣)

학습내용

🔵웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)

web developer chrome extension
(https://wpastra.com/chrome-developer-extensions/)
1. Wappalyzer - 특정 웹사이트에 접속을 하고 그 웹사이트가 어떤 기술로 만들어졌는지 확인하고 싶을 때

2. CSS Viewer - 특정 웹사이트의 css요소를 검사할 때 일일이 검사를 안 하고도 알 수 있게 해주는 프로그램

3. WhatFont - 특정 웹사이트에서 사용된 폰트 확인
4. Lorem Ipsum Gentrator - 임의의 문장을 만들어줌, 커스텀도 가능

5. ColorZilla - 특정 웹사이트에서 어떤 컬러를 사용했는지 확인 가능

🔵네이버 메인 카피캣

시작 전 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;
 }

✔.container { css로 미리 만들어준 후 html에 적용
	width: 1130px;
	margin: 0 auto;
}

button { 버튼에는 태생적으로 border값이 있기에 없애줌
	border: none;
}

input, textarea { input,textarea에는 클릭 시 outline이 생기기에 없애줌
	outline: none;
}

#header
header에 검색창과 메인 메뉴를 만들어주었다.

<header id="main_header">
		<div class="search_area">
			<div class="search_wrap">
				<input type="text">
				<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="#">지식in</a></li>
					<li><a href="#">쇼핑</a></li>
				</ul>
			</div>
		</div>
	</header>

.search_area를 flexbox.help로 copy&paste를 해서 중앙으로 배치

#main_header .search_wrap {
	✔display: flex;
	flex-wrap: wrap;
	justify-content: space-between; (.search_wrap안에는 input과 button을 space-between사용해서 배치해줌)
	align-items: center;

	position: relative;
	width: 582px;
	height: 52px;
	border: 2px solid #19ce60;
    
#main_header .search_wrap input {
	✔width: calc(100% - 52px); 
	height: 100%;

	padding: 13px 15px;

	font-size: 22px;

	border: none;

calc - input의 100%에서 button의 width를 뺀 값, inline특성 상 미세한 공백이 있어서 동일선상에 없기 때문에 flexbox.help이용해 배치해줌

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

box-shadow : 어떠한 공간의 그림자 효과, 각 숫자는 그림자의 위치나 속성 등을 나타냄
(box shadow CSS generator 참고)

#main
main에는 왼쪽, 오른쪽으로 나눈 후 왼쪽 먼저 작업을 하였다.

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

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

	padding: 22px 0 16px 0;
}

.news_header 안에 h2와 .news_btn_wrap을 flex로 배치해줌

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

.news_list들은 float:left;를 해서 왼쪽부터 정렬되게 함, inline요소 이기 때문에 text-align적용 가능

• 팁
  nth-child()적용할 때 (2n)이라고 하면 2의 배수는 다 해당이 된다.

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

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

.news_list 에 img는 y축 중앙정렬 해준다.

#blog_wrap
< strong>태그는 해당 부분 강조해주는 태그, 글자가 두꺼워짐

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;

	border-right: solid 1px #dae1e6;

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

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

}

공간의 높이값이 있는 경우 line-height와 동일한 값을 넣으면 y축 중앙정렬

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;

	border-right: solid 1px #dae1e6;

}

동일선상에 float:left로 배치해준 후 같은 비율로 width를 지정해준다.

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

위와 동일하게 .blog_media_wrap에는 동영상이 있는 부분인데 flex로 배치를 해준다
space-between

• 완성본
  

어려웠던 점

역시나 나는 설계도면 만드는 작업이 가장 헷갈린다.
div를 어디서 어떻게 설정해야하는지도 너무 헷갈리고 div안에 어떤 태그를 넣어햐 하는지도 헷갈린다.
그리고 실습 화면과 내가 보는 오늘의 네이버 화면이 조금 달라서 그런지 헷갈렸다.

해결방법

이 때까지 해왔던 실습화면들의 html을 살펴본다. 설계도면 파악하는 연습을 더 해야한다.

학습소감

오늘은 flex를 많이 활용한 하루였다. 그래서 그런지 flex에 대해 더 많이 알게됐다.
확실히 이론을 했을 때와 실습을 했을 때와는 와닿는게 다르다. 물론 이론을 했기 때문에 이 정도이겠지만!
배치작업 대해 느끼는 두려움이 조금 없어진듯 하다.
여전히 설계도면 만드는 일은 어렵지만 😂
그리고 웹 개발에 필요한 확장 프로그램 너무나 🍯이다!
카피캣을 하고 싶어도 일일이 다 클릭해서 봐야하는 불편함이 커서 엄두도 못냈는데
저 프로그램들 덕분에 (아직 엄두는 안나지만) 한 발짝 더 가까워진 기분이다.