개발일지 210719

이동섭·2021년 7월 19일
네이버대구AI스쿨카피캣
0

대구AI스쿨 개발일지

목록 보기
16/48

16 일차 요약

  • 웹 개발용 확장앱 추천
  • 네이버 카피 실습
    : flexbox.help와 카피할 사이트를 대상으로 검사기능을 사용하는 실전적인 스킬(?)에 주목

1. 웹 개발용 확장 프로그램

1.1. Wappalyzer

  • 웹사이트의 개발에 사용된 기술과 도구들을 알 수 있게 해주눈 프로그램
  • 브라우저 상단 주소표시줄 옆 아이콘을 클릭하면 간단하게 확인 가능
  • 네이버에서 확인해 볼 수 있듯 해당 웹사이트에서 기술을 비공개 한 경우 볼 수 없다. (대부분의 다른 확장 프로그램 역시 마찬가지임)

1.2. CSS Viewer

  • 웹페이지의 특정 영역에 사용된 CSS코드를 바로 확인할 수 있는 프로그램
  • 브라우저 옆 아이콘을 클릭한 후 코드를 확인하고자 하는 위치로 커서를 가져가면 CSS를 볼 수 있다.
  • 다른 코드들과의 연계성이 적은 색상, 폰트 크기 등을 빠르게 확인할 때 유용하다.

1.3. WhatFont

  • 이름 그대로 폰트를 확인하는 프로그램
  • 사용방법은 1.2.와 동일
  • 폰트에 대한 정보만을 더 빠르고 직관적으로 확인 가능.

1.4. Lorem Ipsum Generator

  • 임의의 문장을 생성해주는 확장 프로그램
  • 내용이 확정되지 않은 상태로 텍스트가 들어갈 공간을 미리 작성해서 테스트하거나, 사이트를 카피하며 연습할 때 유용하다.
  • 확장 프로그램 아이콘을 누르면 바로 문장이 생성되며 옵션조절 가능.

1.5. ColorZilla

  • 화면에 출력중인 색상을 바로 확인 가능한 프로그램
  • 사용법은 역시 1.2.와 유사
  • 특정 영역의 색상을 css코드로 확인하는 것은 번거로운 일이다. 이를 간소화 해 줌
  • 내 경우 Powertoys의 컬러피커를 사용 중이라 생략

2. 네이버 메인 카피

  • 네이버 전체를 카피하는 것은 너무 긴 시간이 소요되므로 간소화, 특히 이미지 파일이 들어가는 부분들을 생략
  • 카피캣을 위한 구성을
    2.1. header
    2.2. main
    2.3. footer
    과 같이 구분하여 작업 할 것.

2.1. 기본 준비

  • html과 css 디폴트 설정해주기

html

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

css

/*default*/
*{
	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: 0;
	outline: 0;
}
.clearfix {
	clear: both;
}
/*naver base*/
.container {
	width: 1130px;
	margin: 0 aute;
}
  • 초기화 작업
  • 지금까지 실습에서 큰 영역들의 widht값을 대부분 100%로 준 것과 달리 네이버의 경우 모바일용 페이지가 따로 존재하고, pc용 사이트는 고정형이다. 또한 헤더 메인 푸터의 영역을 같은 너비로 사용하고 있기 때문에 이를 위한 영역을 다음과 같이 먼저 설정해 준다. (물론 이 외에도 네이버 메인 페이지 전반의 설정이 있으나 최소한만 적용)

2.2. header

  1. 목표

  • 빨간선 까지의 영역
  1. html
     <header id="main_header">
	<div class="search_area">
		<div class="search_wrap">
			<!-- <form></form> 
				원래는 폼 태그를 통해 뒷단으로 정보를 전송하는 기능을 이 위치에 넣어줘야 -->
			<input type="text" name="">
			<button type="buttom"></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>
  • 검색창이 있는 영역과 아래 메뉴 버튼들이 있는 부분을 나누어 영역을 설정해주었다.
  • 목표 이미지의 우측 최상단의 시작페이지 지정과 날씨 부분은 생략
  1. CSS
    /*header*/
#main_header {
	position: relative;
	background-color: #ffffff;
}
.search_area {
	position: relative;
	display: flex;
	/*flex-direction: row;*/
	/*flex-wrap: nowrap;*/
	justify-content: center;
	align-items: center;
	/*align-content: stretch;*/
	height: 160px;
	background-color: #ffffff;
	border-bottom: 1px solid #e4e8eb;
}
#main_header .search_wrap {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}
#main_header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;
	font-size: 18px;
	border: none;
	outline: none;
}
#main_header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}
#main_header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}
#main_header #navbar ul {
	padding: 11px 0;
}
#main_header #navbar li {
	display: inline-block;
	margin-right: 5px;
}
#main_header #navbar li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}

  • 검색창 영역(searchwrap)의 검색어 입력부분(input)과 검색버튼부분(button)을 정렬해주어야 한다.
    - 여기에서 calc라는 속성값을 처음 사용해보았다. 버튼 부분의 고정값은 52px이고 그 나머지 영역이 입력부분인데 이를 calc(100% - 52px)로 입력해준 것.
    - 그런데 두 부분의 합이 검색창 영역을 넘어버렸다. 이유는 input에 적용된 type="text"와 button은 inline속성을 가진 요소로서, 고유의 공백을 갖고 있기 때문이다. 이를 해결하기 위해 flex로 정렬해주었다.

  • box-shadow 속성을 처음 사용해보았다. 박스를 기준으로 그림자가 생기는 효과를 줄 수 있다.

  1. 결과

