[dg_ai_school] 웹프로그래밍 23

이채환·2021년 7월 28일

학습내용

어려운점

해결방법

학습소감

webprogramming

목록 보기

23/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="blog-header">
		<div class="blog-header-top">

			<div class="blog-container">

				<div class="blog-header-left">
					<h2><a href="#">블로그</a></h2>

					<div class="blog-header-input-wrap">
						<div class="blog-search-wrap">
							<input type="text">
							<button type="button" class="btn-search"></button>
						</div>
						<button class="btn-total-search">통합 검색</button>
					</div>
				</div>

				<div class="blog-header-right">
					<a href="#" class="btn-login">로그인</a>
					<button type="button" class="btn-menu"></button>
				</div>	
			</div>
		</div>

		<div class="blog-header-nav">
			<div class="blog-container">
				<nav class="nav-left">
					<ul>
						<li class="on"><a href="#">블로그 홈</a></li>
						<li><a href="#">주제별 보기</a></li>
						<li><a href="#">이달의 블로그</a></li>
						<li><a href="#">공식 블로그</a></li>
						<li><a href="#">첼린지 프로그램</a></li>
					</ul>
				</nav>

				<nav class="nav-right">
					<ul>
						<li class="on"><a href="#">블로그 마켓 가입</a></li>
						<li><a href="#">아이템 팩토리</a></li>
						<li><a href="#">블로그팀 공식블로그</a></li>
					</ul>
				</nav>
			</div>
		</div>
	</header>

	<main role="main" class="blog-main">
		
		<div id="hot-topic">
			<div class="blog-container">
				<div class="hot-topic-left">
					<div class="topic-heading">
						<h3>핫토픽</h3>
						<i></i>
						<a href="#">다꾸를 해요</a>
					</div>

					<ul class="topic-lists">
						<li>
							<img src="https://via.placeholder.com/252x240">
							<p>동해물과 백두산이 마르고 닳도록</p>
						</li>
						<li>
							<img src="https://via.placeholder.com/252x240">
							<p>동해물과 백두산이 마르고 닳도록</p>
						</li>
						<li>
							<img src="https://via.placeholder.com/252x240">
							<p>동해물과 백두산이 마르고 닳도록</p>
						</li>
					</ul>

					<div class="pagination-wrap">
						<a href="#">1</a>
						<a href="#">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">5</a>
					</div>
				</div>

				<div class="hot-topic-right">
					<div class="topic-banner"></div>

					<div class="pagination-wrap">
						<a href="#">1</a>
						<a href="#">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">5</a>
					</div>
				</div>

			</div>
		</div>

		<div id="blog-main-content" class="blog-container">
			<div class="blog-main-left">

				<div id="blog-main-notification">
					<p>
						로그아웃 상태입니다.<br>
						로그인하여 이웃 새글을 확인해보세요.
					</p>
				</div>

				<div id="blog-article">
					
					<nav class="blog-article-nav">
						<ul>
							<li><a href="#">전체</a></li>
							<li><a href="#">음악</a></li>
							<li><a href="#">사진</a></li>
							<li><a href="#">취미</a></li>
						</ul>
					</nav>

					<ul class="blog-article-lists">
						<li>
							<a href="#">
								<div class="blog-article-info">
									<div class="blog-profile-wrap">
										<img src="https://via.placeholder.com/32x32">
										<div class="blog-profile-info">
											<h3>Jim</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
									동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                    동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                    동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>

									<div class="comments">
										<span>공감<em>46</em></span>
										<span>댓글<em>11</em></span>
									</div>
								</div>

								<img src="https://via.placeholder.com/167x167">
							</a>
						</li>

						<li>
							<a href="#">
								<div class="blog-article-info">
									<div class="blog-profile-wrap">
										<img src="https://via.placeholder.com/32x32">
										<div class="blog-profile-info">
											<h3>Jim</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>

									<div class="comments">
										<span>공감<em>46</em></span>
										<span>댓글<em>11</em></span>
									</div>
								</div>

								<img src="https://via.placeholder.com/167x167">
							</a>
						</li>
						<li>
							<a href="#">
								<div class="blog-article-info">
									<div class="blog-profile-wrap">
										<img src="https://via.placeholder.com/32x32">
										<div class="blog-profile-info">
											<h3>Jim</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>

									<div class="comments">
										<span>공감<em>46</em></span>
										<span>댓글<em>11</em></span>
									</div>
								</div>

								<img src="https://via.placeholder.com/167x167">
							</a>
						</li>
						<li>
							<a href="#">
								<div class="blog-article-info">
									<div class="blog-profile-wrap">
										<img src="https://via.placeholder.com/32x32">
										<div class="blog-profile-info">
											<h3>Jim</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
                                        동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>

									<div class="comments">
										<span>공감<em>46</em></span>
										<span>댓글<em>11</em></span>
									</div>
								</div>

								<img src="https://via.placeholder.com/167x167">

							</a>

						</li>

					</ul>

				</div>			
			</div>

			<div class="blog-main-right">

			</div>
		</div>
	</main>
