[개발일지 13일차] Layout 실습, 쇼핑몰 홈페이지

MSJ·2022년 5월 19일
CSShtmlweb개발일지
0

WEB

목록 보기
13/41
post-thumbnail

2022-05-19

어제에 이어 실습을 계속 한다.

shopping mall home


N사 쇼핑몰 페이지를 연습.
매우 다양한 코드가 총집합되어 쓰였다.

예제4 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body id="shop-body">
    <header id="shop-header">
        <div id="shop-header-gnb"></div>
        <div id="shop-header-middle"></div>
        <nav>
            <div class="shop-container"> <!-- 콘텐츠 가운데 정렬 -->
                <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">백화점윈도</a></li>
                <li><a href="#">아울렛윈도</a></li>
                <li><a href="#">스타일윈도</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <section id="shop-main">
        <div id="shop-container"> <!-- 콘텐츠 가운데 정렬 -->
            <div class="list-wrap">
                
                <div class="list-item"> <!-- 첫 번째 list-item -->
                    <div class="category-wrap shop-border"> <!-- 공간 테두리 만들기 -->
                        <div class="category-left">
                            <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="#">1&nbsp;/&nbsp;3</a></li>
                            </ul>
                        </div>
                    
                        <div class="category-right">
                            <div class="category-right-top"><!-- 첫 번째 박스 오른쪽 영역 top-->
                                <div class="category-info">
                                    <span class="haedline">인기상품</span>
                                    <h3>견고하고 아름다운<br>도요사사키 레몬 착즙기</h3>
                                    <span class="price">6,500원</span>
                                </div>
                                <div class="image-wrap">
                                    <img src="https://via.placeholder.com/140x160">
                                </div>
                            </div>  <!-- 첫 번째 박스 오른쪽 영역 top end -->
                            <div class="category-right-bottom"> <!-- 첫째박스 오른쪽 bottom -->
                                <span class="haedline">추천태그</span>
                                <div class="tag-wrap">
                                    <span class="tag">#휴대용CD플레이어</span>
                                    <span class="tag">#반티</span>
                                    <span class="tag">#스승의날 선물</span>
                                    <span class="tag">#키링</span>
                                    <span class="tag">#휴대용CD플레이어</span>
                                    <span class="tag">#반티</span>
                                    <span class="tag">#스승의날 선물</span>
                                    <span class="tag">#키링</span>
                                </div>
                            </div> <!-- 첫째박스 오른쪽 bottom END -->
                        </div>
                    </div>   
                    </div> 
                
                <div class="list-item"><!-- 두 번째 list item -->
                    <div class="shop-border banner w-100 h-100">
                        <img src="https://via.placeholder.com/150">
                    </div>
                </div> <!-- 두 번째 list item END-->

                <div class="list-item"> <!-- 세 번째 list item -->
                    <div class="list-half list-half-top shop-border">
                        <div class="list-half-header list-half-bg">
                            <div class="half-overlay">
                                <h2 class="shop-title">브랜드직영관에선 최대 10% 적립</h2>
                            </div>
                        </div>
                        <ul class="content-lists content-lists-3">
                            <li>
                                <img src="https://via.placeholder.com/102x100">
                                <h3>사이오스 샴푸<br>트리트먼트</h3>
                                <span>사은품 증정</span>
                            </li>
                            <li>
                                <img src="https://via.placeholder.com/102x100">
                                <h3>스위퍼 스타터킷<br>세트</h3>
                                <span>빠른배송</span>
                            </li>
                            <li>
                                <img src="https://via.placeholder.com/102x100">
                                <h3>넬리 소다세제<br>+표백제</h3>
                                <span>스마트팟증정</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">
                                <img src="https://via.placeholder.com/130x90">
                                <span class="discount">25%</span>
                                </div>
                                <h3>대용량으로 쟁여요</h3>
                                <span class="price"><em>11,900</em>원</span>
                            </li>
                            <li>
                                <div class="content-image-wrap">
                                <img src="https://via.placeholder.com/130x90">
                                <span class="discount">25%</span>
                                </div>
                                <h3>대용량으로 쟁여요</h3>
                                <span class="price"><em>11,900</em>원</span>
                            </li>
                        </ul>
                    </div>
                </div>


                <div class="list-item"> <!-- 네 번째 list item -->
                
                </div>
            </div>
        </div>
    </section>
