[dg_ai_school] 웹프로그래밍 18

이채환·2021년 7월 21일
WebProgramming대구AI스쿨
0

webprogramming

목록 보기
18/51

학습내용

HTML_1

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

	<header id="main-header">
		<div class="search_area">
			
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>

		</div>
		
		<div id="navbar">
			<div class="container">
				
				<ul>
					<li><a href="#">메일</a></li>
					<li><a href="#">카페</a></li>
					<li><a href="#">블로그</a></li>
					<li><a href="#">지식인</a></li>
					<li><a href="shop.html">쇼핑</a></li>
					<li><a href="webtoon.html">웹툰</a></li>
				</ul>

			</div>
		</div>

	</header>

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

			<div id="news_wrap">
				
				<div class="news_header">
					<h2>뉴스스탠드</h2>

					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
					</div>

				</div>

				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li> ----> li 태그 반복

				</ul>

			</div>

			<div id="blog_wrap">
				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>
					<div class="right_header">
						<span class="count"><strong>1,853</strong> 개의 글</span>
						<span>관심주제 설정</span>
					</div>
				</div>

				<nav class="blog_nav">
					<ul>
						<li><a href="#">엔터1</a></li>
						<li><a href="#">엔터2</a></li>
						<li><a href="#">엔터3</a></li>
						<li><a href="#">엔터4</a></li>
						<li><a href="#">엔터5</a></li>
						<li><a href="#">엔터6</a></li>
						<li><a href="#">엔터7</a></li>
						<li><a href="#">엔터8</a></li>
					</ul>
				</nav>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114"> ----> 반복
								
									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
												<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>

				</div>
			</div>

		</div>

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

    
</body>
</html>

HTML_2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>네이버쇼핑몰</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body id="shop_body">
    <header id="shop_header">
        <div class="shop_header_bg">
            <div id="shop_header_top"></div>
            <div id="shop_header_middle">
                <div class="white_line"></div>
                <div class="shop_container">
                </div>
            </div>
        </div>
        <nav>
            <div class="shop_container">
                <ul class="shop_nav_left">
                    <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>
                    <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>
        </nav>
    </header>
    <main role="main" id="shop_main">
        <div class="shop_container">
            <div class="list_wrap">
                <div class="list_item">
                    <div class="category_wrap w-100 h-100 shop_border">
                        <div class="category_left">
                            <div class="category_hamburger">
                                <span class="h3_span span1"></span>
                                <span class="h3_span span2"></span>
                                <span class="h3_span span3"></span>
                            </div>
                            <h3>CATEGORY</h3>
                            <ul>
                                <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>
                                <li><a href="#">생활/건강</a></li>
                                <li><a href="#">여가/생활편의</a></li>
                                <li><a href="#">면세점</a></li>
                                <li><a href="#">도서</a></li>
                            </ul>
                        </div>
                        <div class="category_right">
                            <div class="category_right_top">
                                <div class="category_info">
                                    <span class="headline">인기상품</span>
                                    <h3>
                                        견고함의 차이 <br>
                                        세라믹 식탁 세트
                                    </h3>
                                    <span class="price">308,800원</span>
                                    <img src="https://via.placeholder.com/140x150">
                                </div>
                            </div>
                            <div class="category_right_bottom">
                                <span class="headline">추천태그</span>
                                <div class="tag_wrap">
                                    <span class="tag"><a href="#">#유아마스크</a></span>
                                    <span class="tag"><a href="#">#하객원피스</a></span>
                                    <span class="tag"><a href="#">#멀티밤</a></span>
                                    <span class="tag"><a href="#">#서큘레이터</a></span>
                                    <span class="tag"><a href="#">#유아마스크</a></span>
                                    <span class="tag"><a href="#">#하객원피스</a></span>
                                    <span class="tag"><a href="#">#멀티밤</a></span>
                                    <span class="tag"><a href="#">#서큘레이터</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_item banner">
                    <div class="w-100 h-100 shop_border">
                        <img src="https://via.placeholder.com/306x494">
                    </div>
                </div>
                <div class="list_item"></div>
                <div class="list_item"></div>
                <div class="list_item"></div>
                <div class="list_item"></div>
                <div class="list_item"></div>
                <div class="list_item"></div>
            </div>
        </div>
    </main>
    
    
