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

박강산·2021년 8월 3일
0

대구AI스쿨 - 개발일지

목록 보기
27/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;
}

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

  • a 태그 안에는 a 태그가 불가

  • flex 속성이 안될 때는, position 속성을 부여하여 조절

  • 실습 강의에서 ent-section-8 부분 여백 설정이 되어 있지 않아, padding 값을 추가하였고, news-info-wrap 부분 img 에 border 값이 설정되지 않아, 값을 추가하였음

  • CSS 기초 세팅에서 box-sizing: border-box 속성을 적용했기 때문에, 부모 태그의 크기는 border 값 까지 포함한 값임. 그렇기에, 부모 태그와 img 의 크기가 같으면 border 값을 침범함.
    이럴 때는 부모 태그 크기 값을 100%로 설정하면 됨

예)

HTML 문서

<body>
    <main role="main" id="ent-main">
        <div class="ent-container">
            <div class="ent-left">
                <div id="ent-section-4">
                    <div class="title-wrap ent-flex-between">
                        <h3>AiRS 추천뉴스</h3>
                    </div>

                    <ul>
                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>
                    </ul>

                    <button class="btn-more">새로운 뉴스 가져오기</button>
                    
                </div>


                <div id="ent-section-5">
                    <div class="title-wrap ent-flex-between">
                        <h3>오늘의 프로그램</h3>
                        <a href="#">더보기</a>
                    </div>

                    <ul>
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>

                         <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/55x55">
                                <h4>강철부대</h4>
                            </a>
                        </li>
                    </ul>
                </div>


                <div id="ent-section-6">
                    <div class="title-wrap ent-flex-between">
                        <h3>TV 프로그램 구독</h3>
                        <a href="#">더보기</a>
                    </div>

                    <ul class="ent-flex-between">
                        <li>
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="https://via.placeholder.com/148x85">
                                    <i class="icon-play"></i>
                                </div>
                                <h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
                            </a>

                            <a href="#">
                                <span class="source">JTBC</span>
                                <span class="program">뭉쳐야 찬다 2</span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="https://via.placeholder.com/148x85">
                                    <i class="icon-play"></i>
                                </div>
                                <h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
                            </a>

                            <a href="#">
                                <span class="source">JTBC</span>
                                <span class="program">뭉쳐야 찬다 2</span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="https://via.placeholder.com/148x85">
                                    <i class="icon-play"></i>
                                </div>
                                <h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
                            </a>

                            <a href="#">
                                <span class="source">JTBC</span>
                                <span class="program">뭉쳐야 찬다 2</span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="https://via.placeholder.com/148x85">
                                    <i class="icon-play"></i>
                                </div>
                                <h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
                            </a>

                            <a href="#">
                                <span class="source">JTBC</span>
                                <span class="program">뭉쳐야 찬다 2</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div id="ent-section-4">
                    <ul>
                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>

                        <li>
                            <a href="#" class="ent-flex-between">
                                <div class="ent-info">
                                    <h3>Title 1 Title 1 Title 1 Title 1</h3>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span class="source">뉴스1</span>
                                </div>

                                <img src="https://via.placeholder.com/88x88">
                            </a>                                
                        </li>
                    </ul>

                    <button class="btn-more">새로운 뉴스 가져오기</button>                    
                </div>
              
                <div id="ent-section-7">
                    <div class="title-wrap ent-flex-between">
                        <h3>영화계는 지금</h3>
                        <a href="#">더보기</a>
                    </div>

                    <div class="movie-wrap ent-flex-start">
                        <div class="left">
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <h4>Title 1 Title 1 Title 1 Title 1</h4>
                            </a>                            
                        </div>

                        <div class="right">
                            <ul>
                                <li>
                                    <a href="#">'베놈 2: 렛 데어 비 카니지' 베놈vs카니지의 대결, 2차 예고편 화제</a>
                                    <span>YTN</span>
                                </li>

                                <li>
                                    <a href="#">'베놈 2: 렛 데어 비 카니지' 베놈vs카니지의 대결, 2차 예고편 화제</a>
                                    <span>YTN</span>
                                </li>

                                <li>
                                    <a href="#">'베놈 2: 렛 데어 비 카니지' 베놈vs카니지의 대결, 2차 예고편 화제</a>
                                    <span>YTN</span>
                                </li>

                                <li>
                                    <a href="#">'베놈 2: 렛 데어 비 카니지' 베놈vs카니지의 대결, 2차 예고편 화제</a>
                                    <span>YTN</span>
                                </li>

                                <li>
                                    <a href="#">'베놈 2: 렛 데어 비 카니지' 베놈vs카니지의 대결, 2차 예고편 화제</a>
                                    <span>YTN</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div id="ent-section-8">
                    <div class="title-wrap ent-flex-between">
                        <div class="ent-flex-start">
                            <h3>많이 본 연예정보</h3>
                            
                            <ul class="ent-flex-start">
                                <li><a href="#" class="on">연예뉴스</a></li>
                                <li><a href="#">영상</a></li>
                                <li><a href="#">뮤직</a></li>
                                <li><a href="#">V LIVE</a></li>
                            </ul>
                        </div>
                        
                        <a href="#" class="more">더보기</a>
                    </div>

                    <ol class="news-lists">
                        <li>
                            <a href="#" class="ent-flex-start">
                                <span class="rank">1</span>

                                <div class="news-info-wrap ent-flex-between">
                                    <div class="news-info-txt">
                                        <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                        <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                        <span>텐아시아</span>
                                    </div>

                                    <img src="https://via.placeholder.com/88x88">
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="ent-flex-start">
                                <span class="rank">2</span>

                                <div class="news-info-wrap ent-flex-between">
                                    <div class="news-info-txt">
                                       <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                        <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                        <span>텐아시아</span>
                                    </div>

                                    <img src="https://via.placeholder.com/88x88">
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="ent-flex-start">

                                <span class="rank">3</span>

                                <div class="news-info-wrap ent-flex-between">
                                    <div class="news-info-txt">
                                        <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                        <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                        <span>텐아시아</span>
                                    </div>

                                    <img src="https://via.placeholder.com/88x88">
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="ent-flex-start">

                                <span class="rank">4</span>

                                <div class="news-info-wrap ent-flex-between">
                                    <div class="news-info-txt">
                                        <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                        <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                        <span>텐아시아</span>
                                    </div>

                                    <img src="https://via.placeholder.com/88x88">
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#" class="ent-flex-start">

                                <span class="rank">5</span>

                                <div class="news-info-wrap ent-flex-between">
                                    <div class="news-info-txt">
                                        <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                        <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                        <span>텐아시아</span>
                                    </div>

                                    <img src="https://via.placeholder.com/88x88">
                                </div>
                            </a>
                        </li>
                    </ol>
                </div>


                <div id="ent-section-9">
                    <div class="title-wrap ent-flex-between">
                        <h3>기자추천 연재코너</h3>
                        <a href="#" class="more">더보기</a>
                    </div>

                    <ul class="ent-flex-between">
                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <div class="txt-wrap">
                                    <span class="program">MD이슈</span>
                                    <span class="source">마이데일리</span>
                                    <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                </div>
                            </a>                            
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <div class="txt-wrap">
                                    <span class="program">MD이슈</span>
                                    <span class="source">마이데일리</span>
                                    <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                </div>
                            </a>                            
                        </li>

                        <li>
                            <a href="#">
                                <img src="https://via.placeholder.com/200x122">
                                <div class="txt-wrap">
                                    <span class="program">MD이슈</span>
                                    <span class="source">마이데일리</span>
                                    <h4>Title 1 Title 1 Title 1 Title 1</h4>
                                </div>
                            </a>                            
                        </li>
                    </ul>
                </div>                
            </div>

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

        </div>
    </main>
