오늘의 강의 내용
* 네이버뉴스 상단 카피캣
.png)
카피캣 할 네이버뉴스 상단 모습
네이버뉴스 상단 카피캣 완료 한 모습
<!-- news.html언어 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<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">
<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">
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn_search"></button>
</div>
</div>
</div>
</nav>
</header>
<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>TV조선 뉴스9</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>TV조선 뉴스9</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>TV조선 뉴스9</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>TV조선 뉴스9</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>
<main role="main" id="news_main">
<div class="news_container">
<div class="news_left">
<h2>왼쪽(임시)</h2>
</div>
<div class="news_right">
<h2>오른쪽(임시)</h2>
</div>
</div>
</main>
</body>
</html>
<!-- style.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-top: 17px;
padding-bottom: 17px;
}
#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: #ffffff;
}
#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: none;
}
#news_header .news_header_right .btn_login {
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-left: solid 1px #000000;
border-right: solid 1px #000000;
}
#news_header .sub_nav {
background-color: #ffffff;
border-top: solid 1px #000000;
border-bottom: solid 1px #e3e3e3;
}
#news_header .sub_nav ul {
}
#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%;
border-bottom: solid 2px transparent;
font-weight: bold;
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;
font-size: 12px;
color: #888888;
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;
}
#news_headline {
padding-top: 20px;
}
#news_headline .news_container {
border-bottom: solid 1px #000000;
padding-bottom: 12px;
}
#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;
line-height: 44px;
text-align: center;
}
#news_headline .news_headline_lists li a article .image_wrap {
position: relative;
width: 100%;
height: 132px;
background-color: pink;
}
#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 li a article .image_wrap .overlay .headline_info {
position: absolute;
width: 100%;
padding: 15px 20px;
left: 0;
bottom: 0;
color: #ffffff;
}
#news_headline .news_headline_lists .headline_info i {
display: block;
width: 26px;
height: 26px;
background-color: black;
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.btn_prev {
background-color: yellow;
border-right: none;
}
#news_headline .news_headline_arrows .btn.btn_next {
background-color: pink;
}
#news_headline .news_headline_arrows .btn.btn_up {
background-color: black;
}
#news_main .news_container {
overflow: hidden;
}
#news_main .news_left {
float: left;
width: 750px;
}
#news_main .news_right {
float: right;
width: 327px;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}-
정렬과 관련된 class들을 미리 만들어 놓으면, 코드분량을 많이 줄일수 있다.
-
placeholder 는 input태그영역에 어떠한 정보를 기입해야되는지 사용자한테 알려주는 속성
ex)
<!-- html언어 -->
<input type="text" placeholder="뉴스 검색">-
< article > 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용
-
< article > 영역 안에는 무조건 타이틀 정보가 필요하다. h1~h6태그들 중에서 무조건 한가지가 들어가야 한다
-
javascript효과 멈추는법(현재 보고있는 페이지 내에서)
오른쪽 마우스 클릭 -> 검사 -> 오른쪽 톱니바퀴 -> preferences -> 하단으로 드래그 -> disable jabascript 체크
강의를 끝난후 소감
오늘은 큰문제 없이 작업을 수월하게 완료한것 같다. 계속된 비슷한 작업으로 어느정도 큰그림이 미약하게 나마 보이는거 같기도하다.ㅎㅎ
힘든점, 문제점
큰문제는 없었지만 소스코드의 가독성과 코드를 좀더 줄일수 있는 방법은 없는지 알고싶었다.
개선방안
아직은 강사님의 강의를 곱씹어 보면서 차근차근 유연하게 나만의 코드를 작성하는 습관을 기르는것이 가장 좋을것같다.
i will be the best