ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 쇼핑몰 웹 페이지 만들기
      CSS 2023. 6. 22. 15:03

      shopping-mall 1

      <!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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                line-height: 1.5;
                list-style: none;
            }

            .wrap {
                width: 1200px;
                margin: 0 auto;
            }

            .container {
                padding: 10px 0;
                display: flex;
                /* 시작점과 끝점을 배치후 중간 배치 */
                justify-content: space-between;
            }

            .container .tab,
            .container section {
                width: 32%;
            }

            .tab {
                display: flex;
            }

            .tab section {
                width: 49.5%;
            }

            .tab .sec-tit a {
                background: #f0f0f0;
                text-align: center;
                display: block;
            }

            .tab .on .sec-tit a {
                background: tomato;
                color: #fff;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <img src="images/slide.jpg">
            <div class="container">
                <div class="tab">
                    <section class="on">
                        <h2 class="sec-tit">
                            <a href="#">공지사항</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section>
                        <h2 class="sec-tit">
                            <a href="#">갤러리</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <section>
                    <div>
                        <a href="#">
                            <img src="images/banner.jpg">
                        </a>
                    </div>
                </section>
                <section>
                    <div>
                        <ul>
                            <li>
                                <a href="#">나의 계정</a>
                            </li>
                            <li>
                                <a href="#">헤이 음악</a>
                            </li>
                            <li>
                                <a href="#">계정 추가</a>
                            </li>
                            <li>
                                <a href="#">클라우드</a>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </body>

</html>

       

      shopping-mall 2

      <!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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                line-height: 1.5;
                list-style: none;
            }

            .wrap {
                width: 1200px;
                margin: 0 auto;
            }

            .container {
                padding: 10px 0;
                display: flex;
                /* 시작점과 끝점을 배치후 중간 배치 */
                justify-content: space-between;
            }

            .container .tab,
            .container section {
                width: 32%;
            }

            .tab {
                display: flex;
            }

            .tab section {
                width: 49.5%;
            }

            .tab .sec-tit a {
                background: #f0f0f0;
                text-align: center;
                display: block;
            }

            .tab .on .sec-tit a {
                background: tomato;
                color: #fff;
            }
            .sec-goto .lst-goto{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                height: 180px;
            } 
            .lst-goto li {
                width: 45%;
            }
            .lst-goto a{
                height: 85px;
                background: rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                display: flex;
                /* 가로를 중앙 정렬 */
                justify-content: center;
                /* 세로를 중앙 정렬 */
                align-items: center;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <img src="images/slide.jpg">
            <div class="container">
                <div class="tab">
                    <section class="on">
                        <h2 class="sec-tit">
                            <a href="#">공지사항</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section>
                        <h2 class="sec-tit">
                            <a href="#">갤러리</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <section>
                    <div>
                        <a href="#">
                            <img src="images/banner.jpg">
                        </a>
                    </div>
                </section>
                <section class="sec-goto">
                    <div>
                        <ul class="lst-goto">
                            <li>
                                <a href="#">나의 계정</a>
                            </li>
                            <li>
                                <a href="#">헤이 음악</a>
                            </li>
                            <li>
                                <a href="#">계정 추가</a>
                            </li>
                            <li>
                                <a href="#">클라우드</a>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </body>

</html>

       

      shopping-mall 3

      <!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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                line-height: 1.5;
                list-style: none;
            }

            .wrap {
                width: 1200px;
                margin: 0 auto;
            }

            .container {
                padding: 10px 0;
                display: flex;
                /* 시작점과 끝점을 배치후 중간 배치 */
                justify-content: space-between;
            }

            .container .tab,
            .container section {
                width: 32%;
            }

            .tab {
                display: flex;
            }

            .tab section {
                width: 49.5%;
            }

            .tab .sec-tit a {
                background: #f0f0f0;
                text-align: center;
                display: block;
            }

            .tab .on .sec-tit a {
                background: tomato;
                color: #fff;
            }
            .sec-goto .lst-goto{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                height: 180px;
            } 
            .lst-goto li {
                width: 45%;
            }
            .lst-goto a{
                height: 85px;
                background: rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                display: flex;
                /* 가로를 중앙 정렬 */
                justify-content: center;
                /* 세로를 중앙 정렬 */
                align-items: center;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <img src="images/slide.jpg">
            <div class="container">
                <div class="tab">
                    <section class="on">
                        <h2 class="sec-tit">
                            <a href="#">공지사항</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section>
                        <h2 class="sec-tit">
                            <a href="#">갤러리</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <section>
                    <div>
                        <a href="#">
                            <img src="images/banner.jpg">
                        </a>
                    </div>
                </section>
                <section class="sec-goto">
                    <div>
                        <ul class="lst-goto">
                            <li>
                                <a href="#">나의 계정</a>
                            </li>
                            <li>
                                <a href="#">헤이 음악</a>
                            </li>
                            <li>
                                <a href="#">계정 추가</a>
                            </li>
                            <li>
                                <a href="#">클라우드</a>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </body>

</html>

       

      shopping-mall 4

      <!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>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                line-height: 1.5;
                list-style: none;
                text-decoration: none;
                font-size: 14px;
            }

            .wrap {
                width: 1200px;
                margin: 0 auto;
            }

            .container {
                padding: 10px 0;
                display: flex;
                /* 시작점과 끝점을 배치후 중간 배치 */
                justify-content: space-between;
            }

            .container .tab,
            .container section {
                width: 32%;
            }

            .tab {
                display: flex;
            }

            .tab section {
                width: 49.5%;
            }

            .tab .sec-tit a {
                background: #f0f0f0;
                text-align: center;
                display: block;
                display: flex;
                height: 48px;
                justify-content: center;
                align-items: center;
            }

            .tab .on .sec-tit a {
                background: tomato;
                color: #fff;
            }
            .sec-goto .lst-goto{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                height: 180px;
            } 
            .lst-goto li {
                width: 48%;
            }
            .lst-goto a{
                height: 85px;
                background: rgba(0, 0, 0, 0.15);
                border-radius: 11px;
                display: flex;
                /* 가로를 중앙 정렬 */
                justify-content: center;
                /* 세로를 중앙 정렬 */
                align-items: center;
            }
          .nav-depth1{
            display: flex;
          }
          .nav-depth1>li{
            position: relative;;
          }
          .nav-depth1>li>a{
            padding: 0 40px;
            line-height: 100px;
          }
          .nav-depth1>li>a:hover{
            font-weight: bold;
            color: tomato;
            border-bottom: 3px solid tomato;
          }
          .nav-depth1:hover .nav-depth2{
            height: 135px;
          }
          .nav-depth2{
            overflow: hidden;
            width: 100%;
            padding: 0;
            background: #fff;
            height: 0;
          }
          .nav-depth2 a:hover{
            background: tomato;
            color: #fff;
          }
          .nav-depth2 a{
            display: block;
            padding: 5px 0;
            text-align: center;
          }
        </style>
    </head>
    <header>
        <h1>Green 쇼핑몰</h1>
        <nav>
            <ul class="nav-depth1">
                <li>
                    <a href="#">탑</a>
                    <ul class="nav-depth2">
                        <li><a href="#">블라우스</a></li>
                        <li><a href="#">티</a></li>
                        <li><a href="#">셔츠</a></li>
                        <li><a href="#">니트</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">아우터</a>
                    <ul class="nav-depth2">
                        <li><a href="#">자켓</a></li>
                        <li><a href="#">코트</a></li>
                        <li><a href="#">가디언</a></li>
                        <li><a href="#">머플러</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">팬츠</a>
                    <ul class="nav-depth2">
                        <li><a href="#">청바지</a></li>
                        <li><a href="#">짧은바지</a></li>
                        <li><a href="#">긴바지</a></li>
                        <li><a href="#">레깅스</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">악세사리</a>
                    <ul class="nav-depth2">
                        <li><a href="#">귀고리</a></li>
                        <li><a href="#">목걸이</a></li>
                        <li><a href="#">반지</a></li>
                        <li><a href="#">팔찌</a></li>
                    </ul>
                </li>
                </ul>
        </nav>
    </header>

    <body>
       
        <div class="wrap">
            <img src="images/slide.jpg">
            <div class="container">
                <div class="tab">
                    <section class="on">
                        <h2 class="sec-tit">
                            <a href="#">공지사항</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section>
                        <h2 class="sec-tit">
                            <a href="#">갤러리</a>
                        </h2>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">2021년 2월 무이자 할부 카드 안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                                <li>
                                    <a href="#">쿠폰 사용안내 2021년 2월 무이자 할부 카드 안내</a>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <section>
                    <div>
                        <a href="#">
                            <img src="images/banner.jpg">
                        </a>
                    </div>
                </section>
                <section class="sec-goto">
                    <div>
                        <ul class="lst-goto">
                            <li>
                                <a href="#">나의 계정</a>
                            </li>
                            <li>
                                <a href="#">헤이 음악</a>
                            </li>
                            <li>
                                <a href="#">계정 추가</a>
                            </li>
                            <li>
                                <a href="#">클라우드</a>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
    </body>

</html>

       

      'CSS' 카테고리의 다른 글

      플렉스 박스 레이아웃  (0) 2023.06.22
      미디워 쿼리  (0) 2023.06.22
      반응형 웹이란  (0) 2023.06.22
      트랜지션과 애니메이션  (0) 2023.06.22
      CSS3와 애니메이션  (0) 2023.06.22

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바