2021.07.27네이버블로그1

85004 단어 대구AI스쿨대구AI스쿨

오늘의 강의 내용

* 네이버 블로그 카피캣


카피캣 대상인 네이버 블로그


블로그 왼쪽면 카피캣 완료한 모습

<!-- blog.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>김인권</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>김인권</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>김인권</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>김인권</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>김인권</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>

</body>
</html>

<!-- style.css언어 -->
/* 네이버 블로그 */
.blog_container {
	width: 1080px;
	margin: 0 auto;
}

#blog_header .blog_header_top {
	height: 60px;
	background-color: #00c73c;
	border-bottom: solid 1px #51b036;
}

#blog_header .blog_header_top .blog_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_left {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_left h2 {
	font-size: 20px;
	margin-right: 20px;
}

#blog_header .blog_header_top .blog_header_left h2 a {
	color: #ffffff;
	font-weight: 700;
}

#blog_header .blog_header_top .blog_header_input_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#blog_header .blog_header_top .blog_search_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 325px;
	height: 40px;
	background-color: #ffffff;

	margin-right: 5px;
}

#blog_header .blog_header_top .blog_search_wrap input {
	width: calc(100% - 40px);
	height: 40px;
	background-color: #ffffff;
	border: solid 1px #4da733;

	padding: 0 15px;
}

#blog_header .blog_header_top .blog_search_wrap input:focus {
	outline: none;
}

#blog_header .blog_header_top .blog_search_wrap .btn_search {
	width: 40px;
	height: 40px;
	background-color: #28a93a;
	border: solid 1px #239e36;
}

#blog_header .blog_header_top .btn_total_search {
	width: auto;
	height: 40px;
	background-color: #28a93a;
	border: solid 1px #239e36;

	padding: 0 5px;

	line-height: 40px;
	color: #ffffff;
}


#blog_header .blog_header_top .blog_header_right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;	
}

#blog_header .blog_header_top .blog_header_right .btn_login {
	display: inline-block;
	border: solid 1px #239e36;

	padding: 2px 5px;
	margin-right: 20px;

	color: #ffffff;

	font-size: 12px;
}

#blog_header .blog_header_top .blog_header_right .btn_menu {
	width: 60px;
	height: 60px;
	background-color: #00c73c;
	border-left: solid 1px #239e36;
	border-right: solid 1px #239e36;

	cursor: pointer;
}


#blog_header .blog_header_nav {
	height: 40px;
	background-color: #ffffff;
	border-bottom: solid 1px #e5e5e5;
}

#blog_header .blog_header_nav .blog_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#blog_header .blog_header_nav .nav_left {
	
}

#blog_header .blog_header_nav .nav_left ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#blog_header .blog_header_nav .nav_left ul li {
	height: 40px;
	margin-right: 16px;
	border-bottom: solid 2px transparent;
}

#blog_header .blog_header_nav .nav_left ul li.on {
	border-bottom: solid 2px #00ab33;
}

#blog_header .blog_header_nav .nav_left li a {
	display: block;

	width: 100%;
	height: 100%;
	line-height: 40px;

	font-size: 13px;
}

#blog_header .blog_header_nav .nav_right {
	
}

#blog_header .blog_header_nav .nav_right ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

#blog_header .blog_header_nav .nav_right li {
	width: auto;
	height: 26px;

	margin-left: 8px;
}

#blog_header .blog_header_nav .nav_right li.on a {
	background-color: #00c73c;
	border: solid 1px rgba(0, 0, 0, 0.07);
	color: #ffffff;
}

#blog_header .blog_header_nav .nav_right li a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	border: solid 1px #cecece;

	line-height: 26px;
	padding: 0 10px;

	font-size: 13px;
}


.blog_main #hot_topic {
	height: 305px;
	background-color: #f5f5f6;
	padding: 20px 0 15px;
}

.blog_main #hot_topic .blog_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.blog_main #hot_topic .hot_topic_left {
	position: relative;
	width: 770px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin-bottom: 11px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading h3 {
	font-size: 16px;
	font-weight: 600;
	color: #e55e5e;
}

.blog_main #hot_topic .hot_topic_left .topic_heading i {
	display: block;
	width: 8px;
	height: 13px;
	background-color: gray;
	margin: 0 8px;
}

