7월 20일 Velog

류영서·2021년 7월 20일
대구AI스쿨

학습한 내용

https://www.naver.com/

3. Main Right

(0) 기본 설정

[html]

<main role="main" class="container">
	<div id="main_left"></div>
        
        <div id="main-right">
        
        </div>
</main>

[css]

main {
	overflow: hidden;

	padding-top: 20px;
}

main #main_left {
	float: left;
	width: 750px;
}

main #main_right {
	float: right;
	width: 350px;
}

(1) Account

[html]

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

[css]

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

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

#main_right #account a {
	display: block;

	width: 100%;
	background-color: #19ce60;

	border-radius: 2px;

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

	text-align: center;
	font-size: 13px;
	color: #ffffff;
	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 .left span,
#main_right #account .account_sub span {
	font-size: 12px;
}

  • a 태그는 기본적으로 inline 요소
    : 크기를 만들어 주기 위해서 block 요소로 바꾼다.

  • #main_right #account .account_sub
    : div(left)와 span 태그 영역을 x축 정렬하기 위해 flex 사용

(2) Banner

[html]

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

[css]

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

	margin-top: 12px;
}

(3) Shop

shop_title
shop_content - commerce_lists/shop_goods

[hmtl]

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

				<div class="shop_content">
					<ul class="commerce_lists">
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
					</ul>

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

[shop_title css]

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

	padding: 12px 0;
	margin-top: 20px;
}

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

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

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

  • #main_right #shop_wrap .shop_title
    : 자식 요소인 h3, div(right) 영역을 x축 정렬하기 위해 flex 사용

  • #main_right #shop_wrap .shop_title .right
    : 자식 요소인 3개의 h4 영역을 x축 정렬하기 위해 flex 사용

[shop_content 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;

	background-color: #f7f9fa;

	border-bottom: solid 1px #dae1e6;

	padding: 12px 4px;
}

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

	font-size: 12px;
}

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

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

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

#main_right #shop_wrap .shop_content .shop_goods .product_lists .product_info {
	text-align: center;

	margin-top: 5px;
}

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

news_lists
corp_lists

[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>
  • 컨텐츠가 중앙 정렬이기 때문에 container 클래스를 가진 div 태그로 감싸 준다.
    : .container {width: 1130px; margin: 0 auto; }

[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 p {
	font-size: 12px;
}

#main_footer .news_lists li .news_info h3 {
	font-size: 13px;

	margin: 6px 0 8px;
}

#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; -> x축 정렬

	vertical-align: middle;
}

#main_footer .corp_lists li a {
	font-size: 12px;
}

#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:first-child:before {
	content: initial;
}

  • #main_footer .corp_lists li:before
    : li 태그 사이의 선 배치 레이아웃하기 위해 가상선택자 사용한다.

  • #main_footer .corp_lists li:first-child:before
    : 제일 앞에 오는 가상 선택자 레이아웃 해제

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

학습 중에 commerce_lists의 레이아웃을 지정하는 방법을 html 코드를 수정하는 것 대신 css 코드를 수정해서 지정하는 방법을 시도해 보았다.

해결 방법 작성

[수정 전 html]

					<ul class="commerce_lists">
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>

					</ul>

[css]

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

	background-color: #f7f9fa;

	border-bottom: solid 1px #dae1e6;

	/*padding: 12px 4px;*/
	padding: 12px 4px 11px 10px;

}

#main_right #shop_wrap .shop_content .commerce_lists li{
	float: left;

	width: 16.66%;

	/*margin-left: 10px;*/
	margin-bottom: 5px;

	font-size: 12px;
}

padding 값을 li 태그가 아닌 li 태그를 감싸는 ul 태그에 부여하고
float와 overflow를 사용하고 width값을 비율로 설정하여 레이아웃을 지정하였다.

학습 소감

혼자서 css 코드를 수정하면서 직접 네이버 페이지의 개발자도구를 활용했는데 바꾸자하는 부분을 확실히 익히니까 코드를 읽는 것이 훨씬 수월했다.

profile
류영서
이전 포스트

7월 19일 Velog

다음 포스트

7월 21일 Velog

0개의 댓글