웹 프로그래밍#17

Jeongmin Heo·2021년 7월 20일
대구AI스쿨
0

웹 프로그래밍

목록 보기
17/50

네이버 카피캣

💻 학습내용

main_right(로그인 & 광고 배너)

html

<div id="main_right">
			<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="left">
						<span>아이디</span>
						<span>비밀번호 찾기</span>
					</div>
					<span>회원가입</span>
				</div>
			</div>

			<div id="banner"></div>

css

#main_right #account {
	width: 100%;
	border: solid 1px #dae1e6;
	padding: 16px 16px 12px 16px;

	margin-bottom: 12px;
}

#main_right #account p{
	font-size: 12px;
	padding-left: 3px;
	margin-bottom: 11px;
}

#main_right #account a{
	display: block;
	width: 100%;
	background-color: #19ce60;

	padding: 15px 0;
	margin-bottom: 14px;

	text-align: center;
	font-size: 13px;
	color: #fff;
	font-weight: 700;
}

#main_right #account .account_sub {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 0 8px;
}

#main_right #account .account_sub span{
	font-size: 12px;
}


#main_right #banner{
	width: 348px;
	height: 198px;
	background-color: #000000;

	margin-bottom: 20px;
}

main_right(쇼핑)

html

<div id="shop_wrap">
				<div class="shop_title">
					<h3><a href="#">트렌드 쇼핑</a></h3>

					<div class="right">
						<h4><a href="#">상품</a></h4>
						<h4><a href="#">쇼핑몰</a></h4>
						<h4><a href="#">MEN</a></h4>
					</div>
				</div>

css

#main_right #shop_wrap .shop_title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 12px 0;

}

#main_right #shop_wrap .shop_title h3,
#main_right #shop_wrap .shop_title h4{
font-size: 13px;
}

#main_right #shop_wrap .shop_title h4{
margin-left: 15px;
}

#main_right #shop_wrap .shop_title .right{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

flex의 활용법에 익숙해질 필요가 있다.
flex-wrap은 줄 바꿈을 결정한다.

html

<div class="shop_content">
					<ul class="commerce_lists">
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
						<li><a href="#">G마켓</a></li>
					</ul>

css

#main_right #shop_wrap .shop_content {
	border: solid 1px #e4e8eb;
	padding: 0 0 22px;
}

#main_right #shop_wrap .shop_content .shop_goods {
	padding: 55px 8px;
}


#main_right #shop_wrap .shop_content .commerce_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 12px 4px;
	background-color: #f7f9fa;
	border: solid 1px #dae1e6;
}

#main_right #shop_wrap .shop_content .commerce_lists li{
	font-size: 12px;
	margin-left: 10px;
	margin-bottom: 5px;

}

#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(9){
	margin-left: 0;
}

space between은 좌우 끝으로 배치 시킴
첫번째 줄과 두번째줄의 갯수가 동일하지 않으면 뒷줄의 콘텐츠가 극단적으로 배치되서 레이아웃 형태가 깔끔하게 나오지 않는다.
개수가 깔끔하게 떨어지지 않는다면
이럴 때는 float left를 사용하는 걸 권장함

html

<div class="shop_goods">
						
						<ul class="product_lists">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product_info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</main>

css

#main_right #shop_wrap .product_lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

}

#main_right #shop_wrap .product_lists li{
	margin-bottom: 10px;
}

#main_right #shop_wrap .product_lists .product_info{
	text-align: cneter;
}

#main_right #shop_wrap .product_lists h3,
#main_right #shop_wrap .product_lists span{
	font-size: 12px;
}

html

<footer id="main_footer">
		<div class="container">
			
			<ul class="news_lists">
				<li>	
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>SW 개발자를 위한<br>
						 교육 지원꿀팁과 생생한 후기들!</p>
					</div>
				</li>
				<li>	
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>SW 개발자를 위한<br>
						 교육 지원꿀팁과 생생한 후기들!</p>
					</div>
				</li>
				<li>	
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>SW 개발자를 위한<br>
						 교육 지원꿀팁과 생생한 후기들!</p>
					</div>
				</li>
			</ul>

			<ul class="corp_lists">
				<li><a href="#">회사소개</a></li>
				<li><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>

		</div>
	</footer>

css

#main_footer {
	background-color: #fafbfc;
	border-top: solid 1px #e4e8eb;
	padding-bottom: 92px;
}


#main_footer .news_lists{

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 24px 0;
}

#main_footer .news_lists li{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-startß;
	align-items: center;
}


#main_footer .news_lists li img{
	margin-right: 15px;

}


#main_footer .news_lists li .news_info{
	width: 172px;


}

#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3,
#main_footer .news_lists li .news_info p{
	font-size: 13px;
}

#main_footer .news_lists li .news_info span{
	color: #58c464;
}

#main_footer .corp_lists{
	padding-top: 25px;
	border-top: solid 1px #e4e8eb;
}

#main_footer .corp_lists li{
	display: inline-block;
	vertical-align: middle;
}


#main_footer .corp_lists li:first-child:before{
	content: initial;
}

#main_footer .corp_lists li:before{
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #e4e8eb;
	margin: 0 8px;

	vertical-align: -1px;
}


#main_footer .corp_lists li a{
	font-size: 12px;
}
  • 작대기 높이를 조정하려면 버티컬 얼라인에 -n값을 적용해주면 밑으로 내려간다.
  • before를 적용한 li에서 첫번째 작대기를 제거하기 위해서 li:first-child:before를 지정한 후 content: initial;을 적용 했다.

📝 마무리

.container를 css에 먼저 만들었다. margin: 0 auto;로 속성값을 설정해서 중앙 배열이 되도록 했는데, html에서 main 틀의 div들에 class값으로 container를 입력하니 굳이 하나하나 설정하지 않아도 자연스럽게 중앙정렬이 되서 편하다.
before 과 first-child 가상선택자를 활용해서 효과를 초기화 하는 css 코드를 작성해 보았다.
어제부터 flex를 주기적으로 활용하고 있다. 점점 익숙해져가고 있다.
오늘로서 네이버 메인화면을 만들어보는 실습이 끝이 났다.
내일도 열심히 참여를 해야지 화이팅

profile
Jeongmin Heo
이전 포스트

#웹 프로그래밍 16

다음 포스트

웹 프로그래밍 #18

0개의 댓글