[대구AI스쿨] 개발일지 22일차 210727

김선아·2021년 7월 27일
CSShtml대구AI스쿨웹프로그래밍
0

대구AI스쿨 개발일지

목록 보기
22/46

학습 내용

1. 네이버 블로그 (2)

1) 네이버 블로그 상단영역

<!-- 네이버 블로그 상단영역 -->

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

css↓


.blog-container {
	width: 1080px;
	margin: 0 auto; 
}

#blog-header .blog-header-top {
	height: 60px;
	background-color: #00c73c;
	border-bottom: 1px solid #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;

	/*margin-top: 9px;*/     
	/* blog-header-right에서 flex를 지정하지 않았을 때는 함께 대칭으로 맞출 대상이 없었기 때문에, 마치 justify: flex-start;처럼 표현되었음 */
}

#blog-header .blog-header-top .blog-header-left h2 {
	font-size: 20px;
	font-weight: 700;
	margin-right: 20px;
}

#blog-header .blog-header-top .blog-header-left h2 a {
	color: #ffffff;
	/* 폰트 색은 h2에 작성하면 적용되지 않는다. a태그 기본 글자 색이 적용되기 때문 */
}

#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;   /* button태그는 기본으로 회색이 배경색으로 지정됨 */
	border-left: 1px solid #239e36;
	border-right: 1px solid #239e36;

	cursor: pointer;
}

#blog-header .blog-header-nav {
	height: 40px;
	background-color: #ffffff;
	border-bottom: #e5e5e5 1px solid;
}

#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 ul 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 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.7);
	color: #ffffff;
}

#blog-header .blog-header-nav .nav-right ul li a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	border: 1px solid #cecece;

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

	font-size: 13px;
}

2) 블로그 핫토픽 영역

	<!-- 블로그 핫토픽 영역 -->

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

	</main>

css↓

/* 블로그 핫토픽 영역 */

.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: grey;
	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 li img {
	position: absolute;
	width: 100%;
	height: 100%;
}

.blog-main #hot-topic .hot-topic-left .topic-lists li p {
	position: absolute;         /* 형제태그 모두 3차원일 경우, html 뒤쪽에 작성된 태그가 z축이 높다. */
	width: 100%;
	background-color: rgba(55, 66, 87, 0.9);
	/* hex converter rgb를 검색하면 색상코드를 rgb로 변환할 수 있다. */

	padding: 20px 0;

	bottom: 0;   
	/* 부모 공간의 가장 아래 부분에 위치하도록 설정 */
	/* 부모태그의 position이 3차원인 경우, 부모태그의 공간을 기준으로 이동한다. (현재 position: relative;) */
	/* 참고) 부모태그의 position이 2차원인 경우, 브라우저 공간을 기준으로 이동한다. */

	color: #ffffff;

	text-align: center;
}

.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;
	border: solid 1px rgba(221, 221, 223, 0.8);
	background-color: #f6f6f7;

	color: #888;

	font-size: 12px;
	text-align: center;   /* x축 중앙정렬 */
	line-height: 20px;    /* y축 중앙정렬 */ 
}


.blog-main #hot-topic .hot-topic-right {
	position: relative;
	width: 280px;
	padding-top: 30px;
}
/* topic-banner에 대한 넓이, 높이값을 입력하지 않았을 때, pagination-wrap이 정상적인 위치에 올라가지 않았음 */
/* pagination-wrap은 position: absolute;로 적용되어 있음 */
/* absolute는 부모의 높이값에 영향을 주지 않는다. 그래서 부모인 hot-topic-right의 공간에서 높이값이 정해지지 않아서 top, right : 0임에도 위치 되지 않았음 */

.blog-main #hot-topic .hot-topic-right .topic-banner {
	width: 280px;
	height: 240px;
	background-color: black;
}

3) 블로그 메인 왼쪽 영역

<!-- 블로그 메인 왼쪽 영역 -->

<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>일렉트로룩스 인덕션 센스프라이 설치 후 달라진 주방</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>일렉트로룩스 인덕션 센스프라이 설치 후 달라진 주방</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>일렉트로룩스 인덕션 센스프라이 설치 후 달라진 주방</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>일렉트로룩스 인덕션 센스프라이 설치 후 달라진 주방</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>일렉트로룩스 인덕션 센스프라이 설치 후 달라진 주방</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>

css↓

/* 블로그 메인 왼쪽 영역 */

.blog-main #blog-main-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.blog-main #blog-main-content .blog-main-left {
	width: 770px;
	height: 2000px;
	background-color: lightgoldenrodyellow;
}

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

	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 ul li {
 margin-right: 11px;
}

.blog-main #blog-main-content .blog-main-left .blog-article-nav ul li 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 li a .blog-article-info {
	width: 573px;
}


.blog-main #blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap img {
	width: 32px;
	height: 32px;
	border-radius: 50%;

	margin-right: 10px;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info {

}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .blog-profile-info h3 {
	font-size: 14px;
	margin-bottom: 3px;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .blog-profile-info p {
	font-size: 11px;
	color: #959595;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info h2 {
	margin-top: 16px;
	font-size: 17px;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .paragraph {
	margin-top: 10px;
	font-size: 13px;
	color: #666666;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .comments {
	margin-top: 14px;
	color: #959595;
	font-size: 12px;
	letter-spacing: -0.1px;
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .comments span {
	margin-right: 9px;r
}

.blog-main #blog-main-content .blog-article-lists .blog-article-info .comments span em {
	font-style: normal;
}

어려웠던 점과 해결방안

  1. cursor: pointer; 마우스를 올리면 손가락모양으로 마우스 포인터가 바뀜
  2. 네이버에서는 x축 정렬을 flex가 아닌 float를 사용해서 더 어렵게 디자인 해 두었음. flex는 explorer하위버전을 지원하지 않기 때문
    검색창에 can i use를 검색하면, 기능이 적용되는 브라우저 버전을 검색해 볼 수 있다.
  3. hex converter rgb를 검색하면 색상코드를 rgb로 변환할 수 있다.
  4. css 말줄임 효과 검색하여 정리된 블로그를 참고하면 된다.
  5. letter-spacing: -0.1px; 글자간 좌우 간격

학습소감

새로 나온 내용들을 정리해 두었다.

profile
김선아
이전 포스트

[대구AI스쿨] 개발일지 21일차 210726

다음 포스트

[대구AI스쿨] 개발일지 23일차 210728

0개의 댓글