쇼핑몰 따라만들기

https://darles.co.kr/

서유리의 옷장 다를

 

 style CSS를 적용해서 
쇼핑몰 메인페이지 따라만들기 

 

따라 만들 메인 페이지

 

 

시작!

 

 

코드에 대한 설명은 주석으로 달았다. 

 

 

CSS

<style>

<style>
        body {
            font-size: 0.75rem;             /* 사이트의 기본 글자 크기를 지정함 단 HTML의 기본값 유지*/
            font-family: 'Noto Sans KR';    /* 구글제공 폰트 , 기본 폰트로 많이 활용*/
            margin: 0;                      /* body에도 기본 margin, padding이 있어서 없애주기 */
            padding: 0;             
            overflow-y: scroll;             /* 세로 스크롤바가 항상 나타나도록 설정함*/
        }
        .frame {
            width: 1260px;               /* class="frame" 인 모든 요소는 일정한 너비와 가운데 정렬*/
            margin: 0 auto;             
        }
        .sb {                               /* 양쪽으로 배치해야 할 요소에 부여할 클래스 */
            display: flex;
            justify-content: space-between;
        }
        ul{                                 /* 목록을 출력할 때 */
            list-style: none;               /* 항목의 가운데 점을 없애고 */
            display: flex;                  /* 내부 요소를 가운데로 배치하고 */
            padding: 0;                     /* ul 태그는 왼쪽 패딩 20px를 기본값으로 가지기 때문에 없애준다. */
        }
        li{
            padding: 0 7px;                 /* li는 상하내부 여백은 없고, 좌우여백은 7px  */
        }
        #top {
            border-bottom: 1px solid #e8e8e8;           /* 아래쪽 테두리 */
            position: sticky;                           /* 세로 스크롤 시 일정 높이에 도달하면 고정 */
            top: 0;                                     /* 고정되는 높이는 top : 0 */
            background-color: rgba(255, 255, 255,0.7);
        }
        #nav {                                       
            border-bottom: 1px solid #e8e8e8;        /* 아래쪽 테두리 */
            font-size: 0.8rem;                         /* 주요 메뉴는 살짝 크게 (기본 0.75rem) */
            position: sticky;                        /* 세로 스크롤 시 일정 높이에 도달하면 고정 */
            top: 45px;                                 /* 고정되는 높이는 top : 45px (top height) */
            background-color: rgba(255, 255, 255,0.7);
        }
        .cartNumber {                           
            background-color: #e8e8e8;          /* 배경 색상*/
            border-radius: 50%;             /* 크기에 상관없이 원형으로 표시  */
            display: inline-block;          /* 크기가 지정되지 않아서 inline-block으로 변경  */
            margin: 0;
            padding: 0;
            width: 20px;
            height: 20px;
            text-align: center;            /* 원형 모양에서 글자가 가운데 위치하도록 */
            color: white;
            font-weight: bold;
        }
        h1{
            text-align: center;
            font-size: 3em;
        }
        .icons{                     /* 페이스북, 인스타, 유튜브 아이콘을 가로로 배치하기 위해서 고정 */
            display: flex;
        }
        .icon {                     /* 각 아이콘의 공통속성 */
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            background-color: #dfd6d6;      /* 모두 같은 배경색상 */
            margin: 0px 5px;
            border-radius: 50%;             /* 둥근모양 */
            color: white;
            cursor: pointer;                
        }
        /* n번째 아이콘에 마우스를 올리면 각각다른  배경색상을 가진다.  */
        .icon:nth-child(1):hover { background-color: blue;}
        .icon:nth-child(2):hover { background-color: plum;}
        .icon:nth-child(3):hover { background-color: red;}


        .search > div.input {           /* 검색창을 둘러싸는 테두리 */
            border: 1px solid #dadada;  /* 입력창과 돋보기 버튼을 묶어주는 테두리 만들기 */
            padding: 5px;
        }
        .search > div.input > input {   /* 실제 검색어 입력창 */
            all: unset;                 /* 모든 속성 초기화(테두리 사라짐) */
        }
        #logo {
            border-bottom: 1px solid #e8e8e8;
            padding: 10px;          /* 상하 내부 여백을 부여 (nav 랑 딱 붙어있어서 간격주기) */
        }
       
        #nav > .frame > ul.sb {
            width: 90%;             /* 비율로 너비를 지정. 상위 요소로부터 상속받은 너비의 비율  */
            margin: auto;
        }
        #nav > .frame > ul.sb > li{
            padding: 6px 12px;
            line-height: 46px;
        }
        #nav > .frame > ul.sb > li:first-child{
            height: 100%;
            border-left: 1px solid #e8e8e8;
            border-right: 1px solid #e8e8e8;
            font-size: 2.5em;
        }
        #nav > .frame > ul.sb > li:nth-child(2){
            color: hotpink;
        }
        #banner {
            /* 내컴퓨터에 이미지가 없어도 url로 지정가능  */
            background-image: url('https://darles.co.kr/web/upload/NNEditor/20210504/0bf1a699ea515735d0841f86daa11cc0.jpg');
            height: 650px;
        }
        #remocon{
            position: fixed;        /* 스크롤에 영향을 받지않는 고정된 fixed 위치 position  */
            top: 50%;               /* 상단으로부터의 거리 (border-top) */
            transform: translate(0, -50%); /* 위치 재조정 (크기의 절반만큼 위로 이동) */
            right: 0;                   /* 오른쪽 기준으로 거리가 0 (붙어있다) */
        }
        #remocon > ul {
            display: block;
            background-color: white;        /* 다른 요소와 겹칠때를 대비하여 배경색 지정  */
            z-index: 1;                         /* 다른 요소와 겹친다면 위쪽에 배치되도록 */ 
        }   
        #remocon > ul > li {
            box-sizing: border-box;         /* 크기 지정을 수월하게 하기 위해 border-box  */
            width: 40px;
            height: 40px;
            border: 1px solid #d6d6d6;
            display: flex;                  /* 내부 요소(글자)를 한가운데 지정하기 위한 flex */
            justify-content: center;        /* 좌우 가운데 정렬  */
            align-items: center;            /* 상하 가운데 정렬  */
            font-size: 1rem;                /* HTML (font-size  : 16px) 기준 1배 */
            margin-bottom: -1px;            /* 상하단 테두리가 붙어서 2px로 보여서 조금 위로 당긴다.  */
        }
        #remocon > ul > li:first-child {    /* li중에서 첫번째 요소 */
            background-color: #373737;
            color: white;
        }
        #remocon > ul > li:nth-child(7){  /* li중에서 n번째 (7) 요소  */
            background-color: #ffe000;
        }
        #remocon > ul > li:last-child{      /* li중에 마지막 번째 요소  */
            height: 60px;
        }
        #content {
            height: 100vh;
        }
       
    </style>

 

 