</body>
</html>

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-direction: row; */
    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: nowrap;
	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: nowrap;
	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 .product_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 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;
	margin: 0 8px;
	background-color: #e4e8eb;

	vertical-align: -1px;
}

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

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

/*쇼핑 페이지*/
#shop-body {
    background-color: #E9ECEF;
}

.shop-container {
    width: 1300px;
    margin: 0 auto;
}

.shop-border {
	border: solid 1px #ced2d7
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

/*shop_header*/
#shop-header #shop-header-top {
    width: 100%;
    height: 36px;
    /*background-color: #03c75a;*/
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

#shop-header #shop-header-middle {
    width: 100%;
    height: 66px;
    /*background-color: #03c75a;*/
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.white-line {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

.shop-header-bg {
    background: url(https://ssl.pstatic.net/imgshopping/cnsv/p/im/common/gnb/bg_gheader_v2.jpg)no-repeat 100% 0;
}

.shop-container {
    width: 1280px;
    margin: 0 auto;
}

#shop-header nav {
    width: 100%;
	background-color: #ffffff;
    border-top: solid 1px #e8e8e8;
    border-bottom: solid 1px #e8e8e8;
}

#shop-header nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 13px 0 8px 0;
}

#shop-header nav ul li {
    margin-right: 16px;
    font-size: 12px;
    line-height: 12px;
}

ul, li {
  list-style : none;
}

a {
  text-decoration : none;
  color : #000;
}

#shop-main .list-wrap {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#shop-main .list-item {
    position: relative;

    width: 308px;
    height: 496px;
    background-color: transparent;
    margin-bottom: 20px;
}

#shop-main .list-item.banner img {
    width: 100%;
    height: 100%;
}

#shop-main .list-item .category-wrap {
    overflow: hidden;
}

#shop-main .list-item .category-wrap .category-left {
    float: left;
    width: 124px;
    background-color: #333949;
}

#shop-main .list-item .category-wrap .category-left h3 {
    padding: 14px 0 14px 13px;
    border-bottom: 1px solid #2b313f;
    
    font-size: 13px;
    color: rgba(255, 255, 255, 0.46);
    font-weight: 700;
}

#shop-main .list-item .category-wrap .category-left ul li a {
    display: block;
    padding: 7px 8px;

    font-size: 13px;
    color: rgba(255, 255, 255, 0.46);
    font-weight: 700;
}

#shop-main .list-item .category-wrap .category-right {
    float: right;
    width: 182px;
    background-color: #ffffff;
}
#shop-main .list-item .category-right .category-right-top {
    height: 306px;
    border-bottom: 1px solid #e7e7e7;
    text-align: center;
}
#shop-main .list-item .category-right-top .category-info {
    padding: 20px 0;
    text-align: center;
}

#shop-main .list-item .category-right-top .headline,
#shop-main .list-item .category-right-bottom .headline {
    display: inline-block;
    margin-bottom: 7px;

    font-size: 12px;
    border: solid 1px #00ab33;
    color: #00ab33;
}

#shop-main .list-item .category-right-top .category-info h3 {
    font-size: 18px;
}

#shop-main .list-item .category-right-top .category-info .price {
    font-size: 16px;
    color: skyblue;
}

#shop-main .list-item .category-right-top .image-wrap {
    text-align: center;
}
#shop-main .list-item .category-right-bottom {
    padding-top: 20px;
    text-align: center;
}

#shop-main .list-item .category-right-bottom .tag-wrap .tag {
    display: inline-block;
    width: auto;
    max-width: 75px;
	height: 24px;
    background-color: #e8eef4;

    margin: 6px 1px 0 1px;
    padding: 0 5px;
    
	line-height: 26px;
    font-size: 12px;
    line-height: 24px;
    color: #666;
    vertical-align: top;
}


#shop-main .list-item .list-half {
    width: 100%;
    height: 240px;
    background-color: #ffffff;
}

#shop-main .list-item .list-half.list-half-top {
    position: absolute;
    left: 0;
    top: 0;
}

#shop-main .list-item .list-half.list-half-bottom {
    position: absolute;
    left: 0;
    bottom:0;
}

#shop-main .list-item .list-half .list-half-header {
    position: relative;
    width: 100%;
    height: 62px;
    background-color: #ffffff;
    padding-top: 10px;
    border-bottom: solid 1px #e7e7e7;

    text-align: center;
}

#shop-main .list-item .list-half .list-half-header .half-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.5);
}

#shop-main .list-item .list-half .list-half-header.list-half-bg {
    padding-top: 0;
    border-bottom: solid 1px #ffffff;
    background-image: url(../img/checkbox.png);
}

#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
    position: relative;
    display: inline-block;

    padding: 2px 4px;
    border: solid 1px #fff;

    color: #fff;

    top: 50%;
    transform: translateY(-50%);
}

#shop-main .list-item .list-half .list-half-header .headline {
    display: inline-block;
    border: solid 1px #000000;
    margin-bottom: 5px;
    padding: 2px 4px;
}

#shop-main .list-item .list-half .list-half-header h3 {
    font-size: 14px;
}

#shop-main .list-item .list-half .content-lists {
    overflow: hidden;
    height: 177px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li {
    float: left;
    width: 33.33%;
    height: 100%;
    border-right: solid 1px #f0f0f0;

    text-align: center;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li:last-child {
    border-right: none;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li img {
    width: 100%;
    margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li h3 {
    font-size: 13px;
    margin-bottom: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-3 li span {
    font-size: 12px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 {
    display: flex;
    justify-content: center;
    padding-top: 11px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li {
    width: 130px;
    height: 150px;
    margin-right: 8px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li:last-child {
    margin-right: 0;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap {
    position: relative;
    width: 130px;
    height: 90px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap .discount {
    position: absolute;
    display: inline-block;

    width: 42px;
    height: 42px;
    background-color: orangered;
    border-radius: 50%;

    font-size: 14px;
    color: #ffffff;
    line-height: 42px;
    text-align: center;

    top: 6px;
    right: 5px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li h3 {
    margin-top: 5px;
    font-size: 13px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .price {
    color: #62a7ee;
    font-size: 12px;
}

#shop-main .list-item .list-half .content-lists.content-lists-2 li .price em {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
}

#shop-main .list-item .list-row-3 {
    background-color: #ffffff;
    border-top: none;
}
#shop-main .list-item .list-row-3 li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: solid 1px #f0f0f0;
    padding: 14px 19px 11px 19px;
}

#shop-main .list-item .list-row-3 li:last-child {
    border-bottom: none;
}

#shop-main .list-item .list-row-3 li .list-image-wrap {
    width: 90px;
    height: 60px;
    margin-right: 10px;
}

#shop-main .list-item .list-row-3 li .list-image-wrap img {
    width: 100%;
    height: 100%;
}

#shop-main .list-item .list-row-3 li .list-row-info span {
    font-size: 12px;
    color: #62a7ee;
}

#shop-main .list-item .list-row-3 li .list-row-info h3 {
    font-size: 13px;
}

어려운점

  • float 와 vertical-align 개념이 혼동이 옴

  • 코드가 길어지며 오타발생시 찾기 너무 어려움

해결방법

  • 주석을 달아가면서 하다가 너무 오래 걸려서 오류 이후 부분부터 천천히 작업함

  • 복습했지만 여전히 헷갈림

학습소감

  • 기본기가 부족한데 실습을 계속하니 더 헷갈리는 것 같기도 하고 반대로 실습을 하면서 이해가 되는 것 같기도 해서 책을 구매해서 봐야겠다고 생각함
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 17

다음 포스트

[dg_ai_school] 웹프로그래밍 19

0개의 댓글

관련 채용 정보