Dev log - 26, 네이버 뉴스 카피캣 실습 #3

박강산·2021년 8월 2일
0

대구AI스쿨 - 개발일지

목록 보기
26/44

학습한 내용

네이버 뉴스 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

/* Default CSS */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

네이버 뉴스 실습 - 네이버 연예 뉴스 상단 영역

  • border 값을 넣을 때, 부모 태그에 넣게 되면, 자식 태그의 글자를 초과해서 border 값이 적용되기 때문에, 자식 태그로 정확히 설정
  • margin 병합 현상은 형제 태그끼리 공통된 공백을 가지면, 큰 값이 작은 값을 덮어씌우는 현상인데, top, bottom 에서만 일어나고, left, right 에서는 일어나지 않음

HTML 문서

<body>
    <header id="ent-header">
        <div class="ent-flex-between">
            <div class="ent-header-left">
                <ul class="ent-flex-start">
                    <li><a href="#">TV연예</a></li>
                    <li><a href="news.html">뉴스</a></li>
                </ul>
            </div>
            
            <div class="ent-header-center">
                <ul class="ent-flex-center">
                    <li class="on"><a href="#">TV연예홈</a></li>
                    <li><a href="#">TV</a></li>
                    <li><a href="#">포토</a></li>
                    <li><a href="#">랭킹</a></li>
                    <li><a href="#">영화</a></li>
                    <li><a href="#">최신뉴스</a></li>
                </ul>
            </div>
            
            <div class="ent-header-right ent-flex-end">
                <a href="#" class="btn-login">로그인</a>
                <button type="button" class="btn-menu"></button>
                <button type="button" class="btn-search"></button>
            </div>
        </div>
    </header>         
<body>

CSS 문서 1 - style.css

.ent-container {
    width: 980px;
    margin: 0 auto;
}

.ent-flex-start {
    display: flex;
    flex-wrap: wrap;    
    align-items: center;
}

.ent-flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;    
}

.ent-flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;    
}

.ent-flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;    
}

.ent-border {
    border: solid 1px #000000;
}

#ent-header {
    width: 100%;
    height: 62px;
    background-color: #ffffff;
    border-bottom: solid 2px #f1f1f1;

    padding: 20px 25px 0;
}

#ent-header .ent-header-left ul li {
    font-weight: 700;
}

#ent-header .ent-header-left ul li:last-child a {
    color: #9f9f9f;
}

#ent-header .ent-header-left ul li a:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #dddddd;

    margin: 0 8px;

    vertical-align: -1px;
}

#ent-header .ent-header-left ul li:first-child a:before {
    content: none;
}

#ent-header .ent-header-center ul li {
    font-weight: 700;
    font-size: 16px;

    padding: 0 15px;
}

#ent-header .ent-header-center ul li a {
    display: inline-block;
    border-bottom: solid 2px #ffffff;

    padding-bottom: 2px;
}

#ent-header .ent-header-center ul li.on a {
    color: #e24587;
    border-bottom: solid 2px #e24587;
}

#ent-header .ent-header-right .btn-login {
    width: 45px;
    height: 20px;
    border: solid 1px #000000;

    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin: 0 9px;
}

#ent-header .ent-header-right .btn-menu {
    width: 16px;
    height: 16px;
    background-color: grey;

    margin: 0 9px;
}

#ent-header .ent-header-right .btn-search {
    width: 25px;
    height: 25px;
    background-color: #000000;
    margin-left: 9px;
}

네이버 뉴스 실습 - 네이버 연예 뉴스 왼쪽 영역 (1)

  • rgba 설정에서 투명값을 넣을 때는, 0을 생략해도 됨

  • letter-spacing 속성은 글자간의 좌우 간격을 조정함

  • 말 줄임 설정을 넣을 때, max-width 속성을 적용하면 크기에 맞게 말 줄임 속성을 적용할 수 있음

    예) 왼쪽 max-width 속성 적용 X / 오른쪽 max-width 속성 적용 O

HTML 문서 (velog 자동 비공개 기능 때문에 몇몇 내용들을 임의로 변경함)