<div class="blog-article-img-wrap">
                                <img src="https://via.placeholder.com/167" alt="">
                                <i></i>
                            </div>
                            
                        </a></li>
                        <li><a href="#">
                            <div class="blog-article-info">
                                <div class="blog-profile-wrap">
                                    <img src="https://via.placeholder.com/32" alt="">
                                    <div class="blog-profile-info">
                                        <h3>쥬쥬</h3>
                                        <p>9시간 전</p>
                                    </div>
                                </div>

                                <h2>NEW 일리윤 세라마이드 더마 스킨, 크림, 폼클렌폼 민감성 피부 사용후기 :)</h2>
                                <p class="paragraph">
                                    NEW 일리윤 세라마이드 더마 라인 3종 제품 보러가기
                                     > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')/ 민감피부에 진심인 
                                     일리윤이 만든 > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')
                                </p>

                                <div class="comments">
                                    <span>공감 <em>22</em></span>
                                    <span>댓글 <em>2</em></span>
                                </div>
                            </div>

                            <div class="blog-article-img-wrap">
                                <img src="https://via.placeholder.com/167" alt="">
                                <i></i>
                            </div>
                            
                        </a></li>
                        <li><a href="#">
                            <div class="blog-article-info">
                                <div class="blog-profile-wrap">
                                    <img src="https://via.placeholder.com/32" alt="">
                                    <div class="blog-profile-info">
                                        <h3>쥬쥬</h3>
                                        <p>9시간 전</p>
                                    </div>
                                </div>

                                <h2>NEW 일리윤 세라마이드 더마 스킨, 크림, 폼클렌폼 민감성 피부 사용후기 :)</h2>
                                <p class="paragraph">
                                    NEW 일리윤 세라마이드 더마 라인 3종 제품 보러가기
                                     > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')/ 민감피부에 진심인 
                                     일리윤이 만든 > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')
                                </p>

                                <div class="comments">
                                    <span>공감 <em>22</em></span>
                                    <span>댓글 <em>2</em></span>
                                </div>
                            </div>

                            <div class="blog-article-img-wrap">
                                <img src="https://via.placeholder.com/167" alt="">
                                <i></i>
                            </div>
                            
                        </a></li>
                        <li><a href="#">
                            <div class="blog-article-info">
                                <div class="blog-profile-wrap">
                                    <img src="https://via.placeholder.com/32" alt="">
                                    <div class="blog-profile-info">
                                        <h3>쥬쥬</h3>
                                        <p>9시간 전</p>
                                    </div>
                                </div>

                                <h2>NEW 일리윤 세라마이드 더마 스킨, 크림, 폼클렌폼 민감성 피부 사용후기 :)</h2>
                                <p class="paragraph">
                                    NEW 일리윤 세라마이드 더마 라인 3종 제품 보러가기
                                     > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')/ 민감피부에 진심인 
                                     일리윤이 만든 > - 안녕하세요 뷰스타 쥬쥬예요 :D 아모레퍼시픽과 콜라보한 네이버스토어에 
                                     따끈한 신제품 소식이 있어서 전달하러 왔습니다 'ㅅ')
                                </p>

                                <div class="comments">
                                    <span>공감 <em>22</em></span>
                                    <span>댓글 <em>2</em></span>
                                </div>
                            </div>

                            <div class="blog-article-img-wrap">
                                <img src="https://via.placeholder.com/167" alt="">
                                <i></i>
                            </div>
                            
                        </a></li>

                    </ul>
                    </div>
                
                </div>

            </div>
            <div class="blog-main-right">
                <div id="blog-account">
                    <p>네이버를 더 안전하고 편안하게 이용하세요</p>
                    <a href="#">로그인</a>
                    <div class="account-sub">
                        <div class="left">
                            <span>아이디 찾기</span>
                            <!-- em 태그로 중간 바 넣어줌 -->
                            <em></em>
                            <span>비밀번호 찾기</span>
                        </div>
                        <span>회원가입</span>
                    </div>
                </div>

                <div id="blog-banner"></div>

                <div class="blog-guide">
                    <a href="#">
                        <p>온라인 셀러를 위한<br>
                        <span>블로그 마켓 가입</span></p>
                        <i></i>
                    </a>
                </div>
                <div class="blog-guide">
                    <a href="#">
                        <p>꼭 한번 확인해야 할<br>
                        <span>블로그 가이드</span></p>
                        <i></i>
                    </a>
                </div>
                <div class="blog-guide">
                    <a href="#">
                        <p>누구보다 발빠르게<br>
                        <span>블로그 새소식</span></p>
                        <i></i>
                    </a>
                </div>

                <div id="blog-notice">
                    <div class="blog-notice-heading">
                        <a href="#">
                            <h3>공지사항</h3>
                            <i></i>
                        </a>
                    </div>
                    <ul class="blog-notice-lists">
                        <li class="ellipsis"><a href="#">[안내] 07.28일 모바일웹 스마트에디터3.0 본문</a></li>
                        <li class="ellipsis"><a href="#">[안내] PC 블로그 홈에서 쪽지 보내기 기능이 종료</a></li>
                        <li class="ellipsis"><a href="#">[17일] 블로그 DB 점검 안내</a></li>
                    </ul>
                    
                </div>
                <div id="blog-helper">
                    <!-- icon넣으면서 background-size 사용하기 -->
                    <ul class="blog-helper-lists">
                        <li><a href="#">블로그 앱 간편설치</a></li>
                        <li><a href="#">개발 가이드</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>
        </div>

    </main>

    <footer id="blog-footer">
        <div class="blog-container">
            <ul>
                <li><a href="#">이용약관</a></li>
                <li><a href="#">블로그 서비스 운영정책</a></li>
                <li><a href="#">개인정보처리방침</a></li>
                <li><a href="#">책임의 한계와 법적고지</a></li>
            </ul>
            <p>Copyright © NAVER Corp. All Rights Reserved.</p>
        </div>
        
    </footer>
    
