2021.07.19 네이버메인(1편 카피캣)
오늘의 강의 내용
- 웹개발에 필요한 chrome확장프로그램
-
Wappalyzer : 특정 웹사이트로 접속후 그웹사이트가 어떠한 기술 스택으로 만들어졌는지 확인할수 있게 하는 플로그램
-
CSS Viewer : 웹사이트 css코드를 확인하는법을 간소하 한 프로그램 (100%정확하지는 않지만 색상코드, 폰트사이즈, 폰트굵기, 폰트간의 간격 등은 빨리 확인가능 하다.)
-
WhatFont, Fonts Ninja : 사이트에서 어떠한 폰트를 사용하고 있는지 알려주는 프로그램
-
Lorem Ipsum Generator : 임의 의 문장을 만들때 사용하는 프로그램
-
ColorZilla : 웹사이트에서 어떠한 색상을 사용하였는지 확인할때 사용하는 프로그램
* 네이버 카피캣 하기
Wappalyzer : 특정 웹사이트로 접속후 그웹사이트가 어떠한 기술 스택으로 만들어졌는지 확인할수 있게 하는 플로그램
CSS Viewer : 웹사이트 css코드를 확인하는법을 간소하 한 프로그램 (100%정확하지는 않지만 색상코드, 폰트사이즈, 폰트굵기, 폰트간의 간격 등은 빨리 확인가능 하다.)
WhatFont, Fonts Ninja : 사이트에서 어떠한 폰트를 사용하고 있는지 알려주는 프로그램
Lorem Ipsum Generator : 임의 의 문장을 만들때 사용하는 프로그램
ColorZilla : 웹사이트에서 어떠한 색상을 사용하였는지 확인할때 사용하는 프로그램
네이버 메인 카피캣으로 오른쪽 영역 제외 완성한 모습
<!-- html언어 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<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="#">지식인</a></li>
<li><a href="#">쇼핑</a></li>
</ul>
</div>
</div>
</header>
<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 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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>Tltle</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog_media_info">
<h4>Tltle</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog_media_info">
<h4>Tltle</h4>
<span>신사임당</span>
</div>
</li>
</ul>
</div>
<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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>
지난 12일(현지시각) 유럽연합(EU) 이사회는 '전 세계적으로 연결된 유럽(A Globally Connected Europe)'이란 이름의 인프라 계획 하나를 승인했다. 이름 그대로 글로벌한 인프라 투자 계획을 담은 것이다. 유로뉴스는 "EU의 경제와 안보 이익을 증진하기 위한 계획으로, 중국의 '일대일로 프로젝트'와 경쟁하기 위한 것"이라고 분석했다.
</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>Tltle</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog_media_info">
<h4>Tltle</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog_media_info">
<h4>Tltle</h4>
<span>신사임당</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main_right">
</div>
</main>
</body>
</html>
<!-- style.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;
}
#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: 18px;
border: none;
}
#main-header .search_wrap input:focus {
outline: none;
}
#main-header .search_wrap button {
width: 52px;
height: 100%;
background-color: #19ce60;
background-image: url(../img/search.png);
}
#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: 700px;
}
main {
overflow: hidden;
padding-top: 20px;
}
main #main_left {
float: left;
width: 750px;
}
main #main_right {
float: right;
width: 350px;
height: 2000px;
background-color: blue;
}
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%);
}
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: 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 .left_header span {
font-size: 12px;
color: gray;
}
main #blog_wrap .blog_header .left_header .count strong {
color: #000000;
}
main #blog_wrap .blog_nav ul {
overflow: hidden;
border: solid 1px #dae1e6;
}
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: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;
}네이버 메인 카피캣 오른쪽 영역 제외 소스코드
-
어떠한 그영역의 차원을 결정짓는, html태그의 성격을 결정짓는 css속성을 먼저 작성, 그다음 공간을 만들때 사용되는 css속성을 중간에 작성, 마지막으로 text와 관련된 속성들은 마지막으로 작성 (강사님 작성 기법. 일관성 있는 규칙으로 작성하는 것이 좋다.)
-
calc : 어떠한 값을 계산식으로 기입
ex) width: calc(100% - 52px) -
focus : 마우스를 클릭 하였을때 지정되는 영역의 테두리가 생기는 것을 삭제할때 쓰는 가상 선택자
ex)
<!-- style.css언어 -->
#main-header .search_wrap input:focus {
outline: none; //테두리 제거
}보통 디폴트값으로 많이 넣어주는 석택자이다.
-
box-shadow : 어떠한 공간에 그림자효과를 주는 속성
-
공백을 만드는 방법은 개발자 취향
-
숫자n : 임의 의 숫자를 정한다음 뒤에 n을 작성하면, 그숫자의 크기 마다 설정값이 적용 된다.
ex) nth-child(6n) //6번째 마다
오늘 강의 끝난후 소감
오늘 처음으로 내가 뭘한건지 모를 정도로 머리가 뒤죽박죽 이 되었다. 소스코드를 실수 하여 원인을 찾는데 20분 가까이 소요하였고, 강사님 강의 속도를 따라가기가 너무 벅차 잠깐 강의를 멈추고 쉬는시간을 30분가까이 가졌다. 정말 오늘이 가장 힘들었던것 같다.
문제점 혹은 힘든점
아직은 반복, 연습만으로 는 어떤 벽이 있는거 같았다.
바로바로 여기는 이거, 이쪽은 이거 이런식으로 떠올리기에는 한없이 부족함을 느꼈다.
개선방안
그런데 나아질려면 정말 반복, 연습 밖에는 없다는 생각이 들었다. 쉬운 영역이 아니라는 것 쯤은 예상하였으나, 역시나 내 예상을 수배는 뛰어넘게 어렵고, 고단한 영역이다. 하지만 포기란없다. 그저 열심히 하자
Author And Source
이 문제에 관하여(2021.07.19 네이버메인(1편 카피캣)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dogyeomyeo/2021.07.19-네이버메인1편-카피캣저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