<body>
    <main role="main" id="ent-main">
        <div class="ent-container">
            <div class="ent-left">
                <div id="ent-media-headline">
                    <ul class="ent-flex-between">
                        <li>
                            <a href="#">
                                <div class="media-top">
                                    <img src="https://via.placeholder.com/148x145">
                                    <span class="time">01:54</span>
                                    <i class="icon-play"></i>
                                </div>
                                <div class="media-bottom">
                                    <p>[tvN 너는나의봄] 썸남 김동욱 …</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="media-top">
                                    <img src="https://via.placeholder.com/148x145">
                                    <span class="time">01:54</span>
                                    <i class="icon-play"></i>
                                </div>
                                <div class="media-bottom">
                                    <p>[tvN 너는나의봄] 썸남 김동욱 …</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="media-top">
                                    <img src="https://via.placeholder.com/148x145">
                                    <span class="time">01:54</span>
                                    <i class="icon-play"></i>
                                </div>
                                <div class="media-bottom">
                                    <p>[tvN 너는나의봄] 썸남 김동욱 …</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="media-top">
                                    <img src="https://via.placeholder.com/148x145">
                                    <span class="time">01:54</span>
                                    <i class="icon-play"></i>
                                </div>
                                <div class="media-bottom">
                                    <p>[tvN 너는나의봄] 썸남 김동욱 …</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div id="ent-section-1">
                    <ul>
                        <li>
                            <a href="#" class="ent-flex-between">
                                <img src="https://via.placeholder.com/148x90">
                                <div class="ent-news-wrap">
                                    <h3>title 1 title 1 title 1 </h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <div class="bottom-wrap ent-flex-between">
                                        <span class="source">스포츠월드</span>
                                        <span class="count">43</span>
                                    </div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <img src="https://via.placeholder.com/148x90">
                                <div class="ent-news-wrap">
                                    <h3>title 1 title 1 title 1 </h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <div class="bottom-wrap ent-flex-between">
                                        <span class="source">스포츠조선</span>
                                        <span class="count">31</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div id="ent-section-2">
                    <ul class="ent-flex-between">
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <h3>골든차일드 지범X태그→와이X이장준 유닛곡 "함께해 좋았다"</h3>
                                <div class="ent-bottom ent-flex-between">
                                    <span class="source">스포츠동아</span>
                                    <span class="count">15</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <h3>골든차일드 지범X태그→와이X이장준 유닛곡 "함께해 좋았다"</h3>
                                <div class="ent-bottom ent-flex-between">
                                    <span class="source">스포츠동아</span>
                                    <span class="count">15</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <h3>골든차일드 지범X태그→와이X이장준 유닛곡 "함께해 좋았다"</h3>
                                <div class="ent-bottom ent-flex-between">
                                    <span class="source">스포츠동아</span>
                                    <span class="count">15</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div id="ent-section-3">
                    <div class="title-wrap ent-flex-between">
                        <h3>스타 콘텐츠</h3>                       
                        <div class="right-wrap ent-flex-end">                        
                            <div class="count-wrap">
                                <span><em>1</em> / 2</span>
                            </div>
                            
                            <div class="btn-wrap ent-flex-end">
                                <button type="button" class="btn btn-prev"></button>
                                <button type="button" class="btn btn-next"></button>
                            </div>
                        </div>                        
                    </div>

                    <ul class="ent-flex-between">
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/148x148">
                                <span>빅히트 뮤직</span>
                                <h3>[BTS] 아미들의 월요병 치료사 방림이…</h3>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/148x148">
                                <span>빅히트 뮤직</span>
                                <h3>[BTS] 아미들의 월요병 치료사 방림이…</h3>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/148x148">
                                <span>빅히트 뮤직</span>
                                <h3>[BTS] 아미들의 월요병 치료사 방림이…</h3>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/148x148">
                                <span>빅히트 뮤직</span>
                                <h3>[BTS] 아미들의 월요병 치료사 방림이…</h3>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="ent-right">
            </div>

        </div>
    </main>
<body>

CSS 문서 1 - style.css

#ent-main .ent-container {
    overflow: hidden;
}

#ent-main .ent-left {
    float: left;
    width: 654px;
    height: 2000px;
     /*background-color: yellowgreen; */

    padding-right: 24px;
}

#ent-main .ent-left #ent-media-headline {
    padding-bottom: 20px;
    border-bottom: solid 1px #f1f1f1;
}

#ent-main .ent-left #ent-media-headline li {
    width: 148px;
    height: 204px;

    border-radius: 10px;
}

#ent-main .ent-left #ent-media-headline a {
    display: block;
    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-media-headline .media-top {
    position: relative;
    height: 144px;
}

#ent-main .ent-left #ent-media-headline .media-top img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-media-headline .media-top .time {
    position: absolute;
    display: block;
    height: 16px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, .56);
    
    padding: 0 4px;
    right: 8px;
    top: 8px;

    color: #ffffff;
    font-size: 11px;
    line-height: 16px;
    
}