HTML

<body>

<body>

<div id="top">
    <div class="sb frame">
         <ul>
            <li>LOGIN</li>
            <li>JOIN US</li>
            <li>CART <span>0</span></li>
            <li>ORDER</li>
            <li>MT PAGE</li>
            <li>BOOKMARK</li>
        </ul>
    

        <ul>
            <li>공지사항</li>
            <li>이벤트</li>
            <li>상품문의</li>
            <li>상품후기</li>
        </ul>
    </div>
</div>

    <div id="logo">
        <div id="title">
            <h1>D'ARLES</h1>
        </div>
        <div class="sb frame">
            <div class="icons">
                <div class="icon">f</div>
                <div class="icon">ㅁ</div>
                <div class="icon">▶️</div>
            </div>
            <div class="search">
                <div class="input">
                    <input type="text" autocomplete="off">
                    🍳
                </div>
            </div>
        </div>
    </div>
    
    <div id="nav">
        <div class="frame ">
            <ul class="sb">
                <li>🟰</li>
                <li>RONA Universe</li>
                <li>남성의류</li>
                <li>아우터</li>
                <li>탑</li>
                <li>드레스</li>
                <li>바텀</li>
                <li>악세사리</li>
            </ul>
        </div>
    </div>

    <div id="banner" class="frame"></div>

    <div id="remocon">
        <ul>
            <li><</li>
            <li>🍳</li>
            <li>🚛</li>
            <li>🛒</li>
            <li>❣️</li>
            <li>🕛</li>
            <li>🗯️</li>
            <li>
                 ⬆️ <br> ⬇️
            </li>
        </ul>
    </div>
    <div id="content" class="frame"></div>
</body>

 

구현된 웹화면