HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>리빙샵아울렛</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="top flx">
            <header id="header">
                <h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
                <nav class="gnb">
                    <ul class="dep1">
                        <li><a href="#">인기모음전</a></li>
                        <li><a href="#">베스트상품</a></li>
                        <li><a href="#">업종별샵</a></li>
                        <li><a href="#">인덕션용품</a></li>
                    </ul>
                    <div class="sub_menu">
                        <ul class="flx dep2">
                            <li><a href="#">수저모음</a></li>
                            <li><a href="#">도마모음</a></li>
                            <li><a href="#">그릇모음</a></li>
                            <li><a href="#">접시모음</a></li>
                        </ul>
                        <ul class="flx dep2">
                            <li><a href="#">주방용품</a></li>
                            <li><a href="#">설비제품</a></li>
                            <li><a href="#">인덕션제품</a></li>
                            <li><a href="#">실리콘제품</a></li>
                        </ul>
                        <ul class="flx dep2">
                            <li><a href="#">한식기물</a></li>
                            <li><a href="#">양식기물</a></li>
                            <li><a href="#">일식기물</a></li>
                            <li><a href="#">중식기물</a></li>
                        </ul>
                        <ul class="flx dep2">
                            <li><a href="#">냄비/솥</a></li>
                            <li><a href="#">후라이팬/주물</a></li>
                            <li><a href="#">인덕션렌지</a></li>
                            <li><a href="#">기타제품</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
            <main id="main">
                <div class="slide" id="slide">
                    <ul class="slide_wrap">
                        <li><img src="images/slide1.png" alt="슬라이드이미지1"><span>리빙샵아울렛 슬라이드1</span></li>
                        <li><img src="images/slide2.png" alt="슬라이드이미지2"><span>리빙샵아울렛 슬라이드2</span></li>
                        <li><img src="images/slide3.png" alt="슬라이드이미지3"><span>리빙샵아울렛 슬라이드3</span></li>
                    </ul>
                </div>
                <ul class="link flx a_center j_spc_btw">
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link1.png" alt="바로가기1"><span>식기류</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link2.png" alt="바로가기2"><span>견적내기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link3.png" alt="바로가기3"><span>예약하기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link4.png" alt="바로가기4"><span>활용하기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link5.png" alt="바로가기5"><span>레시피</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link6.png" alt="바로가기6"><span>플레이트</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link7.png" alt="바로가기7"><span>기물종류</span></a></li>
                </ul>
                <div class="board flx">
                    <div class="notice">
                        <h2>공지사항</h2>
                        <ul>
                            <li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항1 클릭해서 확인해주세요.</span><span>2024.06.07</span></a></li>
                            <li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항2 클릭해서 확인해주세요.</span><span>2024.06.06</span></a></li>
                            <li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항3 클릭해서 확인해주세요.</span><span>2024.06.04</span></a></li>
                            <li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항4 클릭해서 확인해주세요.</span><span>2024.06.03</span></a></li>
                        </ul>
                    </div>
                    <div class="gallery">
                        <h2>갤러리</h2>
                        <ul class="flx a_center j_spc_btw">
                            <li><a href="#" class="flx flx_col a_center"><img src="images/gallery1.png" alt="갤러리1"><span>갤러리이미지1</span></a></li>
                            <li><a href="#" class="flx flx_col a_center"><img src="images/gallery2.png" alt="갤러리1"><span>갤러리이미지2</span></a></li>
                            <li><a href="#" class="flx flx_col a_center"><img src="images/gallery3.png" alt="갤러리1"><span>갤러리이미지3</span></a></li>
                        </ul>
                    </div>
                </div>
            </main>
        </div>
        <footer id="footer" class="flx j_flx_end a_center">    
            <div class="f_m">
                <ul class="f_m_t flx">
                    <li><a href="#">FOOTERMENU1</a></li>
                    <li><a href="#">FOOTERMENU2</a></li>
                    <li><a href="#">FOOTERMENU3</a></li>
                    <li><a href="#">FOOTERMENU4</a></li>
                    <li><a href="#">FOOTERMENU5</a></li>
                    <li><a href="#">FOOTERMENU6</a></li>
                </ul>
                <div class="f_m_b">COPYRIGHT &COPY; by WEBDESIGN. ALL RIGHTS RESERVED</div>
            </div>
            <select class="family">
                <option>패밀리사이트1</option>
                <option>패밀리사이트2</option>
                <option>패밀리사이트3</option>
                <option>패밀리사이트4</option>
                <option>패밀리사이트5</option>
            </select>
        </footer>
        <div class="modal_bg">
            <div class="modal">
                <h3>리빙샵아울렛 공지사항</h3>
                <p>
                동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
                무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
                남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
                </p>
                <button type="button">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS

