1. 학습 내용
1. 네이버 소개
기본 설정
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;}
/*버튼 값은 태생적으로 테두리가 있어서 none을 주어 없앤다.*/
input, textarea {
outline: none;}
- 아웃라인을 없앤다.
.clearfix{
clear: both;}
.container {
width: 1130px;
margin: 0 auto;}2. 네이버 상단
HTML
<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>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: solid 1px #e4e8eb;}
#main-header .search_wrap {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 582px;
height: 52px;
border: solid 2px #19ce60;}
/*inline-block 요소가 연달아 있으면 공백이 생긴다. text와 button 사이 공백이 생기는데
이것은 search_wrap에 flex-spacebetween 주면 해결*/
#main-header .search_wrap button {
width: 52px;
height: 100%;
background-color: #19ce60;}
- 높이를 search_wrap과 같이 주기위해 100%로 설정
#main-header .search_wrap input {
width: calc(100% - 52px);
height: 100%;
-넓이 설정을 calc를 사용해서 필요한 만큼 줄 수 있다.
padding: 13px 15px;
font-size: 22px;
border: none;}
#main-header .search_wrap input:focus {
outline: none;}
/*포커스가 되는 부분의 아웃라인을 없애준다*/
#main-header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);}
/*box-shadow generator를 구글에 검색하여 쉽게 박스 그림자를 만들 수 있다.*/
#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;}3. 네이버 본문 왼쪽
광고배너 ~ 언론사 항목
HTML
<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="setting1"></button>
<button class="setting2"></button>
<button class="setting3"></button>
</div>
</div>
<ul class="news_lists">
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
<li class="news_list">
<img src="https://via.placeholder.com/45px*20px">
</li>
</ul>
- 전체 언론사의 항목
</div>
CSS
main {
overflow: hidden;
padding-top: 20px;}
- header와 간격 설정
main #main_left {
float: left;
width: 750px;
}
- 왼쪽 영역의 위치와 넓이 설정
main #main_right {
float: right;
width: 350px;}
- 오른쪽 영역
main #banner_wrap {
width: 750px;
height: 135px;
background-color: black;
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: gray;}
-버튼 크기와 색깔 설정
main #news_wrap .news_lists {
overflow: hidden;
-부모의 높이값을 설정하지 않았으므로 자식의 높이값을 적용
(자식이 float값이 적용되면 부모에게 높이값이 나타나지 않는다.)
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(6),
main #news_wrap .news_lists .news_list:nth-child(12),
main #news_wrap .news_lists .news_list:nth-child(18),
main #news_wrap .news_lists .news_list:nth-child(24) {
border-right: none;}
- 맨 오른쪽 박스들의 선을 없앤다.
/* main #news_wrap .news_lists .news_list:nth-child(6n)을 적용하면
6번째 나오는 모든 li 태그에 적용된다. */
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: 31px;
transform: translateY(-50%);
/* y축 중앙정렬 꼭 기억하기*/}
- 내부 아이콘의 위치 조정경제M 목차 ~ 아래쪽 미디어(현재는 바뀜 없음)
HTML
<div id="blog_wrap">
<div class="blog_header">
<div class="left_header">
<h3>오늘 읽을 만한 글</h3>
<span>주제별 분류된 다양한 글 모음</span>
</div>
<div class="right_header">
<span><strong>1,853</strong>개의 글</span>
<!-- strong 태그는 굵기를 통해 강조 -->
<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/170px*114px">
<div class="blog_list_info">
<span>경제M</span>
<h4>Title</h4>
<p>
자신만의 가구를 디자인하고 재단 후 조립, 그리고 마지막으로 니스칠을 하는 모든 과정에 시간이 필요하기 때문에 목수 천호진은 가구를 만드는 것을 기다림이라는 단어로 요약했습니다. 배우 천호진 님이 가구 만들기에 빠져든 건 바로 10년 전에 우연히 만들기 시작한 테이블에서부터 라고 합니다. 오늘은 배우 천호진님이 목공에 빠져 사는 이유에
</p>
<div class="date_wrap">
<span>뉴스얌</span>
<span>4일 </span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170px*114px">
<div class="blog_list_info">
<span>경제M</span>
<h4>Title</h4>
<p>
자신만의 가구를 디자인하고 재단 후 조립, 그리고 마지막으로 니스칠을 하는 모든 과정에 시간이 필요하기 때문에 목수 천호진은 가구를 만드는 것을 기다림이라는 단어로 요약했습니다. 배우 천호진 님이 가구 만들기에 빠져든 건 바로 10년 전에 우연히 만들기 시작한 테이블에서부터 라고 합니다. 오늘은 배우 천호진님이 목공에 빠져 사는 이유에
</p>
<div class="date_wrap">
<span>뉴스얌</span>
<span>4일 </span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170px*114px">
<div class="blog_list_info">
<span>경제M</span>
<h4>Title</h4>
<p>
자신만의 가구를 디자인하고 재단 후 조립, 그리고 마지막으로 니스칠을 하는 모든 과정에 시간이 필요하기 때문에 목수 천호진은 가구를 만드는 것을 기다림이라는 단어로 요약했습니다. 배우 천호진 님이 가구 만들기에 빠져든 건 바로 10년 전에 우연히 만들기 시작한 테이블에서부터 라고 합니다. 오늘은 배우 천호진님이 목공에 빠져 사는 이유에
</p>
<div class="date_wrap">
<span>뉴스얌</span>
<span>4일 </span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170px*114px">
<div class="blog_list_info">
<span>경제M</span>
<h4>Title</h4>
<p>
자신만의 가구를 디자인하고 재단 후 조립, 그리고 마지막으로 니스칠을 하는 모든 과정에 시간이 필요하기 때문에 목수 천호진은 가구를 만드는 것을 기다림이라는 단어로 요약했습니다. 배우 천호진 님이 가구 만들기에 빠져든 건 바로 10년 전에 우연히 만들기 시작한 테이블에서부터 라고 합니다. 오늘은 배우 천호진님이 목공에 빠져 사는 이유에
</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/232px*130px">
<div class="blog_media_info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232px*130px">
<div class="blog_media_info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232px*130px">
<div class="blog_media_info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
</ul>
</div>
</div>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;}
- 나란히 x축으로 정렬
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 span strong {color: black;}
- 강조색은 검정으로
main #blog_wrap .blog_nav ul {
overflow: hidden;
-높이 조정
border: solid 1px #eae126;}
main #blog_wrap .blog_nav ul li {
float: left;
width: 12.5%; /*공간을 균등하게 분배*/
height: 49px;
- 왼쪽부터 정렬
border-right: solid 1px #eae126;}
main #blog_wrap .blog_nav ul li:last-child {
border: none;}
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;
align-items: center;}
- 사진과 글을 x축으로 정렬
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 li .blog_media_info {
padding-top: 12px;}
main #blog_wrap .blog_media_wrap li .blog_media_info h4 {
font-size: 13px;}
main #blog_wrap .blog_media_wrap li .blog_media_info span {
font-size: 12px;}2. 학습 중 어려웠던 점
역시 대기업이라서 그런지 지금까지 봤던 구조보다 더 코드가 복잡했다.
3. 해결방안
강의를 열심히 듣고 복습한다.
4. 학습 소감
강의 도움없이 비슷하게 만들고 싶다는 생각이 들었다.
안녕하세요!