[dg_ai_school] 웹프로그래밍 24

이채환·2021년 7월 29일

webprogramming

목록 보기

24/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">
				<h2>sdad</h2>
			</div>

			<div class="news-right">
				<h2>dsadss</h2>
			</div>

		</div>
	</main>

</body>
</html>

CSS

/* 뉴스 메인 */

.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-right {
	float: right;
	width: 327px;
	border-left: solid 1px #dfdfdf;
	padding: 25px 0 40px 26px;
}

어려운점

따라가는 것은 어렵지 않으나, 세세한 개념이 100% 이해가 되지 않아 헷갈림
코드가 길어져서 헷갈림
각종 태그들의 사용법을 보면 이해가 되는 것 같다가도 잘 모르겠음

해결방법

복습을 함
책을 보고 따로 연습해봐도 잘 안되서 답답하지만 그래도 복습하거나 찾아봄

학습소감

html과 css를 활용해서 구조를 짜고 살을 덧붙이는 작업을 하는 것은 맞지만 과연 내가 제대로 아는 것인가에 대해 생각해보면 의문점 투성이라 불안함

이채환

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

[dg_ai_school] 웹프로그래밍 24

webprogramming

학습내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 23

[dg_ai_school] 웹프로그래밍 25

0개의 댓글

관련 채용 정보