2021.06.15 (네이버 블로그 1)

이상화·2021년 6월 15일
0

학습한 내용

[블로그 메인 상단 부분]

	<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 type="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>
.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_left .blog_header_input_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#blog_header .blog_header_top .blog_header_left .blog_header_input_wrap .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_header_left .blog_header_input_wrap .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_header_left .blog_header_input_wrap .blog_search_wrap input:focus {
	outline: none;
}

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

#blog_header .blog_header_top .blog_header_left .blog_header_input_wrap .btn_total_search {
	width: auto;
	height: 40px;

	padding: 0px 5px;

	background-color: #28a93a;
	border: solid 1px #239e36;

	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;

	border-left: solid 1px #239e36;
	border-right: solid 1px #239e36;

	background-color: #00c73c;

	cursor: pointer;
}

#blog_header .blog_header_nav {
	height: 40px;

	border-bottom: solid 1px #e5e5e5;
	background-color: #ffffff;
}

#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 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 ul li a {
	display: block;

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

	font-size: 12px;
}

#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 ul li {
	width: auto;
	height: 26px;

	margin-left: 8px;
}

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

	color: #ffffff;
}

#blog_header .blog_header_nav .nav_right ul li a {
	display: block;

	width: 100%;
	height: 100%;

	background-color: #ffffff;
	border: solid 1px #cecece;

	line-height: 26px;

	padding: 0 10px;

	font-size: 12px;
}

	<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>
.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;

	margin: 0 8px;

	background-color: grey;
}

.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 li img {
	position: absolute;

	width: 100%;
	height: 100%;
}

.blog_main #hot_topic .hot_topic_left .topic_lists li 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: 11px;
	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;
}

[네이버 블로그 메인 왼쪽 부분]

		<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">
										제주 여행을 1박이나 2박에 다한다는 건 어불성설이었어요. 생각보다 크기도 했지만, 
										볼거리가 너무 많아 1박 제주도 일주라는 말은 옛말이더라고요. 
										제주를 동서남북으로 나눠 이번에는 제주도 서쪽 가볼만한곳을 나름 코스를 정해 다녀왔어요.
									</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">
										제주 여행을 1박이나 2박에 다한다는 건 어불성설이었어요. 생각보다 크기도 했지만, 
										볼거리가 너무 많아 1박 제주도 일주라는 말은 옛말이더라고요. 
										제주를 동서남북으로 나눠 이번에는 제주도 서쪽 가볼만한곳을 나름 코스를 정해 다녀왔어요.
									</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">
										제주 여행을 1박이나 2박에 다한다는 건 어불성설이었어요. 생각보다 크기도 했지만, 
										볼거리가 너무 많아 1박 제주도 일주라는 말은 옛말이더라고요. 
										제주를 동서남북으로 나눠 이번에는 제주도 서쪽 가볼만한곳을 나름 코스를 정해 다녀왔어요.
									</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">
										제주 여행을 1박이나 2박에 다한다는 건 어불성설이었어요. 생각보다 크기도 했지만, 
										볼거리가 너무 많아 1박 제주도 일주라는 말은 옛말이더라고요. 
										제주를 동서남북으로 나눠 이번에는 제주도 서쪽 가볼만한곳을 나름 코스를 정해 다녀왔어요.
									</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">
										제주 여행을 1박이나 2박에 다한다는 건 어불성설이었어요. 생각보다 크기도 했지만, 
										볼거리가 너무 많아 1박 제주도 일주라는 말은 옛말이더라고요. 
										제주를 동서남북으로 나눠 이번에는 제주도 서쪽 가볼만한곳을 나름 코스를 정해 다녀왔어요.
									</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>
.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 {
	padding: 54px 0;

	background-color: #ffffff;
	
	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 .blog_article_nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

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

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

	padding: 25px 0 23px;
}

.blog_main #blog_main_content .blog_main_left .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_main_left .blog_article_lists li a .blog_article_info {
	width: 573px;
}

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

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .blog_profile_wrap img {
	width: 32px;
	height: 32px;

	border-radius: 50%;

	margin-right: 10px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .blog_profile_wrap .blog_profile_info h3 {
	margin-bottom: 3px;

	font-size: 14px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .blog_profile_wrap .blog_profile_info p {
	font-size: 11px;

	color: #959595;
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info h2 {
	margin-top: 16px;

	font-size: 17px;
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .paragraph {
	margin-top: 10px;

	font-size: 12px;

	color: #666666;
}

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .comments {
	color: #959595;
	font-size: 12px;

	margin-top: 14px;
}

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

.blog_main #blog_main_content .blog_main_left .blog_article_lists li a .blog_article_info .comments span em {
	font-style: normal;
}

학습내용 중 어려웠던 점

따로 어려운 점은 없었지만 브라우저 버전에 따른 다양한 배치 작업을 고려해서 만들어야 하는것이 경험이 쌓이지 않으면 어려울거 같습니다.

해결방법

다양한 사이트들의 코드들을 참고하고 어느 상황에 어느 배치 작업을 수행 했는지 다양하게 참고 함으로써 다양한 변수에 대해 사용가능한 배치 기술을 많이 습득해놔야 브라우저 문제에 대응을 할 수 있을 거라 생각합니다.

학습소감

배치 작업에 주로 flex를 사용했지만 중간 중간에 positon을 활용한 배치작업을 이용하면서 여러 배치작업을 활용해 다시한번 positon을 이해할 수 있는 강의 였습니다.

profile
이상화
개발자를 꿈꾸는 이상화입니다.
이전 포스트

2021.06.14 (네이버 웹툰 3,4)

다음 포스트

2021.06.16 (네이버 블로그 2,3)

0개의 댓글

관련 채용 정보