16(2021.07.19)

쩜·2021년 7월 19일
0

AI school

목록 보기
16/49

9강 네이버 메인 (전체)

학습 내용
네이버 카피캣

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>네이버</title>
</head>
<body>

	<header id="main-header">
		<div class="search_area">

			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>

		</div>



		<div id="navbar">
			<div class="container">
				
				<ul>
					<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>
	</header>





	<textarea></textarea>

</body>
</html>

css

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}


.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}






#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	position: relative;
	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;

	display: flex;
	justify-content: center;
	align-items: center;
}

#main-header .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;

	font-size: 22px;
	border: none;
}

#main-header .search_wrap input:focus {
	outline: none;
}

#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

예시

textarea:focus {
	outline: none;
}

클릭 했을 때 테두리 변경되지 않음

css

#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main-header #navbar ul {
	padding: 11px 0;
}

#main-header #navbar ul li {
	display: inline-block;
	margin-right: 5px;
}

css

#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}

html

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

		<div id="main-right">
			
		</div>
	</main>

css

main {
	overflow: hidden;
}

main #main-left {
	float: left;
	width: 750px;
	height: 2000px;
	background-color: yellow;
}

main #main-right {
	float: right;
	width: 350px;
	height: 2000px;
	background-color: pink;
}

전체 코드
html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>네이버</title>
</head>
<body>

	<header id="main-header">
		<div class="search_area">

			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>

		</div>



		<div id="navbar">
			<div class="container">
				
				<ul>
					<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>
	</header>


	<main role="main" class="container">
		<div id="main_left">
			
			<div id="banner_wrap"></div>

			<div id="news_wrap">
				
				<div class="news_header">
					<h2>뉴스스탠드</h2>
					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
						
					</div>
				</div>

				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholer.com/45x20">
					</li>
					
				</ul>
			</div>


			<div id="blog_wrap">
				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>
					<div class="right_header">
						<span class="count"><strong>1,853</strong>개의 글</span>
						<span>관심주제 설정</span>
					</div>
				</div>

				<nav class="blog_nav">
					<ul>
						<li>
							<a href="#">엔터1</a>
							<a href="#">엔터2</a>
							<a href="#">엔터3</a>
							<a href="#">엔터4</a>
							<a href="#">엔터5</a>
							<a href="#">엔터6</a>
							<a href="#">엔터7</a>
							<a href="#">엔터8</a>
						</li>
					</ul>
					
				</nav>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고
								</p>

								<div class="date-wrap">
									<span>뉴스ㅇ</span>
									<span>4일전</span>
								</div>
									
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고
								</p>

								<div class="date-wrap">
									<span>뉴스ㅇ</span>
									<span>4일전</span>
								</div>
									
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고
								</p>

								<div class="date-wrap">
									<span>뉴스ㅇ</span>
									<span>4일전</span>
								</div>
									
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">

								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고 복잡한 도시를 떠나 어쩌고 저쩌고
								</p>

								<div class="date-wrap">
									<span>뉴스ㅇ</span>
									<span>4일전</span>
								</div>
									
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>

		<div id="main_right">
			
		</div>
	</main>






















</body>
</html>

css

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}


.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}






#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	position: relative;
	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;

	display: flex;
	justify-content: center;
	align-items: center;
}

#main-header .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;

	font-size: 22px;
	border: none;
}

#main-header .search_wrap input:focus {
	outline: none;
}

#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main-header #navbar ul {
	padding: 11px 0;
}

#main-header #navbar ul li {
	display: inline-block;
	margin-right: 5px;
}

#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}


main {
	overflow: hidden;
}

main #main_left {
	float: left;
	width: 750px;
	height: 2000px;
	background-color: yellow;
}

main #main_right {
	float: right;
	width: 350px;
	height: 2000px;
	background-color: pink;
}

main #banner_wrap {
	width: 750px;
	height: 135px;
	background-color: #000000;

	margin-bottom: 12px;
}

main #news_wrap .news_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 22px 0 16px 0;
}

main #news_wrap .news_header h2 {
	font-size: 14px;
	font-weight: 700px;
}

main #news_btn_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 60px;
}

main #news_wrap .news_header .news_btn_wrap button {
	width: 15px;
	height: 15px;
	background-color: blue;
}

main #news_wrap .news_lists {
	overflow: hidden;
	border: solid 1px #dae1e6;
}

main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;

	text-align: center;
}

main #news_wrap .news_lists . news_list:nth-child(6n) {
	border-right: none;
}

main #news_wrap .news_lists . news_list:nth-child(19),
main #news_wrap .news_lists . news_list:nth-child(20),
main #news_wrap .news_lists . news_list:nth-child(21),
main #news_wrap .news_lists . news_list:nth-child(22),
main #news_wrap .news_lists . news_list:nth-child(23),
main #news_wrap .news_lists . news_list:nth-child(24) {
	border-bottom: none;
}

main #news_wrap .news_lists .news_list img {
	position: relative;

	top: 50%;
	transform: translateY(-50);
}

main #blog_wrap {
	padding-top: 35px;
}

main #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 17px;
}

main #blog_wrap .blog_header .left_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main #blog_wrap .blog_header .left_header h3 {
	font-size: 14px;
	margin-right: 8px;
}

main #blog_wrap .blog_header .left_header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

main #blog_wrap .blog_header .right_header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right_header .count strong {
	color: #000000;
}

main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;
}

main #blog_wrap .blog_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;

	line-height: 49px;
	text-align: center;
}

main #blog_wrap .blog_list_wrap {
	padding-top: 18px;
	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
	margin-bottom: 18px;
}

main #blog_wrap .blog_list_wrap li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
	width: 170px;
	height: 114px;
	margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
	width: 559px;
	padding-left: 47px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {
	font-size: 12px;
	color: #35ae5e;
}

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {
	color: #505050;
}

main #blog_wrap .blog_media_wrap li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_wrap {
	padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_wrap {
	font-size: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_wrap {
	font-size: 12px;
}

어려웠던 점과 해결 방법
하나를 설정하는 것은 어렵지 않았는데 여러 개로 항목이 늘어나니까 어렵게 느껴지는 것 같다. 설정해야 할 부분들이 많아서 까먹을 수도 있을거란 생각이 들었는데 강사님이 알려주신대로 미리 설정해야하는 것들 목록을 넣어놓으면 빠트리지 않고 다 할 수 있을 것 같다는 생각이 들었다.

학습 소감
새로 배우는 내용도 한두가지씩 있었고 결과물은 단순한데 만드는 과정은 너무 복잡하다고 느꼈다. 화면을 보는데 창을 너무 자주 옮기셔서 집중이 잘 되지 않았다. 참고 사이트에서 코드를 복사해서 쓰는 경우가 많은데 다양한 사이트가 존재하는 것 같다.

profile
쩜
이전 포스트

15(2021.07.16)

다음 포스트

17(0720)

0개의 댓글

관련 채용 정보

Powered by GraphCDN, the GraphQL CDN