</body>

</html>

</body>
</html>

css

/* 블챌*/
.blog-border {
    border: solid 1px #eaeaec;
}

#blog-main-detail {
    padding-bottom: 100px;
}

#blog-main-detail #program {
    padding: 62px 0 50px;
    background-color: #634ea4;

    color: #ffffff;
}

#blog-main-detail #program h3 {
    margin-bottom: 10px;
    font-size: 48px;
    font-weight: 400;
}

#blog-main-detail #program p {
    font-size: 16px;
}

#blog-main-detail #program-nav {
    font-size: 14px;
    border-bottom: solid 1px #ebebeb;
    background-color: #ffffff;
    padding: 10px 0 ;
}

#blog-main-detail #program-nav .blog-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#blog-main-detail #program-nav a {
    color: #666;
}

#blog-main-detail #program-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#blog-main-detail #program-nav ul li.on a {
    color: #000;
    font-weight: 600;
}

#blog-main-detail #program-nav  ul li:hover a {
    text-decoration: underline;
}

#blog-main-detail #program-nav ul li a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #ababab;
    margin: 0 12px;
}

#blog-main-detail #program-nav ul li:first-child a::before {
    content: initial;
}

#blog-main-detail #program-info {
    background-color: #f8f8f9;
    padding: 44px 0 36px;
}

#blog-main-detail #program-info .program-info-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 50px;
}

#blog-main-detail #program-info .program-info-wrap h4 {
    color: #7d55c8;
    font-size: 32px;
    line-height: 44px;
    margin-right: 120px;
}

#blog-main-detail #program-info .program-info-wrap p {
    font-size: 18px;
    line-height: 28px;
    color: #262626;
    margin-bottom: 18px
}

#blog-main-detail #program-info .program-info-wrap a {
    font-size: 13px;
    color: #7d55c8;
}


#blog-main-detail #program-info .program-msg-box {
    padding: 29px;
    background-color: #ffffff;
}

#blog-main-detail #program-info .program-msg-box .from {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #7d55c8;
    margin-bottom: 6px;
}

#blog-main-detail #program-info .program-msg-box .program-msg-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

