개발일지(2021-07-20)

서범규·2021년 7월 20일

학습한 내용

전날하던 네이버 메인 페이지 만들기 실습을 이어서 만들었습니다.

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>

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





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

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

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

#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 .roduct-info {
	text-align: center;
}

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

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

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

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

css를 입력해서 어디로 배치가 될지 생각을 하면서 작업하지 않으면 작업량에 몇배로 많아지게 되고 나중에는 어디에 입력을 해야하는지 잊어버리는 경우가 생기는 것이 힘들었습니다.

해결방법 작성

지금은 실습을 통해서 한가지씩 입력해서 어떻게 되는지 결과를 보고 다시 고치는 방식으로 해서 자주 사용하는 속성에 익숙해 지는 것이 좋다고 생각합니다.

학습 소감

css의 경우 부모 자식 관계를 생각하며 차례로 입력하면 순서를 헷갈리는 경우는 적어졌지만, 경우에 따라서 html에 부모 자식 관계를 설정했다가 다른 위치로 바꾸는 것이 헷갈리기 시작했습니다. 어렵다고 생각한 css 부분을 신경쓰다가 html 부분이 조금 어렵게 느껴졌습니다.

서범규

이전 포스트

개발일지(2021-07-19)

다음 포스트