[dg_ai_school] 웹프로그래밍 25

이채환·2021년 7월 30일

webprogramming

목록 보기

25/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="news-header">

		<div class="news-container">
			<div class="news-flex-between">
				<nav class="news-header-left">
					<ul class="news-flex-start">
						<li class="on"><a href="#">뉴스</a></li>
						<li><a href="ent.html">TV연예</a></li>
						<li><a href="#">스포츠</a></li>
						<li><a href="#">뉴스스탠드</a></li>
						<li><a href="#">날씨</a></li>
					</ul>
				</nav>

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

		<nav class="sub-nav">
			<div class="news-container">
				<div class="news-flex-between">
					<ul class="news-flex-start">
						<li><a href="#" class="on">뉴스홈</a></li>
						<li><a href="#">속보</a></li>
						<li><a href="#">정치</a></li>
						<li><a href="#">경제</a></li>
					</ul>

					<div class="news-search-wrap news-flex-between">
						<input type="text" placeholder="뉴스 검색">
						<button type="button" class="btn-search"></button>
					</div>
				</div>
			</div>
		</nav>
	</header>

	<div id="news-headline">
		<div class="news-container">
			<div class="news-headline-menu-wrap news-flex-between">
				<ul class="main-lists news-flex-start">
					<li><a href="#">신문 헤드라인</a></li>
					<li><a href="#">저녁 방송 뉴스</a></li>
				</ul>

				<ul class="sub-lists news-flex-end">
					<li><a href="#">팩트체크</a></li>
					<li><a href="#">언론사 구독</a></li>
					<li><a href="#">언론사 뉴스</a></li>
					<li><a href="#">라이브러리</a></li>
				</ul>
			</div>

			<ul class="news-headline-lists news-flex-between">
				<li>
					<a href="#">
						<article>
							<h3>TV조선 뉴스9</h3>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/150">
								<div class="overlay">
									<div class="headline-info news-flex-start">
										<i></i>
										<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
										</div>
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">
						<article>
							<h3>TV조선 뉴스9</h3>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/150">
								<div class="overlay">
									<div class="headline-info news-flex-start">
										<i></i>
										<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
										</div>
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">
						<article>
							<h3>TV조선 뉴스9</h3>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/150">
								<div class="overlay">
									<div class="headline-info news-flex-start">
										<i></i>
										<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
										</div>
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">
						<article>
							<h3>TV조선 뉴스9</h3>

							<div class="image-wrap">
								<img src="https://via.placeholder.com/150">
								<div class="overlay">
									<div class="headline-info news-flex-start">
										<i></i>
										<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
										</div>
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
			</ul>



			<div class="news-headline-arrows news-flex-end">
				<div class="btn-wrap news-flex-start">
					<a href="#" class="btn btn-prev"></a>
					<a href="#" class="btn btn-next"></a>
				</div>
				<a href="#" class="btn btn-up"></a>
			</div>

		</div>
	</div>


	<main role="main" id="news-main">
		<div class="news-container">
			
			<div class="news-left">

				<div class="news-main-wrap news-custome">

					<div class="news-main-header news-flex-between">

						<div class="news-main-header-left news-flex-start">
							<h3><a href="#">헤드라인 뉴스</a></h3>
							<ul class="news-flex-start">
								<li><a href="#">헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다.</a></li>
							</ul>
						</div>

						<div class="news-main-header-right news-flex-end">
							<i class="icon-1"></i>
							<i class="icon-2"></i>
							<i class="icon-3"></i>
						</div>

					</div>

					<div class="news-main-body news-flex-start">
						
						<div class="image-wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news-lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><i></i></li>
							<li><a href="#">title 2</a><i></i></li>
							<li><a href="#">title 3 title 3 title 3</a><i></i></li>
							<li><a href="#">title 3 title 3</a><i></i></li>
							<li><a href="#">title 3</a><i></i></li>
						</ul>

					</div>
				</div>

				<div class="news-main-wrap">

					<div class="news-main-header news-flex-between">

						<div class="news-main-header-left news-flex-start">
							<h3><a href="#">정치</a></h3>
							<ul class="news-flex-start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회/정당</a></li>
								<li><a href="#">청화대</a></li>
							</ul>
						</div>

						<div class="news-main-header-right news-flex-end">
							<i class="icon-1"></i>
							<i class="icon-2"></i>
							<i class="icon-3"></i>
						</div>

					</div>

					<div class="news-main-body news-flex-start">

						<div class="image-wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news-lists">
							<li><a href="#">title 1 title 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 2</a><span>한겨레</span></li>
							<li><a href="#">title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 3</a><span>중앙일보</span></li>
							<li><a href="#">title 3</a><span>부산일보</span></li>
						</ul>

					</div>
				</div>
				<div class="news-main-wrap">

					<div class="news-main-header news-flex-between">

						<div class="news-main-header-left news-flex-start">
							<h3><a href="#">정치</a></h3>
							<ul class="news-flex-start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회/정당</a></li>
								<li><a href="#">청화대</a></li>
							</ul>
						</div>

						<div class="news-main-header-right news-flex-end">
							<i class="icon-1"></i>
							<i class="icon-2"></i>
							<i class="icon-3"></i>
						</div>

					</div>

					<div class="news-main-body news-flex-start">
						
						<div class="image-wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news-lists">
							<li><a href="#">title 1 title 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 2</a><span>한겨레</span></li>
							<li><a href="#">title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 3</a><span>중앙일보</span></li>
							<li><a href="#">title 3</a><span>부산일보</span></li>
						</ul>

					</div>
				</div>
				<div class="news-main-wrap">

					<div class="news-main-header news-flex-between">

						<div class="news-main-header-left news-flex-start">
							<h3><a href="#">정치</a></h3>
							<ul class="news-flex-start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회/정당</a></li>
								<li><a href="#">청화대</a></li>
							</ul>
						</div>

						<div class="news-main-header-right news-flex-end">
							<i class="icon-1"></i>
							<i class="icon-2"></i>
							<i class="icon-3"></i>
						</div>

					</div>

					<div class="news-main-body news-flex-start">
						
						<div class="image-wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news-lists">
							<li><a href="#">title 1 title 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 2</a><span>한겨레</span></li>
							<li><a href="#">title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 3</a><span>중앙일보</span></li>
							<li><a href="#">title 3</a><span>부산일보</span></li>
						</ul>

					</div>
				</div>
				<div class="news-main-wrap">

					<div class="news-main-header news-flex-between">

						<div class="news-main-header-left news-flex-start">
							<h3><a href="#">세계</a></h3>
						</div>

						<div class="news-main-header-right news-flex-end">
							<i class="icon-1"></i>
							<i class="icon-2"></i>
							<i class="icon-3"></i>
						</div>

					</div>

					<div class="news-main-body news-flex-start">
						
						<div class="image-wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news-lists">
							<li><a href="#">title 1 title 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 2</a><span>한겨레</span></li>
							<li><a href="#">title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 3</a><span>중앙일보</span></li>
							<li><a href="#">title 3</a><span>부산일보</span></li>
						</ul>

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


			<div class="news-right">

				<div id="news-popular">
					
					<div class="news-popular-header news-flex-between">
						<div>
							<h3>언론사별 가장 많이 본 뉴스</h3>
							<p>오후 11시 ~ 오전 12시까지 집계한 결과입니다.</p>
						</div>
						<span>더보기</span>
					</div>

					<ul class="news-popular-lists">
						
						<li class="news-flex-between">
							<div class="news-popular-info">
								<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>
						<li class="news-flex-between">
							<div class="news-popular-info">
								<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>
						<li class="news-flex-between">
							<div class="news-popular-info">
								<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>
						<li class="news-flex-between">
							<div class="news-popular-info">
								<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>
						<li class="news-flex-between">
							<div class="news-popular-info">
								<h4><a href="#">무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다. 무죄가 뒤집혀졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

					</ul>

				</div>

				<div class="news-banner"></div>

				<div id="news-today">
					
					<div class="news-today-header news-flex-start">
						<h3>TODAY</h3>
						<span>05.21 (금)</span>
					</div>

					<div class="news-today-body">
						<ul class="news-notice-lists">
							<li>
								<h4>공지</h4>
								<p>뉴스홈 헤드라인 비로그인 추천 변경</p>
							</li>
							<li>
								<h4>날씨</h4>
								<p>실시간 기상 정보 확인하기</p>
							</li>
							<li>
								<h4>운세</h4>
								<p>오늘의 띠별 운세 확인하기</p>
							</li>
						</ul>


						<div class="news-stock-wrap">
							<ul class="news-stock-lists news-flex-between">
								<li>
									<span>코스피</span>
									<h3>3,162.28</h3>
									<em class="down">10.77</em>	
								</li>
								<li>
									<span>코스닥</span>
									<h3>971.13</h3>
									<em class="up">2.03</em>
								</li>	
							</ul>

							<div class="news-stock-search-wrap news-flex-between">
								<input type="" placeholder="종목 검색">
								<button type="button" class="btn-search"></button>
							</div>
						</div>
					</div>	
				</div>
			</div>

		</div>
	</main>

	<div id="news-nav-bottom">
		<div class="news-container news-flex-between">
			<ul class="news-flex-start">
				<li><a href="#">언론사 목록</a></li>
				<li><a href="#">분야별 목록</a></li>
			</ul>

			<a href="#">마이스크랩</a>
		</div>
	</div>

