2021.07.27 NAVER-7

정혜리·2021년 7월 27일
0

Practice-copy_websites

목록 보기
11/15

Day22,
Naver blog 페이지를 만들어 봤다.

오늘 무엇을 배웠지?

Naver-'blog' : https://section.blog.naver.com/BlogHome.naver?directoryNo=0¤tPage=1&groupId=0

html

  1. new file-save(blog.html), save(style0727.css)
  2. 기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>
	<link rel="stylesheet" type="text/css" href="style0727.css">
</head>
<body>

</body>
</html>
	<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="blog.html">블로그 홈</a></li>
						<li><a href="#">주제별 보기</a></li>
						<li><a href="#">이달의 블로그</a></li>
						<li><a href="#">공식 블로그</a></li>
						<li><a href="blog-detail.html">챌린지 프로그램</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>

CSS-Style

(어제의 css에 이어서)
1. Default CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
ol, ul { list-style: none; }
a {	text-decoration: none; 	color: #000000; }
img { vertical-align: middle; }
.clearfix { clear: both; }
button { border: none; }
input, textarea { outline: none; }

/*blog*/
.blog-container { width: 1080px; margin: 0 auto; }
  1. .blog-header-top의 높이, 배경색 등을 디자인하고 .blog-container의 배열을 'flex'기능으로 설정한다.
#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;
	height: 60px; }
  1. .blog-header-left의 배열을 'flex'기능으로 설정한다. 그에 속한 태그들을 디자인한다.(색, 글자 크기 등)
#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; }
  1. .blog-header-input-wrap, .blog-search-wrap을 'flex'기능으로 배열하고 디자인한다. <input>, .btn-search의 너비가 속한 영역의 너비에 꽉 차게 calc()으로 너비를 설정한다.
#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; }
  1. .blog-header-right의 배열을 'flex'기능으로 설정하고 이에 속한 태그들을 디자인한다. (색, 테두리, 너비, 높이 등)
#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; }
#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; }
  1. .blog-header-nav를 디자인(높이, 배경색, 테두리 등)하고 .blog-container의 배열을 'flex'기능으로 설정한다.
#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; }
  1. .nav-left의 태그들을 디자인한다. <ul>태그의 배열을 'flex'기능으로 설정하고 <li>태그의 높이, 간격 등을 설정한다. 이 중, .on 이라는 class를 가진 태그에는 밑줄이 굵게 생기도록 설정한다. <a>태그를 디자인한다. (너비, 높이, 글자 크기 등)
#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; }
  1. .nav-right의 태그들을 디자인한다. <ul>태그의 배열을 'flex'기능으로 설정한다. <li>태그를 디자인하고 .on이라는 class를 가진 태그에 한해서 배경색과 글자색이 달라지도록 설정한다. <a>태그를 디자인한다.(너비, 높이, 배경색, 글자 크기 등)
#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 { color: #ffffff;
	background-color: #00c73c; border: solid 1px rgba(0, 0, 0, 0.07); }
#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; }

결과 ▼

<main> - 1

html

(<header> html에 이어서)
1.

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

2.

		<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-article-info">
											<h3>정혜리</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>
									<div class="comments">
										<span>공감<em>43</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-article-info">
											<h3>정혜리</h3>
											<p>13시간 전</p>
										</div>
									</div>

									<h2>Title 1</h2>
									<p class="paragraph">
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 
									</p>
									<div class="comments">
										<span>공감<em>43</em></span>
										<span>댓글<em>11</em></span>
									</div>
								</div>
								<img src="https://via.placeholder.com/167x167">
							</a>
						</li>
					</ul>
				</div>
			</div>

CSS-Style

(<header> css에 이어서)
1. #hot-topic 영역의 높이와 배경색 등을 설정한다. .blog-container의 배열을 'flex'기능으로 설정한다.

.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; }
  1. .hot-topic-left의 position을 relative로 설정해 그에 속한 태그들의 영향을 받도록 설정하고 너비를 설정한다. .topic-heading의 배열을 'flex'기능으로 설정하고 그에 속한 태그들을 디자인한다.(글자크기, 너비, 높이, 배경색 등)
.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: grey;
	margin: 0 8px; }
.blog-main #hot-topic .hot-topic-left .topic-heading a { 
	font-size: 16px; }
  1. .topic-lists의 배열을 'flex'기능으로 설정하고 그에 속한 태그들을 디자인한다. <li>의 position은 relative, <img>,<p>태그의 position은 absolute로 설정하고 너비와 높이를 설정한다.
.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); bottom: 0;
	padding: 20px 0; color: #ffffff; text-align: center; }
  1. .pagination-wrap의 배열을 'flex'기능으로 설정하고 top, right 값과 position : absolute;로 위치를 설정한다. 이에 속한 태그<a>를 디자인한다.(너비, 높이, 테두리 등)
.blog-main #hot-topic .pagination-wrap { display: flex;
	flex-wrap: wrap; align-items: flex-end; position: absolute;
	top: 0; right: 0; }
.blog-main #hot-topic .pagination-wrap a { display: block;
	width: 20px; height: 20px; margin-left: 4px; color: #888;
	border: solid 1px rgba(221, 221, 223, 0.8); font-size: 12px;
	background-color: #f6f6f7; text-align: center; line-height: 20px; }
  1. .hot-topic-right의 position을 relative로 설정해 자식태그들의 영향을 받도록 설정하고 .topic-banner의 너비, 높이, 배경색을 설정한다.
.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; }
  1. #blog-main-content의 배열을 'flex'기능으로 설정하고 .blog-main-left의 너비를 설정한다. .blog-main-left에 속한 #blog-main-notification, #blog-article영역을 디자인한다.
.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; }
  1. .blog-article-nav에 속한 태그들을 디자인한다. <ul>태그의 배열을 'flex'기능으로 설정하고 <li>태그의 간격을 설정한다. .blog-article-lists 의 <li>,<a>태그을 디자인한다. (너비, 높이 등)
.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-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%; }
  1. .blog-article-info의 너비를 설정하고 .blog-profile-wrap의 배열을 'flex'기능으로 설정한다. .blog-profile-wrap의 <img>를 디자인(너비, 높이, 경계 등)한다. .blog-profile-info의 태그들을 디자인한다.
.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 h3 { 
	font-size: 14px; margin-bottom: 3px; }
.blog-main #blog-main-content .blog-article-lists .blog-profile-info p { 
	font-size: 11px; color: 959595; }
  1. .blog-article-lists에 속한 태그들을 디자인한다. <h2>, .paragraph, .comments, 또, .comments에 속한 태그 <span>태그의 margin값으로 경계를 설정하고 글자 크기 등을 디자인한다.
.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; }

결과 ▼

무엇이 어려웠지?

어떻게 해결했지?


position을 relative->absolute로 설정했더니 원하는대로 배열되었다. 분명 내 손가락은 absolute로 설정한다고 설정을 했는데, 왜 relative로 설정되어서 오류찾는데 시간을 보내게 하는지 모르겠다ㅠ

그래서?

익숙해졌다고 생각했는데 오류는 계속 존재하고, 설계를 하는 건 여전히 어렵다. 설계에 따라 css 디자인도 달라지기 때문에 페이지를 만드는데 정답은 없지만, 내가 스스로 할 때는 답을 잘 찾고 있는 것 같지는 않다. 어렵다ㅠ

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0727

0개의 댓글