Day25,
Naver 뉴스 페이지를 따라 만들어봤다!
오늘 무엇을 배웠지?
Naver 뉴스페이지 따라 만들어보기
Naver - '뉴스' : https://news.naver.com/
메인 left
html
(어제의 html 파일에 이어서)
1. 
<main role="main" id="news-main">
<div class="news-container">
<div class="news-left">
<div class="news-main-wrap news-custome">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">헤드라인 뉴스</a></h3>
<ul class="news-flex-start">
<li><a href="#">헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다.</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
</div>
<ul class="news-lists">
<li><a href="#">title 1title 1title 1title 1title 1title 1title 1title 1</a><i></i></li>
<li><a href="#">title 2title 2title 2title 2title 2title 2title 2</a><i></i></li>
<li><a href="#">title 3title 3title 3title 3title 3title 3title 3title 3</a><i></i></li>
<li><a href="#">title 4title 4title 4title 4title 4title 4</a><i></i></li>
<li><a href="#">title 5title 5title 5title 5title 5title 5</a><i></i></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">정치</a></h3>
<ul class="news-flex-start">
<li><a href="#">일반</a></li>
<li><a href="#">국회/정당</a></li>
<li><a href="#">청와대</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
</div>
<ul class="news-lists">
<li><a href="#">Title 1</a><span>국민일보</span></li>
<li><a href="#">Title 2</a><span>한겨례</span></li>
<li><a href="#">Title 3</a><span>뉴시스</span></li>
<li><a href="#">Title 4</a><span>중앙일보</span></li>
<li><a href="#">Title 5</a><span>부산일보</span></li>
</ul>
</div>
</div>
</div>CSS-Style
(어제의 css에 이어서)
1. .news-main-wrap과 이에 속한 태그를 디자인한다. .news-main-header의 간격을 margin값으로 설정하고, <a>의 글자 크기를 디자인한다.
#news-main .news-left .news-main-wrap { padding: 25px 0;
border-bottom: solid 1px #dedede; }
#news-main .news-left .news-main-wrap .news-main-header {
margin-bottom: 14px; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 {
margin-right: 12px; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 a {
font-size: 20px; font-weight: bold; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left a {
font-size: 13px; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left ul {
margin-top: -2px; }- .news-main-header-left의
<li>글자 사이에 특수 문자를 삽입하되, 첫번째<li>태그 앞에는 특수문자가 나타나지 않도록 설정한다.
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left li a:before {
content: ''; display: inline-block; width: 1px; height: 10px;
background-color: #e5e5e5; margin: 0 8px; vertical-align: -1px; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left li:first-child a:before {
content: none; }- .news-main-header-right의
<i>태그를 디자인(너비,높이 등)한다. icon-1, icon-2, icon-3의 색을 설정한다.
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i {
display: block; width: 24px; height: 20px; margin-left: 8px; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-1 {
background-color: yellow; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-2 {
background-color: pink; }
#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-3 {
background-color: grey; }- .image-wrap을 디자인(너비, 간격)한다. 이에 속한
<img>태그의 너비, 높이, 테두리 등을 설정하고,<h4>태그의 글이 설정한 영역을 벗어나게 되면 말줄임표로 바뀌도록 설정한다.
#news-main .news-left .news-main-wrap .news-main-body .image-wrap {
width: 220px; margin-right: 25px; }
#news-main .news-left .news-main-wrap .news-main-body .image-wrap img {
width: 100%; height: 140px; border: solid 1px #000000;
margin-bottom: 6px; }
#news-main .news-left .news-main-wrap .news-main-body .image-wrap h4 {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 14px; }- .news-lists의 너비를 설정하고 그에 속한 태그들을 디자인한다.
<li>태그의 간격과 글자크기를 설정한다.<a>태그의 글이 설정한 영역을 넘어가게 되면 말줄임표로 바뀌도록 설정하고,<span>태그 사이에 특수 문자가 입력되도록 설정하고 이 태그의 글자 색 등을 디자인한다.
#news-main .news-left .news-main-wrap .news-main-body .news-lists {
width: 430px; }
#news-main .news-left .news-main-wrap .news-main-body .news-lists li {
margin-bottom: 11px; font-size: 20px; }
#news-main .news-left .news-main-wrap .news-main-body .news-lists li a {
display: inline-block; max-width: 360px; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
#news-main .news-left .news-main-wrap .news-main-body .news-lists li span {
font-size: 12px; color: #888888; vertical-align: middle; }
#news-main .news-left .news-main-wrap .news-main-body .news-lists li span:before {
content: ''; display: inline-block; position: relative;
width: 14px; height: 11px; background-color: grey;
margin: 0 4px; top: 1px; }- .news-main-header의
<a>태그에 커서가 기본값(클릭기능 off)으로 적용되도록 설정하고 이 태그 앞에 특수문자가 입력되도록 설정한다.
#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li a {
cursor: default; }
#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li:first-child a:before {
content: ''; display: inline-block; width: 1px; height: 10px;
background-color: #e5e5e5; margin: 0 8px 0 0 ; vertical-align: -1px; }- .image-wrap의 position을 relative로 설정해 속한 태그들의 영향을 받을수 있게 하고, 너비, 높이를 설정한다. 이에 속한
<img>태그의 position을 aboslute로 설정하고 너비, 높이를 설정한다. 앞의 태그들에 말줄임으로 설정했던 text-overflow, white-space 설정을 없애주고,<h4>태그의 position을 absolute로 설정해 위치를 설정한다.
#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap {
position: relative; width: 300px; height: 190px; }
#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap img {
position: absolute; width: 100%; height: 100%; }
#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap h4 {
text-overflow: initial; white-space: initial; position: absolute;
width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 10px 15px;
left: 0; bottom: 0; color: #ffffff; text-align: center; }- .news-lists의 너비를 설정한다. 이에 속한 태그
<a>태그가 수직정렬시 중앙에 위치하도록 설정하고 너비를 설정한다.<i>태그의 너비 ,높이, 배경색 등을 디자인한다.
#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists {
width: 390px; }
#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li a {
vertical-align: middle; width: 360px; max-width: initial; }
#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li i {
display: inline-block; width: 22px; height: 16px;
background-color: black; vertical-align: middle; }결과 ▼
메인 right
html
(어제의 html 파일에 이어서)
1. 
<div class="news-right">
<div id="news-popular">
<div class="news-popular-header news-flex-between">
<div>
<h3>언론사별 가장 많이 본 뉴스</h3>
<p>오후 11시 ~ 오전 12시까지 집계한 결과입니다.</p>
</div>
<span>더보기</span>
</div>
<ul class="news-popular-lists">
<li class="news-flex-between">
<div class="news-popular-info">
<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
<i></i><span>경향신문</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-popular-info">
<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
<i></i><span>경향신문</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-popular-info">
<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
<i></i><span>경향신문</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-popular-info">
<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
<i></i><span>경향신문</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-popular-info">
<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
<i></i><span>경향신문</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
</ul>
</div>
<div class="news-banner"></div>
<div id="news-today">
<div class="news-today-header news-flex-start">
<h3>TODAY</h3>
<span>7.30 (금)</span>
</div>
<div class="news-today-body">
<ul class="news-notice-lists">
<li>
<h4>공지</h4>
<p>뉴스홈 헤드라인 비로그인 추천 변경</p>
</li>
<li>
<h4>날씨</h4>
<p>실시간 기상 정보 확인하기</p>
</li>
<li>
<h4>운세</h4>
<p>오늘의 띠별 운세 확인하기</p>
</li>
</ul>
<div class="news-stock-wrap">
<ul class="news-stock-lists news-flex-between">
<li>
<span>코스피</span>
<h3>3,162.28</h3>
<em class="down">10.77</em>
</li>
<li>
<span>코스닥</span>
<h3>971.73</h3>
<em class="up">2.03</em>
</li>
</ul>
<div class="news-stock-search-wrap news-flex-between">
<input type="" placeholder="종목 검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>CSS-Style
(.main-left css에 이어서)
1. .news-right의 영역이 오른쪽에 위치하도록 float:right로 설정하고 너비, 테두리, 간격 등을 설정한다. #news-popular의 간격을 설정하고 이에 속한 태그들을 디자인(글자크기, 색 등)한다.
#news-main .news-right { float: right; width: 327px;
border-left: solid 1px #dfdfdf; padding: 25px 0 40px 26px; }
#news-main .news-right #news-popular { margin-bottom: 30px; }
#news-main .news-right #news-popular .news-popular-header {
align-items: flex-start; margin-bottom: 10px; }
#news-main .news-right #news-popular .news-popular-header h3 {
font-size: 14px; }
#news-main .news-right #news-popular .news-popular-header p {
font-size: 12px; }
#news-main .news-right #news-popular .news-popular-header span {
color: #7d7d7d; font-size: 14px; cursor: pointer; }
- .news-popular-lists의
<li>태그의 상, 하 간격을 6px로 설정한다. 이에 속한 태그 들을 디자인한다. .news-popular-info의 너비, 아래 테두리, 아래 간격 등을 설정하고<h4>의 글자크기,아래 간격을 설정한다.<i>의 너비 ,높이, 배경색, 등을 설정하고<span>태그의 position:relative로,top:2px로 위치를 설정하고 글자크기, 색 등을 설정한다.
#news-main .news-right #news-popular .news-popular-lists li {
padding: 6px 0; }
#news-main .news-right #news-popular .news-popular-lists li .news-popular-info {
width: 202px; border-bottom: solid 1px #e3e3e3;
padding-bottom: 6px; }
#news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4 {
font-size: 13px; margin-bottom: 5px; }
#news-main .news-right #news-popular .news-popular-lists li .news-popular-info i {
display: inline-block; width: 16px; height: 16px;
background-color: grey; border-radius: 50%;
vertical-align: middle; margin-right: 5px; }
#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span {
position: relative; font-size: 12px; color: #888888;
vertical-align: middle; top: 2px; }결과 ▼
3. 광고영역인 .news-banner의 너비, 높이, 테두리 등을 설정한다.
#news-main .news-right .news-banner { width: 300px;
height: 250px; background-color: #000000;
border: solid 1px; color: #e3e3e3; margin-bottom: 30px; }- .news-today-header의 간격을 설정하고 이에 속한 태그들이 글자크기를 설정한다.
<span>태그앞에 특수문자가 입력되도록 설정하고 배경색 등을 설정한다.
#news-main .news-right #news-today .news-today-header {
margin-bottom: 11px; }
#news-main .news-right #news-today .news-today-header h3 {
font-size: 14px; }
#news-main .news-right #news-today .news-today-header span {
font-size: 12px; }
#news-main .news-right #news-today .news-today-header span:before {
content: ''; display: inline-block; width: 1px;
height: 10px; background-color: #e5e5e5e5;
margin: 0 7px; vertical-align: -1px; }- .news-today-body의 간격을 설정하고 테두리를 설정한다. 이에 속한태그들을 디자인한다.
<li>태그의 간격과 경계선을 설정하고 가장 마지막<li>태그에는 아래 간격이 없도록 설정한다.<h4><p>태그의 글자크기, 정렬 등을 디자인한다.
#news-main .news-right #news-today .news-today-body {
padding: 13px 20px 20px; border: solid 1px #e8e8e8; }
#news-main .news-right #news-today .news-today-body .news-notice-lists li {
border-bottom: solid 1px #f2f2f2; padding-bottom: 12px;
margin-bottom: 12px; }
#news-main .news-right #news-today .news-today-body .news-notice-lists li:last-child {
margin-bottom: 0; }
#news-main .news-right #news-today .news-today-body .news-notice-lists li h4 {
display: inline-block; font-size: 12px;
vertical-align: middle; margin-right: 8px; }
#news-main .news-right #news-today .news-today-body .news-notice-lists li p {
display: inline-block; font-size: 12px; vertical-align: middle; }- .news-stock-lists의 간격을 설정하고
<li>태그가 이 영역의 반을 차지하도록 너비를 설정한다. 마지막<li>태그에 한해 왼쪽 간격과 왼쪽 테두리를 설정한다.<span>,<h3>,<em>태그의 글자 크기, 색, 간격등을 설정한다.
#news-main .news-right #news-today .news-today-body .news-stock-lists {
padding: 10px 0 7px; }
#news-main .news-right #news-today .news-today-body .news-stock-lists li {
width: 50%; }
#news-main .news-right #news-today .news-today-body .news-stock-lists li:last-child {
padding-left: 20px; border-left: solid 1px #f2f2f2; }
#news-main .news-right #news-today .news-today-body .news-stock-lists span {
font-size: 12px; color: #777777; margin-bottom: 8px; }
#news-main .news-right #news-today .news-today-body .news-stock-lists h3 {
font-size: 24px; margin-bottom: 5px; }
#news-main .news-right #news-today .news-today-body .news-stock-lists em {
font-style: normal; }
#news-main .news-right #news-today .news-today-body .news-stock-lists em.down {
color: #066fd1; }
#news-main .news-right #news-today .news-today-body .news-stock-lists em.up {
color: #fe4638; } - .news-stock-search-wrap의 너비, 높이를 설정하고 테두리를 설정한다. 이에 속한
<input>태그를 디자인(너비,높이,배경색 등)하고, 글자를 입력할때 outline이 생기지 않도록 설정한다.<button>태그를 디자인한다.(너비, 높이, 배경색)
#news-main .news-right #news-today .news-today-body .news-stock-search-wrap {
width: 100%; height: 30px; border: solid 1px #f2f2f2; }
#news-main .news-right #news-today .news-today-body .news-stock-search-wrap input {
width: calc(100% - 30px); height: 100%; background-color: #ffffff;
border: none; padding: 3px 9px; }
#news-main .news-right #news-today .news-today-body .news-stock-search-wrap input:focus {
outline: none; }
#news-main .news-right #news-today .news-today-body .news-stock-search-wrap button {
width: 30px; height: 100%; background-color: black; }결과 ▼
하단 영역
html
(<footer> blog 페이지와 동일해서 생략, <main> html에 이어서)
1.
<footer> 태그로 하단 영역을 설정하고 class를 설정한다. 하단영역을 위(뉴스리스트), 아래(회사리스트)영역으로 구분하고 (<div>) id를 설정한다. 뉴스리스트는 <ul>,<li>,<img>태그로 만들어 필요한 갯수 만큼 복사해 붙여넣는다.
<div id="news-nav-bottom">
<div class="news-container news-flex-between">
<ul class="news-flex-start">
<li><a href="#">언론사 목록</a></li>
<li><a href="#">분야별 목록</a></li>
</ul>
<a href="#">마이스크랩</a>
</div>
</div>CSS-Style
(main_right css에 이어서)
1. #news-nav-bottom의 위,아래 테두리를 설정하고 이에 속한 <li>태그의 오른쪽 간격을 설정한다.
#news-nav-bottom { border-top: solid 1px #dfdfdf;
border-bottom: solid 1px #e3e7ee; padding: 15px 0; }
#news-nav-bottom li { margin-right: 10px; }결과▼
무엇이 어려웠지?
어떻게 해결했지?
class명을 잘못 치거나 ;를 안 적었거나 명령어를 잘못 친적은 있어도 id= 인지 class=인지 실수 한 적은 없었다. 그래서 무엇 때문에 css언어가 적용이 안되는 이유를 한참을 못찾았는데, 이유는 id로 명명하기로 한걸 class라고 적어서였다.. 찾고 나니 허탈한데 큰 문제가 아니라 다행이었다.. 다음에 원하는 결과가 안나올때 확인해 봐야할 것이 하나 더 늘었다..
그래서?
7월 마지막 날, 월말평가도 2번이나 치뤘고, 이렇게 개발일지를 쓴지도 한달이 넘었다. AI스쿨수업의 반을 지나온건데, 엄청 성장했다는 느낌은 안든다... '무슨말하는거야' 수준에서 '들어는 봤다.' 수준정도... 여전히 직접 레이아웃을 짜고 디자인하는건 어렵고 따라만드는 것도 선생님과 똑같이 했다고 생각했는데 오탈자에 실수 덩어리다. 남은 2개월동안 열심히 배워서 어제보다 나은 오늘 오늘보다 나은 내일이 되길.
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0730
.