학습한 내용
네이버 뉴스 실습 #2
3. Main
[html]
<main role="main" id="news-main">
<div class="news-container">
<div class="news-left"></div>
<div class="news-right"></div>
</div>
</main>[css]
#news-main .news-container {
overflow: hidden;
}
#news-main .news-left {
float: left;
width: 750px;
padding-right: 26px;
padding-bottom: 100px;
}
#news-main .news-right {
float: right;
width: 327px;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}4. Main Left
구조
[html]
<div class="news-left">
<div class="news-main-wrap news-custome"></div>
<div class="news-main-wrap"></div>
<div class="news-main-wrap"></div>
<div class="news-main-wrap"></div>
<div class="news-main-wrap"></div>
</div>(1) news main wrap
[html #1]
<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 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><i></i></li>
<li><a href="#">title 2</a><i></i></li>
<li><a href="#">title 3 title 3 title 3</a><i></i></li>
<li><a href="#">title 3 title 3</a><i></i></li>
<li><a href="#">title 3</a><i></i></li>
</ul>
</div>
</div>[html #2]
<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 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 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 3</a><span>중앙일보</span></li>
<li><a href="#">title 3</a><span>부산일보</span></li>
</ul>
</div>
</div>[css]
#news-main .news-left .news-main-wrap {
padding-top: 25px;
padding-bottom: 25px;
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 .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 .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;
}
#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-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: '';
position: relative;
display: inline-block;
width: 14px;
height: 11px;
background-color: grey;
margin: 0 4px;
top: 1px;
}
#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;
}
#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-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;
}
5. Main Right
구조
[html]
<div class="news-right">
<div id="news-popular"></div>
<div class="news-banner"></div>
<div id="news-today"></div>
</div>(1) news popular
[html]
<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>[css]
#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-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;
}
(2) news banner
[html]
<div class="news-banner"></div>[css]
#news-main .news-right .news-banner {
width: 300px;
height: 250px;
background-color: #000000;
border: solid 1px #e3e3e3;
margin-bottom: 30px;
}
(3) news today
[html]
<div id="news-today">
<div class="news-today-header news-flex-start">
<h3>TODAY</h3>
<span>05.21 (금)</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.13</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>[css]
#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: #e5e5e5;
margin: 0 7px;
vertical-align: -1px;
}
#news-main .news-right #news-today .news-today-body {
padding: 13px 20px 20px;
border: 1px solid #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-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-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;
}
학습 소감
월말평가를 준비하면서 개념들은 다시 되짚어보는 계기가 되어서 좋았다. 생각보다 자주 쓰지 않아서 까먹고 있던 개념들도 다시 상기시키게 되었다. 개념을 다시 익히면서 책을 참고했는데 책에는 내가 배우지 않거나 배우면서 빠진 속성들을 알 수 있어서 좋았다. 예를 들면 strong 태그와 b 태그는 눈으로 보기에는 둘 다 같은 굵은 텍스트로 표현되지만 화면 낭독기에 어떻게 읽히느냐에 따라 역할이 구분되는 것을 알게 되었다.