#ent-main .ent-left #ent-media-headline .media-top .icon-play {
    position: absolute;
    display: block;

    width: 28px;
    height: 28px;
    background-color: grey;
    border-radius: 50%;

    left: 8px;
    bottom: 7px;
}

#ent-main .ent-left #ent-media-headline .media-bottom {
    height: 60px;
    background-color: #444a60;
}

#ent-main .ent-left #ent-media-headline .media-bottom p {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -1px;

    padding: 11px 12px 0;

    color: #ffffff;
}

#ent-main .ent-left #ent-section-1 li {
    border-bottom: solid 1px #f1f1f1;
    padding: 20px 0;
}

#ent-main .ent-left #ent-section-1 li img {
    width: 148px;
    height: 90px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-1 li .ent-news-wrap {
    width: 462px;
}

#ent-main .ent-left #ent-section-1 li .ent-news-wrap h3 {
    margin-bottom: 8px;
    
    font-size: 14px;
    font-weight: 700;    
}

#ent-main .ent-left #ent-section-1 li .ent-news-wrap p {
    margin-bottom: 8px;
    
    font-size: 11px;
    color: #898989;
    font-weight: 400;
    line-height: 20px;
}

#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .source,
#ent-main .ent-left #ent-section-2 .ent-bottom .source {
    font-size: 11px;
    font-weight: 400;
    color: #a7a7a7;
}

#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .count,
#ent-main .ent-left #ent-section-2 .ent-bottom .count {
    display: inline-block;
    
    width: 20px;
    height: 20px;
    border: solid 1px #000000;
    border-radius: 5px;
    
    text-align: center;
    line-height: 20px;

    font-size: 10px;
}

#ent-main .ent-left #ent-section-2 {
    border-bottom: solid 1px #f1f1f1;
    padding: 20px 0;    
}

#ent-main .ent-left #ent-section-2 li {
    width: 200px;    
}

#ent-main .ent-left #ent-section-2 li a img {
    width: 200px;
    height: 122px;
    border: solid 1px #000000;

    margin-bottom: 15px;
}

#ent-main .ent-left #ent-section-2 li a h3 {
    font-size: 13px;
    line-height: 20px;

    margin-bottom: 9px;
}

#ent-main .ent-left #ent-section-3 {
    padding: 24px 0;
    border-bottom: solid 1px #e4e4e4;
}

#ent-main .ent-left #ent-section-3 .title-wrap {
    margin-bottom: 18px;
}

#ent-main .ent-left #ent-section-3 .title-wrap h3 {
    font-size: 16px;
}

#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span {
    font-size: 12px;
    color: #666;
}

#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span em {
    font-style: normal;
    color: #ff0080;
}

#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap {
    margin-left: 8px;
}

#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn {
    width: 24px;
    height: 24px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-prev {
    border-right: none;
    background-color: blue;
}

#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-next {
    background-color: green;
}

#ent-main .ent-left #ent-section-3 li {
    width: 148px;
    height: 148px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-3 li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-section-3 li img {
    position: absolute;

    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-section-3 li span {
    position: absolute;
    display: block;
    max-width: 100%;
    background-color: #f40080;
    
    padding: 0 5px;

    left: 0;
    top: 0;

    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ent-main .ent-left #ent-section-3 li h3 {
    position: absolute;
    width: 100%;
    min-height: 32px;
    background-color: rgba(0, 0, 0, .3);

    padding: 9px 10px 8px;

    left: 0;
    bottom: 0;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

#ent-main .ent-right {
    float: right;
    width: 324px;
    height: 2000px;
    background-color: pink;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 없음

해결방법

  • 없음

학습 소감

  • 오늘은 네이버 뉴스 중 TV연예 탭 사이트의 카피캣 실습을 진행하였음. 오늘의 상단 영역은, 하나의 container로 감싸지 않고, CSS 문서에 만들어둔 flex 속성을 이용해서 영역을 정렬하였음. 그렇기 때문에 브라우저 크기를 줄이면, 줄여진 크기에 맞춰서 정렬이 맞춰지는 모습을 확인할 수 있었음.
    또한, 형제 태그 중 하나에만 다른 CSS 속성을 적용하고 싶을 때는, 나머지 태그에는 같은 class 를 적용하고, 하나에는 다른 class 를 적용하여 속성을 적용시키면 됨을 다시 한번 복습을 통해 알 수 있었음.
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 25, 네이버 뉴스 카피캣 실습 #2

다음 포스트

Dev log - 27, 네이버 뉴스 카피캣 실습 #4

0개의 댓글