</body>
</html>

CSS

/* blog_detail.css */

.blog-border {
	border: 1px solid #eaeaec;
}

.blog-main-detail {
	padding-top: 0;
	padding-bottom: 100px;
}

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

	color: #ffffff;
}

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

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

.blog-main-detail #program-nav {
	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 {
	font-size: 14px;
	color: #666;
}

.blog-main-detail #program-nav h4 {
	font-weight: 600;
}

.blog-main-detail #program-nav h4 a {
	color: #000;
}

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

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

	vertical-align: -1px;
}

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

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

.blog-main-detail #program-info .program-info-wrap h4 {
	font-size: 32px;
	color: #7d55c8;
	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: -1px;
}

.blog-main-detail #program-info .program-msg-box a {
	display: block;
	width: 179px;
	height: 40px;
	background-color: #7d55c8;
	color: #ffffff;
	line-height: 44px;
	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-title-wrap .date {
    color: #693bbc;
    font-size: 16px;
}

.blog-main-detail #program-day .program-day-title-wrap {
	padding: 36px 0 16px;
}

.blog-main-detail #program-day .program-day-title-wrap .txt {
	font-size: 16px;
}

.blog-main-detail #program-day .program-day-title-wrap .txt:before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 18px;
	background-color: #d5d5d5;

	margin: 0 9px;

	vertical-align: -4px;
}

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

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

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

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

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

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