#blog-main-detail #program-info .program-msg-box p {
    width: 810px;
    font-size: 18px;
}

#blog-main-detail #program-info .program-msg-box .date {
    color: #693bbc;
}

#blog-main-detail #program-info .program-msg-box .txt::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #d5d5d5;
    margin: 0 9px;
    vertical-align: -3px;
}

#blog-main-detail #program-info .program-msg-box a {
    display: block;
    width: 179px;
    height: 40px;
    background-color: rgba(125, 85, 200, 1);

    font-size: 14px;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
}

#blog-main-detail #program-info .program-msg-box a:hover {
    background-color: rgba(125, 85, 200, 0.8);
}

#blog-main-detail #program-day {
    background-color: #ffffff;
}

#blog-main-detail #program-day .program-day-list .program-day-title-wrap {
    padding: 36px 0 16px;
    font-size: 16px;
    line-height: 16px;
}

#blog-main-detail #program-day .program-day-list .program-day-title-wrap .date {
    color: #693bbc;
}

#blog-main-detail #program-day .program-day-list .program-day-title-wrap .txt::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #d5d5d5;
    margin: 0 9px;
    vertical-align: -3px;
}

#blog-main-detail #program-day .program-day-list .program-day-title-wrap .msg {
    font-size: 14px;
    color: #666666;
    line-height: 14px;
}

#blog-main-detail #program-day .program-img-lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#blog-main-detail #program-day .program-img-lists li {
    width: 175px;
    height: 228px;
}

#blog-main-detail #program-day .program-img-lists li img {
    width: 100%;
    height: 130px;
    margin-bottom: 15px;
}

#blog-main-detail #program-day .program-img-lists li h4 {
    font-size: 14px;
    color: #333;
    margin: 0 15px 15px 15px;
}

#blog-main-detail #program-day .program-img-lists li span {
    font-size: 12px;
    color: #959595;
    margin: 0 15px 15px 15px;
}

#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 li {
    margin-right: 20px;
    font-size: 15px;
}

#news-headline .news-headline-menu-wrap .sub-lists li {
    font-size: 12px;
}

#news-headline .news-headline-menu-wrap .sub-lists li:hover a {
    text-decoration: underline;
}

#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: initial;
}

#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;
    text-align: center;
    line-height: 44px;
}

#news-headline .news-headline-lists li a article .img-wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 44px);
}

#news-headline .news-headline-lists li a article .img-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#news-headline .news-headline-lists li a article .img-wrap .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

#news-headline .news-headline-lists .img-wrap .overlay .headline-info {
    position: absolute;
    width: 100%;
    left:0;
    bottom:0;
    padding: 15px 20px;

    color: #ffffff;
}

#news-headline .news-headline-lists .img-wrap .overlay .headline-info i {
    display: inline-block;
    width: 26px;
    height: 26px;
    background-color: pink;
    border-radius: 50%;
    margin-right: 10px;
}

#news-headline .news-headline-lists .img-wrap .overlay .headline-info div {
    width: calc(100% - 38px);
}

#news-headline .news-headline-lists .img-wrap .overlay .headline-info span {
    font-size: 13px;
    font-weight: bold;
}

#news-headline .news-headline-lists .img-wrap .overlay .headline-info p {
    display: inline;
    font-size: 12px;
}

#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: purple;
    border-left: none;
}

#news-headline .news-headline-arrows .btn.btn-next {
    background-color: blue;
}

#news-headline .news-headline-arrows .btn.btn-up {
    background-color: cadetblue;
}

/* 뉴스 메인 */
#news-main .news-container {
    overflow: hidden;
}

#news-main .news-left {
    float: left;
    width: 750px;
    padding-right: 26px;
    padding-bottom: 100px;
    border-right: solid 1px #dfdfdf;
    /* background-color: cadetblue; */
}

#news-main .news-left .news-main-wrap {
    padding: 25px 0;
    border-bottom: solid 1px #dedede;
}

#news-main .news-left .news-main-wrap .news-main-header {
    margin-bottom: 14px;
}

#news-main .news-left .news-main-header .news-main-header-left h3 a {
    font-size: 20px;
    font-weight: bold;
    margin-right: 12px;
}

#news-main .news-left .news-main-header .news-main-header-left a {
    font-size: 13px;
}

#news-main .news-left .news-main-header .news-main-header-left ul {
    margin-top: -2px;
}

#news-main .news-left .news-main-header .news-main-header-left ul li a:hover {
    text-decoration: underline;
}