@charset "UTF-8";
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; height: 100%; font-size: 15px; color: #333; background-color: #fff; }
body { width: 100%; height: 100%; }
ul, ol, li { list-style-type: none; }
a { display: block; text-decoration: none; color: inherit; }
button { cursor: pointer; border: 0; }
img { vertical-align: top; }
/*공통 cls*/
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_st { align-items: flex-start; }
.a_flx_end { align-items: flex-end; }
.j_center { justify-content: center; }
.j_spc_btw { justify-content: space-between; }
.j_flx_end { justify-content: flex-end; }
.hide { width: 1px; height: 1px; text-indent: -999999px; font-size: 1px; position: absolute; z-index: -999999px; overflow: hidden; }

.wrap { width: 100%; height: 920px; position: relative; }
.top { height: 800px; }
/*header*/
#header{ width: 200px; height: 100%; background-color: #fff; border-right: 1px solid #eee;}
#header .logo a img { margin: 10px 0 ; }
#header .gnb .dep1 li{ height: 42px; line-height: 42px; padding: 0 20px; }
#header .gnb .dep1 li:hover { background-color: #e54180; color: #fff; }
#header .gnb .dep1 li.on { background-color: #e54180; color: #fff; }
#header .gnb .dep1 li a { font-size: 17px; font-weight: bold; }
#header .gnb .dep1 li:hover a { color: #fff; }
#header .sub_menu { position: absolute; top: 60px; left: 200px; width: 100%; height: auto; background-color: #e54180; display: none; z-index: 2; }
#header .sub_menu > ul { height: 42px; line-height: 42px; }
#header .sub_menu > ul > li { width: 200px; padding: 0 10px; }
#header .sub_menu > ul > li:hover { background-color: rgba(0, 0, 0, 0.2); }
#header .sub_menu > ul > li > a { color: #fff; text-align: center; }

/*main*/
#main { width: calc(100% - 200px); height: 100%; }
#main .slide { width: 100%; height: 400px; overflow: hidden; }
#main .slide .slide_wrap { width: 100%; height: 100%; }
#main .slide .slide_wrap li { position: relative; }
#main .slide .slide_wrap span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.4); color: #fff; padding: 6px 10px; }
#main .link { width: 100%; height: 150px; padding: 0 50px; }
#main .link span { padding-top: 10px; }
#main .board { width: 100%; height: 250px; }
#main .board .notice,
#main .board .gallery{ width: 50%; padding: 0 20px;}
#main .board .notice h2,
#main .board .gallery h2{ width: 150px; height: 48px; line-height: 48px; font-size: 17px; font-weight: bold; text-align: center; background-color: #eee; }
#main .board .notice li { height: 48px; line-height: 48px; padding: 0 10px }
#main .board .notice li:nth-of-type(odd) { background-color: #eee; }
#main .board .gallery ul { background-color: #eee; }
#main .board .gallery ul > li:hover img{ animation: opa 0.5s ease-in 1; }

@keyframes opa{
    0% {
        opacity: 80%;
    }
    50%{ 
        opacity: 50%;
    }
    100%{ 
        opacity: 100%;
    }
}

/*footer*/
#footer{ height: 120px; padding: 0 20px 0 200px; background-color: #333; color: #fff;}
#footer .f_m { width: 1500px; }
#footer .family { height: 42px; width: 200px; } 

/*modal*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; }
.modal_bg .modal { width: 400px; height: auto; padding: 20px 30px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal_bg .modal h3 { height: 42px; line-height: 42px; font-size: 17px; } 
.modal_bg .modal p { line-height: 28px; margin-bottom: 10px; }
.modal_bg .modal button { display: block; width: 150px; margin: 0 auto; padding: 4px 0; background-color: #e54180; color: #fff; }

 

JAVASCRIPT/JQUERY

$(document).ready(function(){
    //메뉴
    $('.dep1 li').mouseover(function(){
        $('.sub_menu').stop().fadeIn(300);
        $('.dep1 li').removeClass('on');
        $(this).addClass('on');

    })
    $('.gnb').mouseleave(function(){
        $('.sub_menu').stop().fadeOut(300);
        $('.dep1 li').removeClass('on');
    })

    //슬라이드
    $('#slide .slide_wrap li').hide();
    $('#slide .slide_wrap li:first-of-type').show();
    
    setInterval(function(){
        $('#slide .slide_wrap li:first-of-type').fadeOut().next().fadeIn().end().appendTo($('#slide .slide_wrap'));

    },3000)


    //모달창
    $('.notice ul li:first-of-type').click(function(){
        $('.modal_bg').stop().show();
    })
    $('.modal button').click(function(){
        $('.modal_bg').stop().hide();
    })
})

 

+ Recent posts