2.3. main

  • 앞서 상단 부분과 최하단 부분을 제외한 나머지 네이버 메인페이지의 본문 부분 전체
  • 메인 태그는 가장 크게 좌 우 영역이 구분되어있다.

2.3.1. left - banner, news

목표

위의 뉴스부분과 더 상단에 노출되는 배너광고 만들기. 실습을 위한 일부 간소화가 있음.

  1. html
    <main role="main" class="container">
		<div id="main_left">
			<div id="bannerwrap"></div>
			<div id="news_wrap">
				<div class="news_header">
					<h2>뉴스스탠드</h2>
					<div class="news_btn_wrap">
						<button class="setting1"></button>
						<button class="setting2"></button>
						<button class="setting3"></button>
					</div>
				</div>
				<ul class="news_lists">
					<li class="nwes_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
				</ul>
			</div>
		</div>
  • li 태그는 총 한개만 표시했으나 실제로는 24개를 작성했다.

  1. CSS

     main {
	overflow: hidder;
}
main #main_left {
	float: left;
	width: 750px;
	height: 2000px;
	background-color: yellow;
}
main #main_right {
	float: left;
	width: 350px;
	height: 2000px;
	background-color: pink;
}
main #bannerwrap {
	width: 750px;
	height: 135px;
	background-color: #000000;
	margin-bottom: 12px;
}
main #news_wrap .news_header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0 16px 0;
}
main #news_wrap .news_header h2 {
	font-size: 14px;
	font-weight: 700;
}
main #news_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-direction: row;
	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 {
}
main #news_wrap .news_lists {
	overflow: hidden;
	border: solid 10px #dae1e6;
	border-bottom: none;
	border-right: none;
}
main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;
	border-bottom: solid 10px #e4e8eb;
	border-right: solid 10px #e4e8eb;
	text-align: center;
}
/*main #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}*/
main #news_wrap .news_lists .news_list img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

    리스트들에 볼더를 적용하는 과정을 강의와 조금 다르게 작성했다. 이쪽이 더 간소해 보인다.

  2. 결과

2.3.2. 오늘 읽을만한 글(1)

목표

빨간 화살표 윗부분 까지.

  1. html
      <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>자신만의 가구를 디자인하고 재단 후 조립, 그리고 마지막으로 니스칠을 하는 모든 과정에 시간이 필요하기 때문에 목수 천호진은 가구를 만드는 것을 기다림이라는 단어로 요약했습니다. 배우 천호진 님이 가구 만들기에 빠져든 건 바로 10년 전에 우연히 만들기 시작한 테이블에서부터 라고 합니다. 오늘은 배우 천호진님이 목공에 빠져 사는 이유에 대해서 알아보도록 </p>
					<div class="date_wrap">
						<span>보물섬</span>
						<span>3일 전</span>
					</div>							
				</div>
			</a>
		</li>
	</ul>
</div>
  • 목표 사진을 보면 상단 영역, 좌측에 사진 이미지를 둔 글 영역, 동영상이 있는 영역으로 구분되어 있으며 위 태그는 글 영역까지의 내용임.
  1. CSS
      /*blog*/
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: gray;
}
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: gray;
}
main #blog_wrap .blog_header .right_header strong {
	color: #000000;
}
main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border-top: solid 1px #eae1e6;
	border-left: solid 1px #eae1e6;
}
main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
	border-bottom: solid 1px #eae1e6;
}
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 {
	margin-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;
	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 {
	font-size: 12px;
	color: #505050;
}
  • blog_header 부분은 뉴스 부분과 거의 유사함
  • 글 영역에서도 특별히 주목할 만한 점은 없었다
  • 오늘 실습의 경우 대체로 flexbox.help와 카피할 사이트를 대상으로 검사기능을 사용하는 비교적 더 실전적인 방식에 주목하면 될 것 같다.

2.3.2. 오늘 읽을만한 글(2)

목표

  • 앞서 캡처의 화살표 아래 동영상 부분
  1. html
      <div class="blog_media_wrap">
	<ul>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/232x130">
				<div class="blog_media_info">
					<h4>Title</h4>
					<span>신사임당</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/232x130">
				<div class="blog_media_info">
					<h4>Title</h4>
					<span>신사임당</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/232x130">
				<div class="blog_media_info">
					<h4>Title</h4>
					<span>신사임당</span>
				</div>
			</a>
		</li>
	</ul>
</div>
  2. CSS
     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;
}
  ```>
  3. 최종 결과

추가 학습

  • 가상선택자 focus에 대하여
    : input 영역을 클릭했을 때 생기는 outline을 제거할 때 input영역에 직접 적용하지 않고 가상선택자를 이용하는 이유를 멘토님께 질문했더니 이에 대해 알아보라고 하셨다. 아래를 참조.

    https://aboooks.tistory.com/308

미해결 - 솔루션

x

질문거리

x

학습 소감

내일도 네이버 메인 카피캣 수업이 예정되어 있으니 내일은 선 실습 후 수강을 해야겠다. 강의를 그대로 따라가는 실습 두 시간은 집중하기 너무나 힘든 것..

profile
이동섭
responsibility
이전 포스트

개발일지 210716

다음 포스트

개발일지 210720

0개의 댓글

관련 채용 정보