[대구AI스쿨] 개발일지 17일차 210720

김선아·2021년 7월 20일

대구AI스쿨 개발일지

목록 보기

17/46

학습내용

1. 네이버 홈페이지 (2)

1) 네이버 오른쪽

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

	<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="#">G마켓</a></li>
				<li><a href="#">옥션</a></li>
				<li><a href="#">11번가</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>
				<li><a href="#">올리브영</a></li>
				<li><a href="#">GS샵</a></li>
				<li><a href="#">롯데몰</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>

	
</div>

css↓

/* 네이버 오른쪽 */

/* 로그인 */

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

	margin-bottom: 12px;    /* 로그인창 아래의 배너부분과의 공백설정. banner에서 margin-top을 넣어줘도 됨. */ 
}

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

	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 #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;
	line-height: 17px;
}

#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;
}

#main-right #shop_wrap .shop_content {
	border: solid 1px #e4e8eb;
	padding: 0 0 22px;   /* 3개만 작성하면 상-좌우-하 */
}

#main-right #shop_wrap .shop_content .shop_goods {
	padding: 55px 8px;
}
/* 처음에는 shop_content 전체에 패딩 좌우가 설정되어 있었음 */
/* shop_content안의 shop_lists에는 content의 패딩이 들어가면 안되기 때문에, shop_content의 좌우 패딩을 삭제한 뒤, shop_goods에만 좌우 패딩을 넣어준다. */




#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-bottom: solid 1px #dae1e6;
}

#main-right #shop_wrap .shop_content .commerce_lists li {
	font-size: 12px;
	margin: 0 10px 5px;
}

#main-right #shop_wrap .shop_content .commerce_lists li:nth-child(7),
#main-right #shop_wrap .shop_content .commerce_lists li:nth-child(8),
#main-right #shop_wrap .shop_content .commerce_lists li:nth-child(9),
#main-right #shop_wrap .shop_content .commerce_lists li:nth-child(10),
#main-right #shop_wrap .shop_content .commerce_lists li:nth-child(11) {
	margin-bottom: 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;
}

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

<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>
			<li><a href="#">네이버 정책</a></li>
			<li><a href="#">고객센터</a></li>
		</ul>
		
	</div>
	

</footer>

css↓

/* footer */

#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:before {
	 content: "";
	 display: inline-block;
	 width: 1px;
	 height: 11px;
	 background-color: #e4e8eb;
	 margin: 0 8px;
	 /* 글자와 글자 사이의 "ㅣ" 모양을 넣기 위한 코드 */
	 /* 기호를 넣는 것이 아니라, 1 x 11px 크기의 공간을 만들어서 "ㅣ"처럼 보이게 하는 것*/

	 vertical-align: -1px;
	 /* 글자와 조금 삐뚤빼둘해서 가지런히 정렬 */
}

#main_footer .corp_lists li:first-child:before {
	content: initial;    /* 초기화하는 속성 (무효처리) */
}

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

어려웠던 점과 해결 방안

1) justify-content: space-between;

shop_wrap의 commerce_lists를 강의와 조금 다르게 설정해 보았다.
일단 강의에서는 모두 11번가로 글자를 넣고, justify-content: space-between;을 설정하였더니, 12개로는 두번째 줄이 이상하게 출력되었다. 그래서 8개씩 2줄이 되도록 16개의 li태그를 만들어서 사용 했는데, 나는 그냥 네이버 홈페이지에 있는 그대로의 쇼핑몰 이름을 사용했고, 마지막 쇼핑몰이름만 3번째줄로 출력되어서 그것만 삭제한 뒤 사용했다.

justify-content: space-between;을 사용하니, 오브젝트들의 갯수가 안맞을 경우에는 위와 같이 두번째 줄이 갯수가 모자라게 표시가 되었다.
4개씩 2줄로 만들기 위해서는, <div>태그로 오브젝트들을 따로 감싸서 (첫번째줄, 두번째줄로 나누기) space-between을 설정하면 어떨까 생각하고 있다.

2) Shop-lists의 마진값 적용

강의에서 선생님이 아마도 빠뜨린 것이라고 생각하는데, commerce_lists에서 commerce_lists의 패딩값이 상하 12px, commerce_lists li의 margin-bottom: 5px;로 적용되어 있어서 두번째 줄의 쇼핑몰들은 12px + 5px의 공백이 설정되어 있었다.
그래서 따로 가상선택자 nth-child를 사용하여, li태그의 margin-bottom를 없애 주었다.

조금 부끄럽지만, 내가 따로 코딩을 해서 적용한 거의 첫번째 사례인데, 제대로 적용이 되지 않아서 또 한참을 들여다 보았더니... nth(7) 이런식으로 잘못 코딩을 했던 것이었다.
원래는 nth-child(7) 이렇게 써야함... :D

학습 소감

그 동안은 실습을 따라하면서, 따라한 내용을 이해하는 것에 그쳤다면 이번 네이버 카피캣 실습을 하면서는 시간이 좀 걸리더라도 선생님이 이런 css효과를 줄겁니다~ 라고 말씀하실때, 혼자 이런 코드를 사용하면 좋지 않을까? 미리 생각을 해보고 뒤의 설명을 들었다.
맞는 것도 있었고, 아닌 것도 있었지만 이렇게 내 생각이 적용되는게 맞는지 아닌지를 점검할 수 있어서 좋았다.
그리고 그렇게 생각해 볼 수 있을 정도로 성장했다는 기쁨도 있었다

모든 공부가 그렇겠지만, 한번 배웠던 걸 그 당시에 이해했다고 해서 영원히 기억하고 있는 것도 아니고 적재적소에 적용시킬 수 있는 것도 아니다.
기본 개념 강의를 들었을 때, 분명히 이해했다고 해서 실습을 할 때 바로 그 태그나 속성이 생각나서 적용을 할 수 있는 건 아니라는 걸 매일 느끼고 있다.
그래서 강의를 들으면서 편하게 하라는 코드만 따라하기만 해도 되지만 내가 정확하게 생각이 안나는 속성이나 코드들은, 꼭 개발일지를 뒤져서 다시 읽어보고 또 코드 중간중간에 주석으로 메모를 해 둔다.
그렇게 하다보니 시간이 아~~~주 오래 걸리는 단점이 있긴한데... 그래도 그만큼 남는 것이 있다고 생각한다. 열심히 하자!!

김선아

이전 포스트

[대구AI스쿨] 개발일지 16일차 210719

다음 포스트

[대구AI스쿨] 개발일지 17일차 210720