04.13 - 사각사각 문구점 (헤더)

4일차 - 메인페이지디자인, html

나 아직도 뭔 소리인지 잘 모르겠슨.
일단 완성본 기준으로 아래같이 범위 나눠서 만들기 시작함.

 

 

- html -

<header class="container">
        <div class="topset">
            <div class="mypage"><img src="images/icon_top1.png" alt="">개인페이지</div>

            <div class="login_box">
                <div class="login">
                    <a href="#"><img src="images/icon_top2.png" alt="">로그인</a>
                    <a href="#"><img src="images/icon_top3.png" alt="">회원가입</a>
                    <a href="#"><img src="images/icon_top4.png" alt="">사이트맵</a>
                </div>
                <div class="logout">
                    <a href="#">로그아웃</a>
                    <a href="#">정보수정</a>
                    <a href="#">사이트맵</a>
                </div>
            </div>

        </div>

        <h1><a href="#"><img src="images/logo.png" alt="로고"></a></h1>

        <nav>
            <ul class="gnb"><!--global navigation bar-->
                <li>
                    <a href="#"><img src="images/gnb_top1.png" alt="">홈</a>
                    <ul class="lnb"><!--local navigation bar-->
                        <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="#"><img src="images/gnb_top2.png" alt="">베스트셀러</a>
                    <ul class="lnb"><!--local navigation bar-->
                        <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="#"><img src="images/gnb_top3.png" alt="">상품보기</a>
                    <ul class="lnb"><!--local navigation bar-->
                        <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>
                </li>
                <li>
                    <a href="#"><img src="images/gnb_top4.png" alt="">공지사항</a>
                    <ul class="lnb"><!--local navigation bar-->
                        <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="#"><img src="images/gnb_top5.png" alt="">고객센터</a>
                    <ul class="lnb"><!--local navigation bar-->
                        <li><a href="#">자주묻는질문</a></li>
                        <li><a href="#">1:1 문의하기</a></li>
                        <li><a href="#">교환/환불 안내</a></li>
                        <li><a href="#">배송조회</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

    </header>

 

- css -

@charset "UTF-8";
/*reset*/
* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: #88553F;}

body {font-family: 'Paperozi', '맑은 고딕', serif;}

.container {width: 1005px; margin: 0 auto;}
.container1500 h2 {font-size: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 52px; color: #99775A; font-family: 'YeogiOttaeJalnan';}

header {position: relative;}
header .topset {display: flex; justify-content: space-between;}
header .topset .mypage {display: flex; gap: 4px; padding: 8px; align-items: center; color: #88553F;}

header .topset .login_box {font-size: 16px;}
header .topset .login_box .login {display: flex; justify-content: end;}
header .topset .login_box .logout {display: none;}
header .topset .login_box a {display: flex; gap: 4px; padding: 8px; align-items: center;}

header h1 {text-align: center; position: absolute; left: 50%; top: 32px; transform: translateX(-50%);}

header nav {margin-top: 80px;}
header nav .gnb {display: flex;}
header nav .gnb > li {font-weight: 700; font-size: 20px; flex-grow: 1; display: flex; position: relative;}
header nav .gnb > li > a {display: flex; gap: 4px; padding: 8px; flex-grow: 1; text-align: center; justify-content: center; padding: 13px 0;}

header nav .gnb li:hover {background: #916D57;}
header nav .gnb li:hover a {color: #FFF6EC;}

header nav .gnb li .lnb {position: absolute; z-index: 5; width: 100%; top: 100%; background: #FFF6EC; /* overflow: hidden; height: 0px;  */ transition: 0.5s; opacity: 0; visibility: hidden;}
header nav .gnb li:hover .lnb {/* height: 190px; */ opacity: 1; visibility: visible;}

header nav .gnb li .lnb li {font-size: 16px; font-weight: 400;} 
header nav .gnb li .lnb li a {color: #916D57 ; padding: 16px 0px; display: block; text-align: center; border-top: 1px solid #916d574f;}


header nav .gnb li .lnb li:hover {background: #916D57;}
header nav .gnb li .lnb li:hover a {color: #FFF6EC;}

 

---

 

슬라이드 헤더

 

- html -

 <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="images/visual_main.jpg" alt="">
                <div class="textbox">
                    <div class="text1">당신의 하루를 채우는 문구점</div>
                    <strong>사각사각 문구점입니다.</strong>
                    <p>기록하는 순간을 더 따뜻하게, <br> 흘러가는 순간들을 쌓아 <br> 작은 이야기들을 남겨보세요.</p>
                    <a href="#">지금 바로 쇼핑하기 <img src="images/arrow.png" alt=""></a>
                </div>
            </div>


            <div class="swiper-slide">
                <img src="images/visual_main2.jpg" alt="">
                <div class="textbox">
                    <div class="text1">당신의 하루를 채우는 문구점</div>
                    <strong>사각사각 문구점입니다.</strong>
                    <p>기록하는 순간을 더 따뜻하게, <br> 흘러가는 순간들을 쌓아 <br> 작은 이야기들을 남겨보세요.</p>
                    <a href="#">지금 바로 쇼핑하기 <img src="images/arrow.png" alt=""></a>
                </div>
            </div>

            <div class="swiper-slide">
                <img src="images/visual_main3.jpg" alt="">
                <div class="textbox">
                    <div class="text1">당신의 하루를 채우는 문구점</div>
                    <strong>사각사각 문구점입니다.</strong>
                    <p>기록하는 순간을 더 따뜻하게, <br> 흘러가는 순간들을 쌓아 <br> 작은 이야기들을 남겨보세요.</p>
                    <a href="#">지금 바로 쇼핑하기 <img src="images/arrow.png" alt=""></a>
                </div>
            </div>

        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>

    </div>

 

- css -

.mySwiper .textbox {color: #99775A; position: absolute; left: 50%; top: -5%; margin-left: -760px; transform: translate(0,50%); z-index: 50px; font-family: 'YeogiOttaeJalnan';}
.mySwiper .textbox .text1 {font-size: 36px;}
.mySwiper .textbox strong {font-size: 48px; margin-bottom: 20px; display: block;}
.mySwiper .textbox p {font-size: 24px; margin-bottom: 48px; font-family: 'SchoolSafetyRoundedSmile'; line-height: 140%;}
.mySwiper .textbox a {font-size: 20px; color: #FFF6EC; padding: 12px 24px; border-radius: 30px; background:#99775A; gap: 20px; display: inline-flex; align-items: center; transition: 0.3s;}
    

.mySwiper .textbox a:hover {transform: scale(1.05); background: #FFF6EC; color: #99775A; }
.mySwiper .textbox a:hover img {
    filter: invert(48%) sepia(30%) saturate(400%) hue-rotate(340deg);
}

.mySwiper .swiper-pagination-bullet-active {background: #99775A;}
.mySwiper .swiper-button-next,.mySwiper .swiper-button-prev {color: #99775A;}