[대구AI스쿨] 개발일지 24일차 210729
학습내용
1. 네이버 뉴스 (1)
news.html
파일을 만든다.
index.html
를 모두 복사하여 붙여넣기 한 후, <body>태그
에 해당하는 내용을 모두 삭제한다.
index.html
에서 link 경로
를 입력한다.
1) 네이버 뉴스 상단영역
<!-- 뉴스 상단 영역 -->
<header id="news-header">
<div class="news-container">
<div class="news-flex-between">
<nav class="news-header-left">
<ul class="news-flex-start">
<li class="on"><a href="#">뉴스</a></li>
<li><a href="#">TV연예</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">뉴스스탠드</a></li>
<li><a href="#">날씨</a></li>
</ul>
</nav>
<div class="news-header-right news-flex-end"> <!-- blog.html 헤더 상단에서 만든 것과 동일 -->
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<nav class="sub-nav">
<div class="news-container">
<div class="news-flex-between">
<ul class="news-flex-start">
<li><a href="#" class="on">뉴스홈</a></li>
<li><a href="#">속보</a></li>
<li><a href="#">정치</a></li>
<li><a href="#">경제</a></li>
</ul>
<div class="news-search-wrap news-flex-between"> <!-- blog.html 헤더 상단에서 만든 것과 동일 -->
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</nav>
</header>
news.html
파일을 만든다.index.html
를 모두 복사하여 붙여넣기 한 후, <body>태그
에 해당하는 내용을 모두 삭제한다.index.html
에서 link 경로
를 입력한다.<!-- 뉴스 상단 영역 -->
<header id="news-header">
<div class="news-container">
<div class="news-flex-between">
<nav class="news-header-left">
<ul class="news-flex-start">
<li class="on"><a href="#">뉴스</a></li>
<li><a href="#">TV연예</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">뉴스스탠드</a></li>
<li><a href="#">날씨</a></li>
</ul>
</nav>
<div class="news-header-right news-flex-end"> <!-- blog.html 헤더 상단에서 만든 것과 동일 -->
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<nav class="sub-nav">
<div class="news-container">
<div class="news-flex-between">
<ul class="news-flex-start">
<li><a href="#" class="on">뉴스홈</a></li>
<li><a href="#">속보</a></li>
<li><a href="#">정치</a></li>
<li><a href="#">경제</a></li>
</ul>
<div class="news-search-wrap news-flex-between"> <!-- blog.html 헤더 상단에서 만든 것과 동일 -->
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</nav>
</header>
css↓
/* 뉴스 */
.news-container {
width: 1080px;
margin: 0 auto;
}
.news-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.news-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* 뉴스 상단 영역 */
#news-header {
background-color: #3f63bf;
}
#news-header .news-header-left {
padding: 17px 0;
}
#news-header .news-header-left ul {
}
#news-header .news-header-left ul li {
font-size: 15px;
}
#news-header .news-header-left ul li.on {
font-size: 20px;
}
#news-header .news-header-left ul li a {
color: #fff;
}
#news-header .news-header-left ul li a:before {
display: inline-block;
content: "";
width: 1px;
height: 15px;
background-color: #000;
opacity: 0.2;
margin: 0 10px;
vertical-align: -1px;
}
#news-header .news-header-left ul li:first-child a:before {
content: initial;
/* none 또는 initial 둘 다 입력 가능 */
}
#news-header .news-header-right {
}
#news-header .news-header-right .btn-login {
display: block;
width: 55px;
height: 25px;
border: solid 1px #000000;
line-height: 25px;
text-align: center;
color: #ffffff;
font-size: 12px;
margin-right: 20px;
}
#news-header .news-header-right .btn-menu {
width: 55px;
height: 55px;
background-color: #3f63bf;
border: solid #000000;
border-width: 0 1px;
}
#news-header .sub-nav {
background-color: #ffffff;
border-top: solid 1px #000;
border-bottom: solid 1px #e3e3e3;
}
#news-header .sub-nav ul li {
width: auto;
height: 46px;
margin-right: 16px;
}
#news-header .sub-nav ul li a {
display: block;
width: 100%;
height: 100%;
font-weight: bold;
border-bottom: solid 2px transparent;
line-height: 46px;
}
#news-header .sub-nav ul li a.on {
border-bottom: solid 2px #3f63bf;
color: #3f63bf;
}
#news-header .sub-nav .news-search-wrap {
width: 280px;
height: 30px;
border: solid 1px #e1e1e1;
background-color: #fafafa;
}
#news-header .sub-nav .news-search-wrap input {
width: calc(100% - 30px);
height: 100%;
border: none; /* 원래 input태그가 가지고 있는 border를 삭제해 준다. */
font-size: 12px;
color: #888;
padding: 3px 9px;
}
#news-header .sub-nav .news-search-wrap input:focus {
outline: none;
}
#news-header .sub-nav .news-search-wrap .btn-search {
width: 30px;
height: 100%;
background-color: blue;
}
2) 네이버 뉴스 헤드라인
<!-- 뉴스 헤드라인 -->
<div id="news-headline">
<div class="news-container">
<div class="news-headline-menu-wrap news-flex-between">
<ul class="main-lists news-flex-start">
<li><a href="#">신문 헤드라인</a></li>
<li><a href="#">저녁 방송 뉴스</a></li>
</ul>
<ul class="sub-lists news-flex-end">
<li><a href="#">팩트체크</a></li>
<li><a href="#">언론사 구독</a></li>
<li><a href="#">언론사 뉴스</a></li>
<li><a href="#">라이브러리</a></li>
</ul>
</div>
<ul class="news-headline-lists news-flex-between">
<li>
<a href="#">
<article>
<h3>SBS 8뉴스</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>SBS 8뉴스</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>SBS 8뉴스</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>SBS 8뉴스</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
</ul>
<div class="news-headline-arrows news-flex-end">
<div class="btn-wrap news-flex-start">
<a href="#" class="btn btn-prev"></a>
<a href="#" class="btn btn-next"></a>
</div>
<a href="#" class="btn btn-up"></a>
</div>
</div>
</div>
css↓
/* 뉴스 헤드라인 */
#news-headline {
padding-top: 20px;
}
#news-headline .news-container {
border-bottom: solid 1px #000;
padding-bottom: 12px; /* padding-bottom을 news-headline에 넣으면, border-bottom 값이 브라우저 왼쪽 끝과 오른쪽 끝까지로 설정된다. */
}
#news-headline .news-headline-menu-wrap {
margin-bottom: 15px;
}
#news-headline .news-headline-menu-wrap .main-lists {
}
#news-headline .news-headline-menu-wrap .main-lists li {
margin-right: 20px;
font-size: 15px;
}
#news-headline .news-headline-menu-wrap .main-lists li a {
}
#news-headline .news-headline-menu-wrap .sub-lists {
}
#news-headline .news-headline-menu-wrap .sub-lists li {
font-size: 12px;
}
#news-headline .news-headline-menu-wrap .sub-lists li a {
}
#news-headline .news-headline-menu-wrap .sub-lists li a:before {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: #e0e0e0;
margin: 0 5px;
vertical-align: -1px;
}
#news-headline .news-headline-menu-wrap .sub-lists li:first-child a:before {
content: none;
}
#news-headline .news-headline-lists {
margin-bottom: 12px;
}
#news-headline .news-headline-lists li {
width: 255px;
height: 178px;
border: solid 1px #ccc;
}
#news-headline .news-headline-lists li a {
display: block;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article {
position: relative;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article h3 {
width: 100%;
height: 44px;
/*background-color: greenyellow;*/
line-height: 44px;
text-align: center;
}
#news-headline .news-headline-lists li a article .image-wrap {
position: relative;
width: 100%;
height: calc(100% - 44px);
/*background-color: lightpink;*/
}
#news-headline .news-headline-lists li a article .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article .image-wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#news-headline .news-headline-lists .headline-info {
position: absolute;
width: 100%;
/*background-color: palevioletred;*/
padding: 15px 26px;
left: 0;
bottom: 0;
color: #fff;
}
#news-headline .news-headline-lists .headline-info i {
display: block;
width: 26px;
height: 26px;
background-color: #000;
border-radius: 50%;
margin-right: 10px;
}
#news-headline .news-headline-lists .headline-info div {
width: calc(100% - 38px);
}
#news-headline .news-headline-lists .headline-info span {
font-size: 13px;
font-weight: bold;
}
#news-headline .news-headline-lists .headline-info p {
display: inline;
font-size: 12px;
}
#news-headline .news-headline-arrows {
}
#news-headline .news-headline-arrows .btn-wrap {
margin-right: 15px;
}
#news-headline .news-headline-arrows .btn {
display: block;
width: 24px;
height: 24px;
border: solid 1px #dcdddc;
}
#news-headline .news-headline-arrows .btn-prev {
background-color: greenyellow;
border-right: none;
}
#news-headline .news-headline-arrows .btn-next {
background-color: lightpink;
}
#news-headline .news-headline-arrows .btn-up {
background-color: black;
}
어려웠던 점과 해결방안
새로고침되어서 내용이 바뀌는 것은 Jaca Script와 관련된 것이다.
학습소감
가장 어려웠던 positon 2차원, 3차원 등 배치작업에 대한 것이 조금씩 익숙해 지고 있다.
이제는 코드에서 오타가 나거나, 조금 틀어짐이 있을 경우 바로바로 어떤 코드에서 오류가 났는지 찾을 수 있게 되었고, 틀어진 부분도 강사님과는 조금 다르게 적용해 보기도 하였다.
레이어 겹침현상, left, right 같은 배치작업에 대해 익숙해지니 시간이 엄청나게 단축되는 것 같다.
Author And Source
이 문제에 관하여([대구AI스쿨] 개발일지 24일차 210729), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seona056/대구AI스쿨-개발일지-24일차-210729저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)