/* 뉴스 메인 */

.news-container {
	width: 1080px;
	margin: 0 auto;
}

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

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

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


#news-header {
	background-color: #3f63bf;
}

#news-header .news-header-left {
	padding-top: 17px;
	padding-bottom: 17px;
}

#news-header .news-header-left ul li {
	font-size: 15px;
}

#news-header .news-header-left ul li.on {
	font-size: 20px;
}

#news-header .news-header-left ul li a {
	color: #ffffff;
}

#news-header .news-header-left ul li a:before {
	display: inline-block;
	content: '';
	width: 1px;
	height: 15px;
	background-color: #000;
	opacity: 0.2;
	
	margin: 0 10px;
	vertical-align: -1px;
}

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

#news-header .news-header-right .btn-login {
	display: block;
	width: 55px;
	height: 25px;
	border: solid 1px #000000;

	line-height: 25px;
	text-align: center;

	color: #ffffff;

	font-size: 12px;

	margin-right: 20px;
}

#news-header .news-header-right .btn-menu {
	width: 55px;
	height: 55px;
	background-color: #3f63bf;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
}

#news-header .sub-nav {
	background-color: #ffffff;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #e3e3e3;
}

#news-header .sub-nav ul li {
	width: auto;
	height: 46px;
	margin-right: 16px;
}

#news-header .sub-nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	border-bottom: solid 2px transparent;

	font-weight: bold;

	line-height: 46px;
}

#news-header .sub-nav ul li a.on {
	border-bottom: solid 2px #3f63bf;
	color: #3f63bf;
}

#news-header .sub-nav .news-search-wrap {
	width: 280px;
	height: 30px;
	border: solid 1px #e1e1e1;
	background-color: #fafafa;
}

#news-header .sub-nav .news-search-wrap input {
	width: calc(100% - 30px);
	height: 100%;
	border: none;

	font-size: 12px;
	color: #888888;
	padding: 3px 9px;
}

#news-header .sub-nav .news-search-wrap .btn-search{
	width: 30px;
	height: 100%;
	background-color: blue;	
}

#news-header .sub-nav .news-search-wrap input:focus {
	outline: none;
}

#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 a:before {
	content: '';
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: #e0e0e0;
	margin: 0 5px;

	vertical-align: -1px;
}

#news-headline .news-headline-menu-wrap .sub-lists li:first-child a:before {
	content: none;
}	

#news-headline .news-headline-lists {
	margin-bottom: 12px;
}

#news-headline .news-headline-lists li {
	width: 255px;
	height: 178px;
	border: solid 1px #ccc;
}

#news-headline .news-headline-lists li a {
	display: block;
	width: 100%;
	height: 100%;
}

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

#news-headline .news-headline-lists li a article h3 {
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
}

