2021_07_ 20개발일지

Yeo Eunhye·2021년 7월 20일
개발일지
0

1) 학습한 내용

오늘은 어제에 이어 네이버 오른쪽 영역과 밑단 영역에 대해 카피캣 해보았다.

1.main right - login

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

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

2. main right -shoping

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

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

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


#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;2
	padding: 12px 4px;
	background-color: #f7f9fa;
	border-bottom: solid 1px #dae1e6;
}

#main_right #shop_wrap .shop_content .commerce-lists li {
	font-size: 11px;
	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;
}


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

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


3. main - footer

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


2) 학습내용 중 어려웠던 점 및 해결방법

오늘쪽 영역을 하던도중 나와 강사님의 폰트스타일이 달라 크기도 조금씩 달라서 같은 공간에 같은 양의 내용물을 넣자 나의 레이아웃의 틀이 틀어지게 되었다.
그래서 처음에는 공간에 맞게 li 태그의 갯수를 줄이고 nth-child 의 숫자를 변경하였는데, 원하는 모양이 나오지 않았다.
그래서 다시 원래의 내용물로 맞추고 폰트의 크기를 1px 줄이니 딱 맞아 떨어졌다.
다행히도 빠르게 레이아웃을 맞출 수 있어서 좋았다.

3) 학습소감

오늘은 짧은 강의와 어제와 이어서 비슷한 레이아웃을 만들어서 그런지 조금 더 쉽고 빠르게 다가 갈 수 있었다.
또 하다가 중간중간 강사님과 다른점들이 생기면 어떤 것이 적용이 안되었는지, 오탈자, 연결 등 여러가지의 해결방법들이 빠르게 떠올라서 좋았다.

지금 이렇게 네이버 카피캣을 하면서 앞에 배웠던 내용들을 다시 복습 하고 있는데, 오히려 지금 이렇게 실습을 하면서 들으니 더더 잘들어오는 것 같다. 또 예전에는 무작정 따라가기위해 외우는 방식이었다면 이제는 조금 여유롭게 생각하면서 들으니 머릿속으로 그려보면서 들을 수 있어 더 기억이 잘 나는것같다.

요즘 자유롭게 강의를 들으며 수업을 하고 있는데, 나한테 적성이 맞을까 걱정하던 처음과는 달리 생각보다 괜찮은지 너무 집중을 잘 해서 강의를 듣는것 같다.
앞으로의 수업도 잘 맞았으면 좋겠다 :)

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_07_19개발일지

다음 포스트

2021_07_21 개발일지

0개의 댓글