</body>

CSS 문서 1 - style.css

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

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

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

#ent-main .ent-left #ent-section-4 li:last-child {
    border-bottom: none;
}

#ent-main .ent-left #ent-section-4 li .ent-info {
    width: 528px;
}

#ent-main .ent-left #ent-section-4 li .ent-info h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 7px;
}

#ent-main .ent-left #ent-section-4 li .ent-info p {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #898989;

    margin-bottom: 9px;
}

#ent-main .ent-left #ent-section-4 li .ent-info .source {
    font-size: 11px;
    font-weight: 400;
    color: #a7a7a7;
}

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

#ent-main .ent-left #ent-section-4 .btn-more {
    display: block;
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    border: solid 1px #e8e8e8;

    line-height: 40px;

    text-align: center;

    color: #444;
}

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

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

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

#ent-main .ent-left #ent-section-5 .title-wrap a {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-left #ent-section-5 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#ent-main .ent-left #ent-section-5 li a {
    display: block;
    
    width: 100%;
    height: 100%;
    text-align: center;
}

#ent-main .ent-left #ent-section-5 li a img {
    width: 55px;
    height: 55px;
    border-radius: 50%;

    margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-5 li a h4 {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
}

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

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

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

#ent-main .ent-left #ent-section-6 .title-wrap a {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-left #ent-section-6 li {
    width: 148px;
}

#ent-main .ent-left #ent-section-6 ul .img-wrap {
    position: relative;
    width: 148px;
    height: 85px;
    border: solid 1px #000000;

    margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-6 ul .img-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-section-6 ul .img-wrap .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-section-6 ul h4 {
    font-size: 12px;

    margin-bottom: 8px;
}

#ent-main .ent-left #ent-section-6 ul span {
    font-size: 11px;
    color: #141414;
}

#ent-main .ent-left #ent-section-6 ul .source {
    color: #999;
}