#news-main .news-left .news-main-header .news-main-header-left ul li a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #e5e5e5;
    margin: 0 8px;
    vertical-align: -1px;
}

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

#news-main .news-left .news-main-header .news-main-header-right i {
    width: 24px;
    height: 20px;
    display: block;
    margin-left: 8px;
}

#news-main .news-left .news-main-header .news-main-header-right i.icon-1 {
    background-color: yellow;
}

#news-main .news-left .news-main-header .news-main-header-right i.icon-2 {
    background-color: violet;
    cursor: pointer;
}

#news-main .news-left .news-main-header .news-main-header-right i.icon-3 {
    background-color: green;
    cursor:pointer;
}

#news-main .news-left .news-main-body .img-wrap {
    width: 220px;
    height: 100%;
    cursor: pointer;
}

#news-main .news-left .news-main-body .img-wrap img {
    width: 100%;
    height: 140px;
    margin-right: 25px;
    margin-bottom: 6px;
    border: solid 1px rgba(0, 0, 0, 0.1);
}

#news-main .news-left .news-main-body .img-wrap h4 {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -1px;
}

#news-main .news-left .news-main-body .img-wrap h4:hover {
    text-decoration: underline;
}

#news-main .news-left .news-main-body .news-lists {
    width: 470px;
    height: 100%;
    padding-left: 25px;
}

#news-main .news-left .news-main-body .news-lists li {
    margin-bottom: 11px;
}

#news-main .news-left .news-main-body .news-lists li a {
    max-width: 330px;
    font-size: 15px;
    vertical-align: middle;
}

#news-main .news-left .news-main-body .news-lists li a:hover {
    text-decoration: underline;
}

#news-main .news-left .news-main-body .news-lists li span {
    display: inline-block;
    font-size: 12px;
    color: #888888;
    vertical-align: middle;
}

#news-main .news-left .news-main-body .news-lists li span::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 14px;
    height: 11px;
    background-color: gray;
    margin: 0 4px;
    top: 1px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li a {
    cursor: default;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li a:hover {
    text-decoration: none;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li:first-child a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #e5e5e5;
    margin: 0 8px 0 0;
    vertical-align: -1px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap {
    position: relative;
    width: 300px;
    height: 190px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap h4 {
    position: absolute;
    width: 100%;
    max-height: 66px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 15px 10px;
    
    left: 0;
    bottom: 0;

    text-align: center;
    color: #fff;
}

/* 버튼 추가 */
#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap {
    position: absolute;
    right: 0;
    top: 0;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap i {
    width: 24px;
    height: 24px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap i.icon-1 {
    background-color: rosybrown;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .img-wrap .btn-wrap i.icon-2 {
    background-color: slateblue;
}

#news-main .news-left .news-main-wrap.news-custome .news-lists {
    width: 390px;
}

#news-main .news-left .news-main-wrap.news-custome .news-lists li a  {
    width: 340px;
    vertical-align: middle;
    max-width: initial;
}

#news-main .news-left .news-main-wrap.news-custome .news-lists li i {
    display: inline-block;
    width: 22px;
    height: 16px;
    background-color: springgreen;
    vertical-align: middle;
}

#news-main .news-right {
    float: right;
    width: 327px;
    /* background-color: salmon; */
    /* border-left: solid 1px #dfdfdf; */
    padding: 25px 0 40px 26px;
}

#news-main .news-right #news-popular {
    margin-bottom: 30px;
}

#news-main .news-right #news-popular .news-popular-header {
    margin-bottom: 10px;
    align-items: flex-start;
}

#news-main .news-right #news-popular .news-popular-header div h3 {
    font-size: 14px;
}

#news-main .news-right #news-popular .news-popular-header div p {
    font-size: 12px;
}

#news-main .news-right #news-popular .news-popular-header span {
    color: #7d7d7d;
    font-size: 14px;
    cursor: pointer;
}

#news-main .news-right #news-popular .news-popular-lists li {
    padding: 6px 0;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info {
    width: 202px;
    border-bottom: solid 1px #e3e3e3;
    padding-bottom: 8px;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4 {
    font-size: 13px;
    margin-bottom: 5px;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4:hover,
#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span:hover {
    text-decoration: underline;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: gray;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span {
    display: inline-block;
    font-size: 12px;
    color: #888888;
    vertical-align: middle;
    cursor: pointer;
}

#news-main .news-right .news-banner {
    width: 300px;
    height: 250px;
    background-color: royalblue;
    border: solid 1px #e3e3e3;
    margin-bottom: 30px;
    cursor: pointer;
}

#news-main .news-right #news-today .news-today-header {
    margin-bottom: 11px;
}

