04.15 - 사각사각 문구점 (섹션 2)

 

- html - 

<section id="section02">
            <div class="container">
                <div class="title_box">
                    <img src="images/section2_text.png" alt="">
                    <h2>사각사각 문구점 둘러보기</h2>
                </div>
            </div>

            <ul class="content">
                <li>
                    <a href="#">
                        <img src="images/section2_content 01.png" alt="">
                        <h3>전체 제품 보기</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/section2_content 02.png" alt="">
                        <h3>베스트셀러</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/section2_content 03.png" alt="">
                        <h3>신상품보기</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/section2_content 04.png" alt="">
                        <h3>공지사항</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/section2_content 05.png" alt="">
                        <h3>문의하기</h3>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/section2_content 06.png" alt="">
                        <h3>리뷰</h3>
                    </a>
                </li>
            </ul>
        </section>

 

- css -

#section02 {background: url(../images/section2_bg.png) no-repeat center 0; background-size: cover; padding: 100px 0; margin-bottom: 160px;}
#section02 .container .title_box {position: relative; width: fit-content; margin: 0 auto;}
#section02 .container img {width: 100%; display: block; margin-bottom: 40px;}
#section02 .container h2 {font-family: 'YeogiOttaeJalnan'; font-size: 48px; color: #99775A; width: 0 auto; margin: 0 auto; text-align: center; margin-bottom: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);white-space: nowrap;}

#section02 .content {display: flex; gap: 40px 72px; flex-wrap: wrap; justify-content: center; padding: 0 200px; max-width: 1520px; margin: 0 auto;}
#section02 .content li {width: 30%; flex-grow: 1; position: relative; transform: .3s; flex-grow: 1;}
#section02 .content li:nth-child(1) a:hover img {transform: scale(1.07); rotate: 3deg;}
#section02 .content li:nth-child(2) a:hover img {transform: scale(1.07); rotate: -3deg;}
#section02 .content li:nth-child(3) a:hover img {transform: scale(1.07); rotate: 3deg;}
#section02 .content li:nth-child(4) a:hover img {transform: scale(1.07); rotate: -3deg;}
#section02 .content li:nth-child(5) a:hover img {transform: scale(1.07); rotate: 3deg;}
#section02 .content li:nth-child(6) a:hover img {transform: scale(1.07); rotate: -3deg;}
#section02 .content li a {display: flex; flex-direction: column;align-items: center;gap: 10px; position: relative;}
#section02 .content li a h3 {font-size: 24px; font-weight: 700; color: #6F4324; text-align: center; position: absolute; bottom: 56px;  left: 50%; transform: translateX(-50%);}