</body>
</html>

예제4 css style sheet

<style>
@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
#shop-body{
    background-color: #e9ecef;
}
#shop-container{
    width: 1300px;
    margin: 0 auto;
}
/* 상단 gnb 영역 */
#shop-header #shop-header-gnb{
    width: 100%;
    height: 36px;
    background-color: #03c75a;
    border-bottom: 1px solid #e8e8e8;
}
#shop-header #shop-header-middle{
    width: 100%;
    height:66px;
    background-color: #03c75a;
}
#shop-header nav{
    width:100%;
    border-top: solid 1px #e8e8e8;
    border-bottom: solid 1px #e8e8e8;
    background-color: #fff;
}
/* nav 메뉴를 가로로 정렬 */
#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;
}
/* list-item box 생성 */
#shop-main .list-item{
    width: 308px;
    height: 496px;
    background-color: #777;
    margin-bottom: 20px;
    position: relative; /*세 번째 list에 absolute 배치를 위해 지정*/
}
/* list-item 정렬 */
#shop-main .list-wrap{
    display: flex;
    flex-wrap: wrap; /* 화면이 부족하면 떨어지겠다. */
    justify-content: space-between; /* 정렬, 같은 비는 공간을 가짐 */
}
/* 카테고리의 테두리 만들기 */
.shop-border{
    border: #ced2d7 1px solid;
}
/* 첫 번째 박스 정렬 : float */
#shop-main .list-item .category-wrap{
    overflow: hidden;
}
/**** 첫 번째 박스 왼쪽 ****/
#shop-main .list-item .category-wrap .category-left {
    width:124px;
    height: 496px;
    float: left;
    background-color: #333949;
}
/* 첫 번째 박스 왼쪽 글씨 */
#shop-main .list-item .category-wrap .category-left h3{
    border-bottom: 1px solid #2b313f;
    color:rgba(255, 255, 255, 0.46);
    padding: 14px 0 14px 13px;
    font-size: 13px;
}
#shop-main .list-item .category-wrap .category-left a{
    display: block; /* 영역에서도 링크 사용 */
    color:rgba(255, 255, 255, 0.46);
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #333949;
    margin-bottom: 4px;
    font-weight: 700; /* 100~900 */
}
/**** 첫 번째 박스 오른쪽 ****/
#shop-main .list-item .category-wrap .category-right{
    width: 182px;
    height: 100%;
    float: right;
    background-color: #fff;
}
/* 오른 쪽 위 박스 */
#shop-main .list-item .category-wrap .category-right .category-right-top{
    width:100%;
    height: 306px;
    border-bottom: solid 1px #e7e7e7;
}
#shop-main .list-item .category-right-top .category-info,
#shop-main .list-item .category-right-bottom{
    padding: 20px 0;
    text-align: center;
}
#shop-main .list-item .category-right-top .category-info h3{
    font-size: 16px;
}
#shop-main .list-item .category-right-top .category-info .price{
    font-size: 15px;
    color: skyblue;
}
#shop-main .list-item .category-right-top .category-info .haedline,
#shop-main .list-item .category-right-bottom .haedline{
    font-size: 12px;
    border: solid 1px #00ab33;
    color: #00ab33;
    display: inline-block; /* span은 inlin 속성이라 margin, height, width 못가짐 */
    margin-bottom: 7px;
}
#shop-main .list-item .category-right-top .image-wrap{
text-align: center;
}
/* 오른쪽 아래 박스 */
#shop-main .list-item .category-right-bottom .tag{
    background-color: #e8eef4;
    color: #666;
    font-size: 12px;
    display: inline-block;
    padding: 0 5px;
    margin: 6px 1px 0 1px;
    width: auto;
    max-width: 110px;
    height: 24px;
    line-height: 24px;
    vertical-align: top;
}

/********** 두 번째 list-item **********/
.w-100{
    width: 100%;
}
.h-100{
    height: 100%;
}
#shop-main .list-item .banner img{
    width: 100%;
    height: 100%;
}