#news-main .news-right #news-today .news-today-header h3 {
    font-size: 14px;
    text-transform: uppercase;
}

#news-main .news-right #news-today .news-today-header span {
    font-size: 12px;
}

#news-main .news-right #news-today .news-today-header span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #e5e5e5;
    margin: 0 7px;
    vertical-align: -1px;
}

#news-main .news-right #news-today .news-today-body {
    border: solid 1px #e8e8e8;
    padding: 13px 20px 20px;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li {
    border-bottom: solid 1px #f2f2f2;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li:last-child {
    margin-bottom: 0;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li h4 {
    display: inline-block;
    margin-right: 8px;
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li p {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li h4:hover,
#news-main .news-right #news-today .news-today-body .news-notice-lists li p:hover {
    text-decoration: underline;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li:first-child h4:hover {
    text-decoration: none;
    cursor: initial;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists {
    padding: 10px 0 7px;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li {
    width: 50%;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li:last-child {
    border-left: solid 1px #f2f2f2;
    padding-left: 20px;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li a span {
    font-size: 12px;
    color: #777777;;
    margin-bottom: 8px;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li a h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li a em {
    font-style: normal;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li a em.down {
    color: #066fd1;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-lists li a em.up {
    color: #fe4638;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap {
    width: 100%;
    height: 30px;
    border: solid 1px #f2f2f2;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap input {
    width: calc(100% - 30px);
    height: 100%;
    background-color: #ffffff;
    border: none;
    padding: 3px 9px;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap input:focus {
    outline: none;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap .btn-search {
    width: 30px;
    height: 100%;
    background-color: #fafafa;
}

#news-main .news-right .news-today-body .news-stock-wrap .news-stock-search-wrap .btn-search::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(../img/search.png);
    background-repeat: no-repeat;
    background-size: 18px;
    margin: 3px 0 0 2px;
}

#news-nav-bottom {
    border-top: solid 1px #dfdfdf;
    border-bottom: solid 1px #e3e7ee;
    padding: 15px 0;
}

#news-nav-bottom li {
    margin-right: 10px;
}


/* shop-footer */
#news-footer {
    padding-bottom: 27px;
    text-align: center;
    background-color: #f2f4f7;
}

#news-footer .policy-wrap {
    padding-top: 27px;
    margin-bottom: 12px;
}

#news-footer .policy-wrap span {
    font-size: 12px;
}

#news-footer .policy-wrap span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #d7d7d7;
    vertical-align: -1px;
}

#news-footer .policy-wrap span:first-child:before {
    content: initial;
}

#news-footer p {
    font-size: 12px;
    color: #888;
    margin-bottom: 11px;
}

#news-footer p.copyright {
    color: #000000;
}

/* 뉴스 - 연예 페이지 */
.ent-container {
    width: 980px;
    margin: 0 auto;
}

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

.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-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;
    font-size: 16px;
}
#ent-header .ent-header-left ul li 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-left ul li:first-child a{
    color: #000000;
}

#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 {
    border-bottom: 2px solid #e2458f;
    color: #e2458f;
}


#ent-header .ent-header-right .btn-login {
    width: 45px;
    height: 20px;
    border: solid 1px rgba(0, 0, 0, 0.05);
    margin: 0 9px;

    font-size: 12px;
    color: #666;
    line-height: 20px;
    text-align: center;
}
#ent-header .ent-header-right .btn-menu {
    width: 16px;
    height: 16px;
    background-color: gray;
    margin: 0 9px;
}
#ent-header .ent-header-right .btn-search {
    width: 25px;
    height: 25px;
    background-color: indianred;
    margin-left: 9px;
}

어려운점

코드가 너무 길어짐
앞의 태그 속성이 헷갈림

해결방법

반복 학습 및 앞의 강의 책 참고

학습소감

실제로 투입되었을 때 스스로 작업을 할 수 있을지 두려워 복습을 더 해야겠다고 생각합니다

이채환

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

[dg_ai_school] 웹프로그래밍 23

webprogramming

학습내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 22

[dg_ai_school] 웹프로그래밍 24

0개의 댓글

관련 채용 정보