#news-headline .news-headline-lists li a article .image-wrap {
	position: relative;
	width: 100%;
	height: 132px;
}

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

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

#news-headline .news-headline-lists li a article .image-wrap .overlay .headline-info {
	position: absolute;
	width: 100%;
	padding: 15px 20px;

	left: 0;
	bottom: 0;

	color: #ffffff;
}

#news-headline .news-headline-lists .headline-info i {
	display: block;
	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;
}

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

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

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

#news-headline .news-headline-arrows .btn {
	display: block;
	width: 24px;
	height: 24px;
	border: solid 1px #dcdddc;
}

#news-headline .news-headline-arrows .btn-wrap {
	margin-right: 15px;
}

#news-headline .news-headline-arrows .btn.btn-prev {
	background-color: yellow;
	border-right: none;
}

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

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

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

#news-main .news-left {
	float: left;
	width: 750px;
	padding-right: 26px;
	padding-bottom: 100px;
}

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

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

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 {
	margin-right: 12px;
}

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

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

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

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left 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-wrap .news-main-header .news-main-header-left li:first-child a:before {
	content: none;
}

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

	margin-left: 8px;
}

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

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-2 {
	background-color: pink;	
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-3 {
	background-color: grey;
}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap {
	width: 220px;
	margin-right: 25px;
}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap img {
	width: 100%;
	height: 140px;
	border: solid 1px #000000;
	margin-bottom: 6px;
}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap h4 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists {
	width: 430px;
}

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

#news-main .news-left .news-main-wrap .news-main-body .news-lists li a {
	display: inline-block;
	max-width: 360px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	vertical-align: middle;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li span {
	font-size: 12px;
	color: #888888;

	vertical-align: middle;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li span:before {
	content: '';
	position: relative;
	display: inline-block;
	width: 14px;
	height: 11px;
	background-color: grey;

	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: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 .image-wrap {
	position: relative;
	width: 300px;
	height: 190px;
}

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

#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap h4 {
	text-overflow: initial;
	white-space: initial;

	position: absolute;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);


	padding: 10px 15px;

	left: 0;
	bottom: 0;

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

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

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

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li i {
	display: inline-block;
	width: 22px;
	height: 16px;
	background-color: black;

	vertical-align: middle;
}

#news-main .news-right {
	float: right;
	width: 327px;
	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 {
	align-items: flex-start;
	margin-bottom: 10px;
}

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

#news-main .news-right #news-popular .news-popular-header 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: 6px;
}

#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 i {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: grey;
	border-radius: 50%;

	vertical-align: middle;
	margin-right: 5px;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span {
	/*position: relative;*/

	font-size: 12px;
	color: #888888;

	vertical-align: middle;

	/* top: 2px; */ 
}

#news-main .news-right .news-banner {
	width: 300px;
	height: 250px;
	background-color: #000000;
	border: solid 1px #e3e3e3;

	margin-bottom: 30px;
}

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

#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 {
	padding: 13px 20px 20px;
    border: 1px solid #e8e8e8;
}

#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;
	font-size: 12px;
	vertical-align: middle;
	margin-right: 8px;
}

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

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

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

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

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

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

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

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

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

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

#news-main .news-right #news-today .news-today-body .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 .news-today-body .news-stock-search-wrap input:focus {
	outline: none;
}

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

#news-nav-bottom {
	border-top: solid 1px #dfdfdf;
	border-bottom: solid 1px #e3e7ee;

	padding: 15px 0;
}

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

어려운점

vertical-align 태그의 활용
각종 border 의 위치가 잘 생각이 안남
div 태그나 position의 상세한 설정이 생각이 안남

해결방법

복습 및 따로 인터넷의 자료를 참고
https://developer.mozilla.org/ko/docs/Web/CSS/align-content 와 같은 사이트에서 align 에 대해 좀 더 학습해 봄
앞의 카피캣 실습강의 말고 기초적인 부분을 다시 돌려봄

학습소감

카피캣처럼 다른 사이트들을 활용한 실습을 하다보니 이해되는 것들도 많지만 아무생각 없이 코드만 적고 있는 것 같기도해서 좀 더 좋은 방법을 생각하며 학습해야겠다고 생각함. 그리고 추가적으로 각 태그들의 위치를 나타내주는 상세한 부분을 들여다 볼 필요가 있다고 생각함. 무엇보다 복습을 하는 것이 가장 중요한 것 같다.

이채환

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

[dg_ai_school] 웹프로그래밍 25

webprogramming

학습내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 24

[dg_ai_school] 웹프로그래밍 26

0개의 댓글