2021.06.07 (네이버 메인 1편)

학습한 내용

[유용한 크롬 확장 프로그램]
https://wpastra.com/chrome-developer-extensions/

[네이버 상단]

  • index.html부분
	<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="#">지식IN</a></li>
					<li><a href="#">쇼핑</a></li>
				</ul>
			</div>
		</div>
	</header>
  • style.css부분
/* 네이버 상단 */
#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8ed;
}

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

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

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

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

/* 글자 입력박스에 포커스가 갔을때 생기는 테두리를 제거 */
#main-header .search_area .search_wrap input:focus {
	outline: none;
}

#main-header .search_area .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 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.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
					<li class="news_list"><img src="https://via.placeholder.com/45x20"></li>
				</ul>
			</div>
main {
	overflow: hidden;
	padding-top: 20px;
}

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

main #news_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%);
}

  • 왼쪽 블로그 정보 부분
<!-- blog관련 정보부분 -->
			<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></li>
						<li><a href="#">엔터2</a></li>
						<li><a href="#">엔터3</a></li>
						<li><a href="#">엔터4</a></li>
						<li><a href="#">엔터5</a></li>
						<li><a href="#">엔터6</a></li>
						<li><a href="#">엔터7</a></li>
						<li><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>3일 전</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>3일 전</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>3일 전</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>3일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>				
				</div> 

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 {
	width: 12.5%;
	float: left;
	height: 49px;

	border-right: solid 1px #eae1e6;
}

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

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

  • 왼쪽 블로그 미디어 정보
				<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>
main #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px #dae1e6;
}

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

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

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

  • 왼쪽 부분 완료

학습내용 중 어려웠던 점

영역이 다양하고 많다보니 영역에 들어가야 하는 코드들이 다른곳에 들어가 있고 그런 경우가 조금씩 생겨서 찾는데 약간 어려움이 있었습니다.

해결방법

실습당시 css코드에 경로대로 id나 class를 전부 적는방식으로 하셔서 적용이 안되는 부분부터 선택자를 기준으로 차근차근 html코드에서 찾아가는 방식으로 해결했습니다.

학습소감

아주 완벽하진 않지만 유명사이트와 비슷한 형태로 만들어지고 거기에선 어떤 다양한 방식으로 코드를 작성했는지 볼 수 있어서 좋았습니다.

BOJ 10844 쉬운 계단 수
[TIL] Day43- React 상태관리(2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage