[dg_ai_school] 웹프로그래밍 19

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

webprogramming

목록 보기
19/51

학습내용

HTML

				<div class="list-item">
                    <div class="list-half list-half-top shop-border">
                        <div class="list-half-header list-half-bg">
                            <div class="half-over-lay"></div>
                            <h3 class="shop-title-border">백화점 상품 그대로</h3>
                        </div>
                    </div>
                    
                    <ul class="content-lists content-lists-3">
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                    </ul>

                </div>

                    <div class="list-half list-half-bottom shop-border">
                        <div class="list-half-header">
                            <span class="headline">Hot deal</span>
                            <h3>백화점 상품 그대로</h3>
                        </div>
                    </div>
                    <ul class="content-lists content-lists-2">
                        <li>

                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                        <li>
                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                    </ul>

                </div>

                <ul class="list-row-3 shop-border">
                    <li>
                        <div class="list-image-wrap shop-border">
                            <img src="https://via.placeholder.com/90x60" alt="">
                        </div>
                        
                        <div class="list-row-info">
                            <span>멜론티켓</span>
                            <h3>흥행 돌풍 마마, 돈 크라이</h3>
                        </div>
                    </li>
                    <li>
                        <div class="list-image-wrap shop-border">
                            <img src="https://via.placeholder.com/90x60" alt="">
                        </div>
                        
                        <div class="list-row-info">
                            <span>멜론티켓</span>
                            <h3>흥행 돌풍 마마, 돈 크라이</h3>
                        </div>
                    </li>
                    <li>
                        <div class="list-image-wrap shop-border">
                            <img src="https://via.placeholder.com/90x60" alt="">
                        </div>
                        
                        <div class="list-row-info">
                            <span>멜론티켓</span>
                            <h3>흥행 돌풍 마마, 돈 크라이</h3>
                        </div>
                    </li>
                </ul>

            </div>
          
            <div class="list-item">

                <div class="list-half list-half-top shop-border">
                    <div class="list-half-header list-half-bg">
                        <div class="half-overlay"></div>
                        <h3 class="shop-title-border">백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-3">
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                    </ul>

                </div>

                <div class="list-half list-half-bottom shop-border">
                    <div class="list-half-header">
                        <span class="headline">hot deal</span>
                        <h3>백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-2">
                        <li>

                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                        <li>
                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="list-item">

                <div class="list-half list-half-top shop-border">
                    <div class="list-item">

                        <div class="list-half list-half-top shop-border">
                            <div class="list-half-header">
                                <span class="headline">hot deal</span>
                                <h3>백화점 상품 그대로</h3>
                            </div>
    
                            <ul class="content-lists content-lists-2">
                                <li>

                                    <div class="content-image-wrap shop-border">
                                        <img src="https://via.placeholder.com/130x90" alt="">
                                        <span class="discount">50%</span>
                                    </div>
                                    
                                    <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                                    <span class="price"><em>21,900</em>원</span>
                                </li>
                                <li>
                                    <div class="content-image-wrap shop-border">
                                        <img src="https://via.placeholder.com/130x90" alt="">
                                        <span class="discount">50%</span>
                                    </div>
                                    
                                    <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                                    <span class="price"><em>21,900</em>원</span>
                                </li>
                            </ul>
    
                        </div>
    
                        <div class="list-half list-half-bottom shop-border">
                            <div class="list-half-header">
                                <span class="headline">hot deal</span>
                                <h3>백화점 상품 그대로</h3>
                            </div>
    
                            <ul class="content-lists content-lists-2">
                                <li>

                                    <div class="content-image-wrap shop-border">
                                        <img src="https://via.placeholder.com/130x90" alt="">
                                        <span class="discount">50%</span>
                                    </div>
                                    
                                    <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                                    <span class="price"><em>21,900</em>원</span>
                                </li>
                                <li>
                                    <div class="content-image-wrap shop-border">
                                        <img src="https://via.placeholder.com/130x90" alt="">
                                        <span class="discount">50%</span>
                                    </div>
                                    
                                    <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                                    <span class="price"><em>21,900</em>원</span>
                                </li>
                            </ul>
    
                        </div>
    
                    </div>

                </div>

                <div class="list-half list-half-bottom shop-border">
                    <div class="list-half-header list-half-bg">
                        <div class="half-overlay"></div>
                        <h3 class="shop-title-border">백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-3">
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="list-item">

                <div class="list-half list-half-top shop-border">
                    <div class="list-half-header">
                        <span class="headline">hot deal</span>
                        <h3>백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-2">
                        <li>

                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                        <li>
                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                    </ul>

                </div>

                <div class="list-half list-half-bottom shop-border">
                    <div class="list-half-header">
                        <span class="headline">hot deal</span>
                        <h3>백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-2">
                        <li>

                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                        <li>
                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                    </ul>

                </div>

            </div>
            <div class="list-item">

                <div class="list-half list-half-top shop-border">
                    <div class="list-half-header list-half-bg">
                        <div class="half-overlay"></div>
                        <h3 class="shop-title-border">백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-3">
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                        <li>
                            <img src="https://via.placeholder.com/102x100" alt="">
                            <h3>생활공작소 과탄산소다</h3>
                            <span>1.5kg x 4입</span>
                        </li>
                    </ul>

                </div>

                <div class="list-half list-half-bottom shop-border">
                    <div class="list-half-header">
                        <span class="headline">hot deal</span>
                        <h3>백화점 상품 그대로</h3>
                    </div>

                    <ul class="content-lists content-lists-2">
                        <li>

                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                        <li>
                            <div class="content-image-wrap shop-border">
                                <img src="https://via.placeholder.com/130x90" alt="">
                                <span class="discount">50%</span>
                            </div>
                            
                            <h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
                            <span class="price"><em>21,900</em>원</span>
                        </li>
                    </ul>

                </div>

            </div>

        </div>

        <div class="brand-wrap shop-border">
            <ul class="brand-lists">
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
                <li><img src="https://via.placeholder.com/64x64" alt=""></li>
            </ul>
        </div> 

    </div>
</main>

<footer id="shop-footer">
    <div class="shop-container">
        <div class="policy-wrap">
            <span>네이버 이용약관</span>
            <span>네이버페이 이용약관</span>
            <span>개인정보처리방침</span>
            <span>법적고지 및 주의사항</span>
            <span>입점안내</span>
            <span>쇼핑윈도 노출안내</span>
            <span>네이버 이용약관</span>
            <span>네이버 이용약관</span>
            <span>네이버 이용약관</span>
            <span>네이버 이용약관</span>
        </div>
        <p>네이버는 통신판매 당사자가 아닙니다. 거래에 관한 의무와 책임은
            판매자에게 있습니다.
        </p>
    </div>

</footer>


</body>
</html>

HTML

CSS

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

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

img {
	vertical-align: middle;
}

button	{
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

/* 네이버 상단 영역 */
#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;

	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;
}

#main-header .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}

#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;

	font-size: 22px;
	border: none;
}

#main-header .search_wrap input:focus {
	outline: none;
}

#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main-header #navbar ul {
	padding: 11px 0;
}

#main-header #navbar ul li {
	display: inline-block;
	margin-right: 5px;
}

#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
	font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;
}

/* 네이버 왼쪽 영역 */
main {
	overflow: hidden;  /* 자식의 높이값이 부모에게 영향을 줌 */
	padding-top: 20px;
}

main #main_left {
	float: left;
	width: 750px;
	/*background-color: yellow;*/
}

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

	/*background-color: yellow;*/
}

/* 배너, 뉴스스탠드 */
main #banner_wrap {
	width: 750px;
	height: 135px;
	background-color: black;

	margin-bottom: 12px;
}

main #news_wrap .news_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 22px 0 16px 0;
}

main #news_wrap .news_header h2 {
	font-size: 14px;
	font-weight: 700px;
}

main #news_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 60px;
}

main #news_wrap .news_header .news_btn_wrap button {
	width: 15px;
	height: 15px;
	background-color: blue;
}

main #news_wrap .news_lists {
	overflow: hidden;
	border: solid 1px #dae126;
}

main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid	1px #e4e8eb;

	text-align: center;
}

main #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}

main #news_wrap .news_lists .news_list:nth-child(19),
main #news_wrap .news_lists .news_list:nth-child(20),
main #news_wrap .news_lists .news_list:nth-child(21),
main #news_wrap .news_lists .news_list:nth-child(22),
main #news_wrap .news_lists .news_list:nth-child(23),
main #news_wrap .news_lists .news_list:nth-child(24) {
	border-bottom: none;
}

main #news_wrap .news_lists .news_list img {
	position: relative;

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

/* 오늘 읽을만한 글 */
main #blog_wrap {
	padding-top: 35px;
}

main #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 17px;
}

main #blog_wrap .blog_header .left_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main #blog_wrap .blog_header .left_header h3 {
	font-size: 14px;
	margin-right: 8px;
}

main #blog_wrap .blog_header .left_header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

main #blog_wrap .blog_header .right_header span {
	font-size: 12px;
	color: grey;
}	

main #blog_wrap .blog_header .right_header .count strong {
	color: #000000;
}

main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;
}

main #blog_wrap .blog_nav ul li a {
	display: inline-block;
	width: 100%;
	height: 100%;

	line-height: 49px;
	text-align: center;
}

main #blog_wrap .blog_list_wrap {
	padding-top: 18px;
	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
	margin-bottom: 18px;
}

main #blog_wrap .blog_list_wrap li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
	width: 170px;
	height: 114px;
	margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
	width: 559px;
	padding-right: 47px;
}


main #blog_wrap .blog_list_wrap li .blog_list_info span {
	font-size: 12px;
	color: #35ae5e;
}

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
	font-size: 12px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {
	color: #505050;
}

/* 미디어(동영상) */
main #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info {
	padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info span {
	font-size: 12px;
}


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


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

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

	width: 100%;
	height: 62px;
	background-color: #ffffff;

	text-align: center; 
	/* 여기에 들어가는 글은 모두 중앙정렬 */

	padding-top: 13px;
}

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

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

#shop-main .list-item .list-half .list-half-header .half-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: : rgba(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;
	border: solid 1px #ffffff;
	padding: 2px 4px;

	color: #ffffff;
	/*font-size: 14px; 위쪽에 있어서 삭제함*/

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

#shop-main .brand-wrap {
    background-color: #ffffff;
}

#shop-main .brand-wrap .brand-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px;
}

#shop-main .brand-wrap .brand-lists li {
    width: 64px;
    height: 64px;
}

#shop-main .brand-wrap .brand-lists li img {
    width: 100%;
    height: 100%;
}

#shop-footer {
    padding-bottom: 27px;
    text-align: center;
}

#shop-footer .policy-wrap {
    border-top: solid 2px #5d5d5d;
    padding-top: 27px;
    margin-bottom: 12px;
}

#shop-footer .policy-wrap span {
    font-size: 12px;
}

#shop-footer .policy-wrap span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 8px;
    background-color: #d7d7d7;
    vertical-align: -1px;
}

#shop-footer .policy-wrap span:first-child:before {
    content: initial;
}

#shop-footer p {
    font-size: 12px;
    color: #888;
    margin-bottom: 11px;
}

어려운점

  • 코드 오타가 나면 찾기 어려움

  • 3차원과 2차원 그리고 3차원과 3차원의 형제 개념이 무슨 말인지 헷갈림

해결방법

  • 앞 부분의 강의를 복습함

학습소감

  • 코드가 길어지고 개념이 혼동이 와서 헷갈리는 상태
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 18

다음 포스트

[dg_ai_school] 웹프로그래밍 20

0개의 댓글

관련 채용 정보