#ent-main .ent-left #ent-section-6 ul .source:after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #d3d3d3;

    vertical-align: top;

    margin: 9px 2px 0 4px;
}

#ent-main .ent-left #ent-section-6 ul .program:after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: red;

    vertical-align: top;

    margin: 7px 2px 0 4px;
}

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

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

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

#ent-main .ent-left #ent-section-7 .title-wrap a {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-left #ent-section-7 .movie-wrap {
    align-items: stretch;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .left img {
    width: 200px;
    height: 122px;
    margin-bottom: 11px;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .left h4 {
    font-size: 12px;
    font-weight: 700;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .right {
    width: 412px;
    margin-left: 18px;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .right li {
    margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .right li:last-child {
    margin-bottom: 0;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .right li a {
    display: inline-block;
    max-width: 363px;
    margin-right: 5px;
    vertical-align: top;

    font-size: 14px;
    font-weight: 700;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ent-main .ent-left #ent-section-7 .movie-wrap .right li span {
    vertical-align: top;
    
    font-size: 11px;
    color: #898989;
}

#ent-main .ent-left #ent-section-8 {
    padding-top: 24px;
}

#ent-main .ent-left #ent-section-8 .title-wrap div {
    align-items: flex-start;
}

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

#ent-main .ent-left #ent-section-8 .title-wrap ul {
    position: relative;
    top: -4px;
    margin-left: 19px;
}

#ent-main .ent-left #ent-section-8 .title-wrap li a {
    font-size: 12px;
    color: #181818;
}

#ent-main .ent-left #ent-section-8 .title-wrap li a:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #e8e8e8;

    margin: 0 10px;

    vertical-align: -1px;
}

#ent-main .ent-left #ent-section-8 .title-wrap li:first-child a:before {
    content: none;
}

#ent-main .ent-left #ent-section-8 .title-wrap li a.on {
    font-weight: 700;
    color: #e2458f;
    border-bottom: solid 1px #e2458f;
}

#ent-main .ent-left #ent-section-8 .title-wrap .more {
    font-size: 12px;
    color: #999;
}

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

#ent-main .ent-left #ent-section-8 .news-lists .rank {
    display: block;
    width: 40px;
    text-align: center;
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap {
    width: calc(100% - 40px);
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap .news-info-txt {
    width: 486px;
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap .news-info-txt h4 {
    font-size: 14px;
    font-weight: 700;    
    margin-bottom: 9px;
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap .news-info-txt p {
    font-size: 12px;
    font-weight: 400;
    color: #898989;

    margin-bottom: 8px;
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap .news-info-txt span {
    font-size: 11px;
    color: #898989;
}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap img {
    width: 88px;
    height: 88px;
    border: solid 1px #000;
}

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

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

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

#ent-main .ent-left #ent-section-9 .title-wrap .more {
    font-size: 12px;
    color: #999;
}

#ent-main .ent-left #ent-section-9 li {
    width: 200px;
    border: solid 1px #000000;
}

#ent-main .ent-left #ent-section-9 li a {
    display: block;
}

#ent-main .ent-left #ent-section-9 li a img {
    width: 100%;
    height: 122px;
}

#ent-main .ent-left #ent-section-9 li a .txt-wrap {
    padding: 13px 14px 18px;
}

#ent-main .ent-left #ent-section-9 .txt-wrap span {
    font-size: 11px;
}

#ent-main .ent-left #ent-section-9 .txt-wrap .program {
    color: #ff0080;
}

#ent-main .ent-left #ent-section-9 .txt-wrap .program:after {
    content: '';
    display: inline-block;
    
    width: 2px;
    height: 2px;
    background-color: #d3d3d3;
    
    vertical-align: top;

    margin: 9px 2px 0 4px;
}

#ent-main .ent-left #ent-section-9 .txt-wrap .source {
    color: #999;
}

#ent-main .ent-left #ent-section-9 .txt-wrap h4 {   
    padding-top: 8px;

    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    min-height: 36px; 
}

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

  • box-sizing: border-box 속성

해결방법

  • 강의 복습과 정리를 통해, box-sizing: border-box 속성을 설정하면, border 값까지 크기에 포함된다는 것을 다시 한번 학습하였음.

학습 소감

  • 오늘은 어제에 이어서 네이버 TV연예 뉴스 사이트의 카피캣 실습을 진행하였음. 오늘은 실습 영상에서 부족했던 부분을 나름대로 속성을 기입하여 원본 사이트와 비슷하게 속성을 설정해보았는데, 내가 원하는 대로 결과물이 나와서 만족스러웠음.

    또한, class 설정을 따로 함으로써 각자 같은 태그끼리도 속성을 다르게 설정하는 것에 익숙해지기 시작하여, 오늘 결과 과정을 보여줄 때 사용했을 때도 수월하였음

profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

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

다음 포스트

Dev log - 28, 네이버 뉴스 카피캣 실습 #5

0개의 댓글