1) 학습한 내용
오늘은 어제에 이어 뉴스 영역을 마무리 해보았다.
1. news - main left
- html
<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 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>
<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>
<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>
<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>
<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>
</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>
</div>- css
#news-main .news-container {
overflow: hidden;
}
#news-main .news-left {
float: left;
width: 750px;
padding-right: 26px;
padding-bottom: 100px;
}
#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 {
}
#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 {
}
#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;
}
2. news - main right
- html
<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>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>
</div>
</div>
</main>- css
#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-main .news-right #news-popular .news-popular-lists {
}
#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 h4 a {
}
#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;
}
#news-main .news-right #news-popular .news-popular-lists li img {
}
#news-main .news-right .news-banner {
width: 300px;
height: 250px;
background-color: #000000;
border: solid 1px #e3e3e3;
margin-bottom: 30px;
}
#news-main .news-right #news-today {
}
#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 {
}
#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;
}
3. news - main left bottom
- html
<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
#news-nav-bottom {
border-top: solid 1px #dfdfdf;
border-bottom: solid 1px #e3e7ee;
padding: 15px 0;
}
#news-nav-bottom li {
margin-right: 10px;
}
2) 학습내용 중 어려웠던 점 및 해결방법
오늘은 월말평가가 있는날!! 오픈북이라고 해도 항상 시험은 떨린다! 다행히도 크게 어려운 문제는 없었으나 조금씩 헷깔렸던 부분들이 있었다. 항상 결과물으 눈으로 보다가 말로 풀어서 설명을 읽으니 조금 어색했던 것같다.
뉴스 부분도 마무리를 하였는데 크게 어려웠던 점은 없었던것같다!
3) 학습소감
모르는 것이 있으면 검색을 많이 하는편인데 특히나 이런 코드부분들은 상세하게 참 잘나와있는 것 같다. 그만큼 다른분들이 많은 관심을 가지고 있다는 거겠지??????
그래서 항상 감사하게도 간단한 검색으로 다양한 정보를 얻어갈 수 있어 좋은것같다!
이번주가 끝이나면서 7월도 끝이났다. 무더운 여름이 끝이 보이지 않을 것만 같았는데 벌써 많은 시간이 흘러 여름도 얼마 남지 않았다는 생각이든다.
시간은 빠른데 왜이리 배울 것은 끝이 없는지~~~!!
그래도 뽜이팅 : )
아직 여백이 많은 개린이입니다.