/********** 세 번째 list-item **********/
/**** 위쪽  공간분할 ****/
#shop-main .list-item .list-half{
    width: 100%;
    height: 240px;
    background-color: #fff;
}
/* 상하 박스 배치 #shop-main .list-item (부모)에서 position:relative 설정함 */
#shop-main .list-item .list-half .list-half-top{
    position: absolute; /* 부모 박스 내에서만 위치를 이동하기 위해. 이 설정이 없으면 브라우저 기준으로 움직여야함 */
    left:0;
    top:0;
    background-color: #fff;
}#shop-main .list-item .list-half .list-half-bottom{
    position: absolute;
    left:0;
    top:0;
    background-color: #fff;
}
#shop-main .list-item .list-half .list-half-header{
    width:100%;
    height:62px;
    background-color: #fff;
    text-align: center;
    padding-top: 10px;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
}
#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-bg{
    padding-top: 0;
    border-bottom: solid 1px #fff;
    background-color: rgba(41, 37, 53, 0.726);;
}
#shop-main .list-item .list-half .list-half-bg .shop-title{
    position: relative;
    top:50%;
    transform: translateY(-50%); /* 세로 가운데 텍스트 정렬 */
    padding: 2px 4px;
    color: #fff;
    border: solid 1px #fff;
    display: inline-block;
}
#shop-main .list-item .list-half .list-half-header h2{
    font-size: 14px; 
}
/* 상단 content-lists 설정 */
#shop-main .list-item .list-half .content-lists{
    overflow: hidden;
    height: 177px;
}
#shop-main .list-item .list-half .content-lists-3 li{
    float:left;
    width:33%;
    height: 100%;
    border-right: 1px solid #f0f0f0;
    text-align: center;
}
#shop-main .list-item .list-half .content-lists-3 li:last-child{
    border-right: none;
}
#shop-main .list-item .list-half .content-lists-3 li img{
    width:100%;
    height: 100px;
    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;
}
/* content0list 상품 2개 */
#shop-main .list-item .list-half .content-lists-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 11px;
}
#shop-main .list-item .list-half .content-lists-2 li{
    width: 130px;
    height: 150px;
    margin-right: 8px;
}
#shop-main .list-item .list-half .content-lists-2 li:last-child{
    margin-right:none;
}
#shop-main .list-item .list-half .content-lists-2 .content-image-wrap{
    position:relative;
    width:130px;
    height:90px;
}
#shop-main .list-item .list-half .content-lists-2 .discount{
    position: absolute;
    display: block;
    top: 6px;
    right: 5px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    background-color: tomato;
    color: #fff;
}
#shop-main .list-item .list-half .content-lists-2 li h3{
    font-size: 13px;
}
#shop-main .list-item .list-half .content-lists-2 li .price{
    color: #62a7ee;
    font-size: 12px;
}
#shop-main .list-item .list-half .content-lists-2 li .price em{
    font-size: 14px;
    font-weight: 700;
    font-style:normal;
}
#shop-main .list-item .list-half-bottom h3{
    font-size: 14px;
    font-weight:900;
    margin-top: 10px;
}
</style>

어려웠던 점

div 영역 잡기다. 같은 단어가 워낙 많이 쓰여서 가독성이 그리 좋지 않은데, 정리가 익숙치 않아서 쓰다가 div가 여러번 꼬여서 어긋난 경험을 해버렸다. 다행히 깨진 레이아웃 열심히 들여다보면서 고쳐냈다.

한가지 남은 문제점은 이거다.

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

분명히 nav영역안에 들어가있고, 이름도 명확히 썼고, 경로도 잘 되어있는데 고쳐지질 않는다.... 뭐가 문젠지 못찾았다.

해결 방법

14일차때 해당 문제를 해결했다.
Style 코드 자체에는 문제가 없으나 html에서 id로 지정한 곳을 class로 잘못쓴 게 원인이었다.
정말... 기본이 중요하다.

소감

확실히 쇼핑몰이 제일 복잡한 레이아웃과 콘텐츠를 많이 가졌다. 상품을 많이 파니까 당연히 공부가 될 수 밖에 없는 것 같다. 아직 10몇일차 밖에 안됐는데 꽤 그럴 듯한 모양새가 나오니 뿌듯하긴 하다.

profile
MSJ
제로부터 시작하는 프로그래밍&코딩
이전 포스트

[개발일지 12일차] Layout 연습, 카페 홈페이지 만들기

다음 포스트

[개발일지 14일차] Layout 실습

0개의 댓글