.blog_main #hot_topic .hot_topic_left .topic_heading a {
	font-size: 16px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.blog_main #hot_topic .hot_topic_left .topic_lists li {
	position: relative;
	width: 252px;
	height: 240px;
}

.blog_main #hot_topic .hot_topic_left .topic_lists img {
	position: absolute;
	width: 100%;
	height: 100%;
}

.blog_main #hot_topic .hot_topic_left .topic_lists p {
	position: absolute;
	width: 100%;
	background-color: rgba(55, 66, 87, 0.9);

	padding: 20px 0;

	bottom: 0;

	color: #ffffff;

	text-align: center;
}

.blog_main #hot_topic .pagination_wrap {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;

	top: 0;
	right: 0;
}

.blog_main #hot_topic .pagination_wrap a {
	display: block;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	border: solid 1px rgba(221, 221, 223, 0.8);
	background-color: #f6f6f7;

	color: #888;

	font-size: 12px;
	text-align: center;
	line-height: 20px;
}


.blog_main #hot_topic .hot_topic_right {
	position: relative;
	width: 280px;
	padding-top: 30px;
}

.blog_main #hot_topic .hot_topic_right .topic_banner {
	width: 280px;
	height: 240px;
	background-color: black;
}

.blog_main #blog_main_content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.blog_main #blog_main_content .blog_main_left {
	width: 770px;
}

.blog_main #blog_main_content .blog_main_left #blog_main_notification {
	background-color: #ffffff;
	padding: 54px 0;

	text-align: center;
}

.blog_main #blog_main_content .blog_main_left #blog_main_notification p {
	font-size: 16px;
	line-height: 30px;
}

.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav {
	background-color: #ffffff;
	border-top: solid 1px #999999;
	border-bottom: solid 1px #999999;

	padding: 10px 0;

	font-size: 14px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog_main #blog_main_content .blog_main_left .blog_article_nav li {
	margin-right: 22px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_nav a {
	
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists {

}

.blog_main #blog_main_content .blog_article_lists li {
	width: 100%;
	border-bottom: solid 1px #eeeeef;

	padding: 25px 0 23px;
}

.blog_main #blog_main_content .blog_article_lists li a {
	display: block;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 100%;
	height: 100%;
}

.blog_main #blog_main_content .blog_article_lists .blog_article_info {
	width: 573px;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap img {
	width: 32px;
	height: 32px;
	border-radius: 50%;

	margin-right: 10px;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info {
	
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info h3 {
	font-size: 14px;
	margin-bottom: 3px;
}

.blog_main #blog_main_content .blog_article_lists .blog_profile_info p {
	font-size: 11px;
	color: #959595;
}

.blog_main #blog_main_content .blog_article_lists h2 {
	margin-top: 16px;
	font-size: 17px;
}

.blog_main #blog_main_content .blog_article_lists .paragraph {
	margin-top: 10px;
	font-size: 13px;
	color: #666666;
}

.blog_main #blog_main_content .blog_article_lists .comments {
	margin-top: 14px;
	color: #959595;
	font-size: 12px;
}

.blog_main #blog_main_content .blog_article_lists .comments span {
	margin-right: 9px;
}

.blog_main #blog_main_content .blog_article_lists .comments em {
	font-style: normal;
}

.blog_main #blog_main_content .blog_main_right {
	width: 280px;
	height: 2000px;
	background-color: pink;
}

  • btn은 디폴트 값으로 배경색이 회색이다.

  • cursor: pointer 커서가 손가락 모양으로 변함

  • letter-spacing 글자 좌우 간격

강의를 끝난후 소감

복붙과 소스코드가 길어지다 보니 점점 복잡해져 정리가 필요할꺼 같다.

힘든점, 문제점

소스코드가 길어짐에 따라 가독성이 떨어져 중간중간 작업이 헷갈림이 자주 일어났다.

해결방안

지금은 강사님 따라 하지만 나만의 스타일로 가독성을 높히는 법을 찾아야겠다. 그러기 위해선 일단 반복과 연습이 필요하다.

학원 2일차 - Java
Spring Boot와 JPA 활용1 - TIL(7)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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