[dg_ai_school] 웹프로그래밍 27

이채환·2021년 8월 3일

webprogramming

목록 보기

27/51

학습내용

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="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="end-flex-center">
                    <li><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"></div>
                <a href="#">로그인</a>
                <button type="button" class="btn-menu"></button>
                <button tyep="button" class="btn-search"></button>
        </div>

    </header>

    <main role="main" id="ent-main">
		<div class="ent-container">
			
			<div class="ent-main-left"></div>
            <div class="ent-main-right"></div>

		</div>
	</main>

    <div class="ent-main-left">

        <div id="ent-media-headline"></div>
        <div id="ent-section-1"></div>
        <div id="ent-section-2"></div>
        <div id="ent-section-3"></div>
    </div>   

    <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">03:02</span>
                        <i class="icon-play"></i>
                    </div>

                    <div class="media-bottom">
                        <p>[신곡 MV] BTS (방탄소년단)......</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="media-top">
                        <img src="https://via.placeholder.com/148x145">
                        <span class="time">03:02</span>
                        <i class="icon-play"></i>
                    </div>

                    <div class="media-bottom">
                        <p>[신곡 MV] BTS (방탄소년단)......</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="media-top">
                        <img src="https://via.placeholder.com/148x145">
                        <span class="time">03:02</span>
                        <i class="icon-play"></i>
                    </div>

                    <div class="media-bottom">
                        <p>[신곡 MV] BTS (방탄소년단)......</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="media-top">
                        <img src="https://via.placeholder.com/148x145">
                        <span class="time">03:02</span>
                        <i class="icon-play"></i>
                    </div>

                    <div class="media-bottom">
                        <p>[신곡 MV] BTS (방탄소년단)......</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <div class="bottom-wrap ent-flex-between">
                                    <span class="source">TV리포트</span>
                                    <span class="count">9</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </p>
                                <div class="bottom-wrap ent-flex-between">
                                    <span class="source">TV리포트</span>
                                    <span class="count">9</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>Title 2</h3>
                            <div class="bottom-wrap ent-flex-between">
                                <span class="source">OSEN</span>
                                <span class="count">1</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://via.placeholder.com/200x122">
                            <h3>Title 2</h3>
                            <div class="bottom-wrap ent-flex-between">
                                <span class="source">OSEN</span>
                                <span class="count">1</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://via.placeholder.com/200x122">
                            <h3>Title 2</h3>
                            <div class="bottom-wrap ent-flex-between">
                                <span class="source">OSEN</span>
                                <span class="count">1</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="button-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/148">
                            <span>에이치엔드</span>
                            <h3>[금새록] 오월의 새록</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://via.placeholder.com/148">
                            <span>에이치엔드</span>
                            <h3>[금새록] 오월의 새록</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://via.placeholder.com/148">
                            <span>에이치엔드</span>
                            <h3>[금새록] 오월의 새록</h3>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://via.placeholder.com/148">
                            <span>에이치엔드</span>
                            <h3>[금새록] 오월의 새록</h3>
                        </a>
                    </li>
                </ul>
            </div>

            <div id="ent-section-4">
                <div class="title-wrap">
                    <h3>추천 뉴스</h3>
                </div>

                <ul>
                    <li>
                        <a href="#" class="ent-flex-between">
                            <div class="ent-info">
                                <h3>Title 1 Title 1 Title 1</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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">KBS2</span>
                            <span class="program">미스 몬테크리스토</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">KBS2</span>
                            <span class="program">미스 몬테크리스토</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">KBS2</span>
                            <span class="program">미스 몬테크리스토</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">KBS2</span>
                            <span class="program">미스 몬테크리스토</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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</h3>
                                <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                <span class="source">스포츠동아</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>Title1</h4>
                        </a>
                    </div>
                    <div class="right">
                        <ul>
                            <li>
                                <a href="#">Title 1</a>
                                <span>스타뉴스</span>
                            </li>
                            <li>
                                <a href="#">Title 1 Title 1Title 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 1 Title 1Title 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 1 Title 1Title 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 1 Title 1Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1</a>
                                <span>스타뉴스</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</h4>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span>헤럴드 POP</span>
                                </div>

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

                        </a>
                    </li>
                    <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</h4>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span>헤럴드 POP</span>
                                </div>

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

                        </a>
                    </li>
                    <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</h4>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span>헤럴드 POP</span>
                                </div>

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

                        </a>
                    </li>
                    <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</h4>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span>헤럴드 POP</span>
                                </div>

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

                        </a>
                    </li>
                    <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</h4>
                                    <p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
                                    <span>헤럴드 POP</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">SW시선</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">SW시선</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">SW시선</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>
</html>

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;
}

.end-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 li {
	font-weight: 700;
	font-size: 16px;

	padding: 0 15px;
}

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

	padding-bottom: 2px;
}

#ent-header .ent-header-center 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;
}

#ent-main {
	padding-bottom: 1000px;
}

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

#ent-main .ent-left {
	float: left;
	width: 654px;
	
	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: 12px;
	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 img {
	width: 200px;
	height: 122px;
	border: solid 1px #000000;

	margin-bottom: 15px;
}

#ent-main .ent-left #ent-section-2 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, 0.3);
	
	padding: 9px 10px 8px;

	left: 0;
	bottom: 0;

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

#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 .ent-info {
	width: 528px;
}

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

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

	margin-bottom: 9px;
}

#ent-main .ent-left #ent-section-4 .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 img {
	width: 55px;
	height: 55px;
	border-radius: 50%;

	margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-5 li 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 a {
	display: inline-block;
	max-width: 353px;
	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 span {
	vertical-align: top;

	font-size: 11px;
	color: #898989;
}

#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 .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-txt{
	width: 486px;	
}

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

#ent-main .ent-left #ent-section-8 .news-lists .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-txt span {
	font-size: 11px;
	color: #898989;
}

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

#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 a {
    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 a {
	display: block;
}

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

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

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

#ent-main .ent-left #ent-section-9 li .program {
	color: #ff0080
}

#ent-main .ent-left #ent-section-9 li .program:after {
	content: '';
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #d3d3d3;
    vertical-align: top;
    margin: 12px 1px 0 6px;
}

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

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

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

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

	padding-left: 24px;
}

어려운점

section 별 표기 각 position 별 지정값
코드가 너무 길어져서 헷갈림

해결방법

따로 학습자료를 찾아봄
복습

학습소감

카피캣 사이트를 따라가다가 코드가 길어지다 보니 제대로 하고 있는 것인지 여전히 의문이지만 끝까지 따라가도록 함

이채환

Please be wonderful but don't be so serious, enjoy this journey with the good people!

[dg_ai_school] 웹프로그래밍 27

webprogramming

학습내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 26

[dg_ai_school] 웹프로그래밍 28

0개의 댓글

관련 채용 정보