HTML

<!DOCTYPE html>
<html lang="ko">
<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">
        <header id="header">
            <div class="h_container flx spc_btw">
                <a href="#"><img src="images/logo.png" alt="로고"></a>
                <nav class="gnb">
                    <ul class="flx flx_end center">
                        <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">
                        <div class="sub_wrap flx flx_end">    
                            <ul>
                                <li><a href="#">CEO 인사말</a></li>
                                <li><a href="#">기업문화</a></li>
                                <li><a href="#">경영방침</a></li>
                                <li><a href="#">회사연혁</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">반도체 설비운영</a></li>
                                <li><a href="#">건축공사</a></li>
                                <li><a href="#">UHP 배관 공사</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">윤리경영</a></li>
                                <li><a href="#">환경경영</a></li>
                                <li><a href="#">안전보건경영</a></li>
                                <li><a href="#">품질경영</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">인재채용</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </header>
        <main id="main">
            <div class="m_container">
                <div class="slide">
                    <ul>
                        <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>
                <div class="conts">
                    <ul class="direct flx center">
                        <li class="flx center j_center"><a href="#"><img src="images/link1.png" alt="바로가기1"></a><span>CEO 인사말</span></li>
                        <li class="flx center j_center"><a href="#"><img src="images/link2.png" alt="바로가기2"></a><span>회사연혁</span></li>
                        <li class="flx center j_center"><a href="#"><img src="images/link3.png" alt="바로가기3"></a><span>사업소개</span></li>
                        <li class="flx center j_center"><a href="#"><img src="images/link4.png" alt="바로가기4"></a><span>온라인문의</span></li>
                        <li class="flx center j_center"><a href="#"><img src="images/link5.png" alt="바로가기5"></a><span>인재채용</span></li>
                    </ul>
                    <div class="banner flx center">
                        <a href="#"><img src="images/banner.png" alt="배너이미지"></a>
                        <div class="flx col j_center">
                            <h3>대한민국 산업 대전 베스트 20에 선정 축하</h3>
                            <span>2023-10-09</span>
                            <p>공조, 반도체, uhp 배관 등 다양한 사업에서 우수한 기술을 인정받아
                                대한민국 산업 대전 베스트 20에 선정되었습니다.</p>
                        </div>
                    </div>
                    <div class="board flx spc_btw">
                        <div class="notice">
                            <h4>공지사항</h4>
                            <ul>
                                <li><a href="#" class="flx spc_btw">하이글로벌컴퍼니 공지사항1<span>2024.06.02</span></a></li>
                                <li><a href="#" class="flx spc_btw">하이글로벌컴퍼니 공지사항2<span>2024.06.02</span></a></li>
                                <li><a href="#" class="flx spc_btw">하이글로벌컴퍼니 공지사항3<span>2024.06.02</span></a></li>
                                <li><a href="#" class="flx spc_btw">하이글로벌컴퍼니 공지사항4<span>2024.06.02</span></a></li>
                            </ul>
                        </div>
                        <div class="gallery">
                            <h4>갤러리</h4>
                            <ul class="flx center spc_btw">
                                <li><a href="#"><img src="images/gallery1.png" alt="갤러리1"><p>하이글로벌컴퍼니 갤러리</p></a></li>
                                <li><a href="#"><img src="images/gallery2.png" alt="갤러리2"><p>하이글로벌컴퍼니 갤러리</p></a></li>
                                <li><a href="#"><img src="images/gallery3.png" alt="갤러리3"><p>하이글로벌컴퍼니 갤러리</p></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer id="footer">
            <div class="f_container flx spc_btw center">
                <a href="#"><img src="images/footerLogo.png" alt="푸터로고"></a>
                <div class="copyright">COPYRIGHT &copy; by WEBDESIGN. ALL RIGHTS RESERVED</div>
                <div class="familysite">
                    <select>
                        <option>패밀리사이트1</option>
                        <option>패밀리사이트2</option>
                        <option>패밀리사이트3</option>
                    </select>
                </div>
            </div>
        </footer>
        <div class="modal">
            <div class="modal_cont">
                <p class="modal_tit">하이글로벌컴퍼니 공지사항</p>
                <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
                    무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
                    남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
                </p>
                <button type="button">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS

@charset "utf-8";

/*reset*/
*{margin: 0; padding: 0; box-sizing: border-box;}
ol, ul, li { list-style-type: none;}
a{text-decoration: none; color: #333;}
html, body {font-size: 15px; background-color: #fff; color: #333;}
button {  border: 0; display: block; }


.flx { display: flex; }
.center { align-items: center; }
.j_center { justify-content: center; }
.spc_btw { justify-content: space-between;}
.flx_st { justify-content: flex-start; }
.flx_end { justify-content: flex-end; }
.col { flex-direction: column;}
.hidden { font-size: 1px; width: 1px; height: 1px; text-indent: -999999px; overflow: hidden; }

.wrap{ width: 100vw; height: 100vh; position: relative; }

/*header*/
#header { width: 100%; height: 100px; position: relative; border-bottom: 1px solid #eee; }
#header .h_container { width: 1340px; height: 100px; margin: 0 auto; }
#header .h_container > a { display: inline-block; width: 190px; height: 44px; margin-top: 28px; }
#header .h_container nav { line-height: 100px; }
#header .h_container nav > ul { margin-top: 52px; }
#header .h_container nav li { width: 150px; height: 48px; line-height: 48px; }
#header .h_container nav li a { display: block; width: 100%; height: 100%; font-size: 17px; text-align: center; }
#header .h_container nav li a:hover { background: #e31a40; color: #Fff; font-weight: bold; }
#header .h_container .sub_menu { display: none; background-color: #fff; position: absolute; top: 100px; left: 0; width: 100%; padding: 0 290px; z-index: 1; }
#header .h_container .sub_menu .sub_wrap { width: 1340px; padding: 0 10px; }


/*main*/
#main .m_container .slide { width: 100%; height: 350px; overflow: hidden; }
#main .m_container .slide li { height: 350px; position: relative; }
#main .m_container .slide li span { font-size: 18px; font-weight: 700; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 10px 30px; border-radius: 10px; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
#main .conts { position: relative; width: 1340px; margin: 0 auto; }
#main .conts .direct { position: absolute; top: -80px; width: 100%; height: 80px; left: 0; background: #e31a40; color: #fff; }
#main .conts .direct li { width: 20%; cursor: pointer; }
#main .conts .direct li span { margin-left: 6px; }
#main .conts .banner { height: 180px; }
#main .conts .banner > div { padding-left: 50px; }
#main .conts .banner h3 { font-size: 18px; line-height: 38px; }
#main .conts .banner span { color: #bbb; line-height: 32px; }
#main .conts .board { background: rgba(0, 0, 0, 0.1); }
#main .conts .board > div { width: 50%; }
#main .conts .notice h4,
#main .conts .gallery h4 { width: 100px; height: 32px; line-height: 32px; text-align: center; background-color: #e31a40; color: #fff; }
#main .conts .notice { width: 100%;; }
#main .conts .notice > ul> li { height: 42px; line-height: 42px; padding: 0 10px }
/*footer*/
#footer .f_container{ width: 1340px; height: 100px; margin: 0 auto; background-color: #454545; color: #fff; padding: 0 14px; }
#footer .f_container .familysite select { width: 180px; height: 32px; }
/*modal*/
.modal { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.modal .modal_cont { width: 400px; height: auto; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 30px; }
.modal .modal_cont .modal_tit { font-size: 18px; font-weight: bold; height: 48px; line-height: 48px; text-align: center; margin-bottom: 10px;}
.modal .modal_cont button { border: 0; width: 150px; margin: 20px auto 0; padding: 10px 20px; background-color: #e31a40; text-align: center; color: #Fff; cursor: pointer; }

 

JQUERY

$(document).ready(function(){
    //서브메뉴표출
    $('#header .gnb > ul > li').mouseover(function(){
        $('.sub_menu').stop().slideDown(300);
    })
    $('#header').mouseleave(function(){
        $('.sub_menu').stop().slideUp(300);
    })
    //슬라이드
    setInterval(function(){
        $('.slide ul').delay(3000);
        $('.slide ul').animate({marginTop:'-350px'});
        $('.slide ul').delay(3000);
        $('.slide ul').animate({marginTop:'-700px'});
        $('.slide ul').delay(3000);
        $('.slide ul').animate({marginTop:'0px'}); 
    })
    //모달창생성
    $('.notice li:first-of-type').click(function(){
        $('.modal').css('display','block');
    })
    $('.modal_cont > button').click(function(){
        $('.modal').css('display','none');
    })
})

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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">
        <header id="header" class="flx j_spc_btw">
            <div class="header_wrap flx j_spc_btw">
                <h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
                <nav>
                    <ul class="dep1 flx j_flx_end">
                        <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">
                        <div class="flx j_flx_end">
                            <ul>
                                <li><a href="#">계좌조회</a></li>
                                <li><a href="#">거래내역조회</a></li>
                                <li><a href="#">휴먼계좌조회</a></li>
                                <li><a href="#">수표/어음 조회</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">계좌이체</a></li>
                                <li><a href="#">다계좌이체</a></li>
                                <li><a href="#">자동이체</a></li>
                                <li><a href="#">예약이체</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">지로/생활요금</a></li>
                                <li><a href="#">지방세</a></li>
                                <li><a href="#">국세/관세</a></li>
                                <li><a href="#">벌칙금/벌과금</a></li>
                            </ul>
                            <ul>
                                <li><a href="#">금리</a></li>
                                <li><a href="#">환율/외화예금</a></li>
                                <li><a href="#">글로벌뱅킹</a></li>
                                <li><a href="#">외화송금</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>    
        </header>
        <main id="main">
            <div class="slide">
                <ul class="slide_wrap flx a_center">
                    <li><a href="#"><img src="images/slide1.png" alt="슬라이드1"><span>오픈뱅킹 슬라이드이미지1</span></a></li>
                    <li><a href="#"><img src="images/slide2.png" alt="슬라이드2"><span>오픈뱅킹 슬라이드이미지2</span></a></li>
                    <li><a href="#"><img src="images/slide3.png" alt="슬라이드3"><span>오픈뱅킹 슬라이드이미지3</span></a></li>
                </ul>
            </div>
            <div class="conts">
                <ul class="link flx j_spc_btw a_center">
                    <li><a href="#" class="flx a_center"><img src="images/link_1.png" alt="바로가기1"><span>계좌조회</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link_2.png" alt="바로가기2"><span>계좌이체</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link_3.png" alt="바로가기3"><span>예약이체</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link_4.png" alt="바로가기4"><span>환율/외화예금</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link_5.png" alt="바로가기5"><span>외화송금</span></a></li>
                </ul>
                <div class="banner flx a_center">
                    <a href="#"><img src="images/banner.png" alt="배너이미지"></a>
                    <div class="txt">
                        <h3>오픈뱅킹 1주년 이벤트</h3>
                        <p>2024-06-03</p>
                        <p>오픈뱅킹 1주년을 맞이하여 수수료를 면제해드립니다. 자세한 사항은 메인 홈페이지 참고 부탁드립니다.</p>
                    </div>
                </div>
                <div class="board">
                    <div class="flx a_center">
                        <h4 class="b01 on">공지사항</h4>
                        <h4 class="b02">갤러리</h4>
                    </div>
                    <div class="board_conts">
                        <ul class="notice">
                            <li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 1번 공지사항입니다.<span>2024-06-03</span></a></li>
                            <li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 2번 공지사항입니다.<span>2024-06-03</span></a></li>
                            <li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 3번 공지사항입니다.<span>2024-06-03</span></a></li>
                            <li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 4번 공지사항입니다.<span>2024-06-03</span></a></li>
                        </ul>
                        <ul class="gallery flx j_spc_btw">
                            <li><a href="#" class="flx flx_col j_center"><img src="images/gallery1.png" alt="갤러리1"><span>2024-06-03</span></a></li>
                            <li><a href="#" class="flx flx_col j_center"><img src="images/gallery2.png" alt="갤러리2"><span>2024-06-03</span></a></li>
                            <li><a href="#" class="flx flx_col j_center"><img src="images/gallery3.png" alt="갤러리3"><span>2024-06-03</span></a></li>
                        </ul>
                    </div> 
                    
                </div>
            </div>
        </main>
        <footer id="footer">
            <div class="footer_wrap flx a_center">
                <a href="#"><img src="images/f_logo.png" alt="footer로고"></a>
                <div class="flx flx_col">
                    <ul class="family flx a_center">
                        <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>
                    </ul>
                    <div class="copyright">
                        COPYRIGHT &copy; by WEBDESIGN. ALL RIGHTS RESERVED
                    </div>
                </div>
            </div>
        </footer>
        <div class="modal_bg">
            <div class="modal">
                <div class="modal_tit">오픈뱅킹 공지사항</div>
                <div class="modal_conts">
                    동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
                    무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
                    남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
                </div>
                <button type="button">닫기</button>
            </div>  
        </div>
    </div>
</body>
</html>

 

CSS

@charset "utf-8";

/*reset*/
* { padding: 0; margin: 0; box-sizing: border-box; }
html { width: 100vw; height: 100vh; }
body { width: 100%; min-height: 100%; background-color: #fff; font-size: 15px; color: #666; }
ul,ol,li { list-style-type: none; }
a,em { text-decoration: none; color: #666; display: block; text-align: center; }
button { display: block; text-align: center; border: 0; }
img { vertical-align: top; }

/*공통*/
.wrap { width: 100%; height: 100%; position: relative; }
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center {align-items: center;}
.a_spc_btw { align-items: space-between; }
.a_flx_end { align-items: flex-end; }
.a_flx_st { align-items: flex-start; }
.j_center{ justify-content: center;}
.j_spc_btw { justify-content: space-between; }
.j_flx_end { justify-content: flex-end; }
.j_flx_st { justify-content: flex-start; }
.hide { width: 1px; height: 1px; text-indent: -999999px; overflow: hidden; position: absolute; top: -9999px; left: -999999px; }

/*header*/
#header { width: 100%; height: 100px; position: relative; border-bottom: 1px solid #eee; }
.header_wrap { width: 1340px; height: 100%; margin: 0 auto; padding: 0 10px; }
.header_wrap .logo { width: 200px; height: auto; margin-top: 25px; }
.dep1 {height: 42px; line-height: 42px; margin-top: 58px; }
.header_wrap li { width: 160px; height: 42px; line-height: 42px; }
.header_wrap li:hover { background-color: #0A9B97; }
.header_wrap li a { font-size: 17px; font-weight: 700; }
.header_wrap li:hover a { color: #fff; }
.sub_menu { display: none; width: 100%; background: #fff; position: absolute; top: 100px; left: 0; z-index: 2; }
.sub_menu > div { width: 1340px; margin: 0 auto; padding: 0 10px; }

/*main*/
.conts{position: relative;}
.slide { width: 100%; height: 350px; overflow: hidden; }
.slide .slide_wrap li { position: relative; height: 350px; }
.slide .slide_wrap li > a { display: block; height: 100%; }
.slide .slide_wrap li > a > span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px 20px; font-weight: 700; }
.link { position: absolute; top:-80px; left: 50%; transform: translateX(-50%); width: 1340px; height: 80px; padding: 0 30px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.3); }
.link span{ margin-left: 8px; font-weight: bold; color: #fff;}
.banner { width: 1340px; margin: 0 auto; background-color: #0A9B97; }
.banner .txt { margin-left: 30px; color: #fff;}
.banner .txt h3 { line-height: 42px; height: 42px; }
.board { width: 1340px; margin: 0 auto; }
.board h4 { width: 120px; padding: 0 20px; height: 38px; line-height: 38px; background-color: #e4e4e4; text-align: center; cursor: pointer; }
.board h4.on { background-color: #F04467; color: #fff; text-align: center; }
.board > div { width: 60%;}
.notice { width: 100%; height: 152px; }
.notice li { height: 38px; line-height: 38px; padding: 0 10px; }
.notice li:nth-child(2n){ background: rgb(240, 68, 103, 0.2); }
.notice li > a { width: 100%; }
.notice li > a > span { display: inline-block; width: 20%; }
.gallery { display: none; height: 152px; }
.gallery >li:hover a > img { animation-duration: 3s; animation-name: opa; animation-iteration-count: infinite; }

@keyframes opa { 
    from{
        opacity: 30%;
    }
    to{
        opacity: 100%;
    }
 }


/*footer*/
#footer { height: 120px; width: 100%; }
.footer_wrap { height: 100%; width: 1340px; margin: 0 auto; background-color: #efefef; }
.footer_wrap > a { width: 240px; }
.footer_wrap > div { height: 100%; }
.footer_wrap > div > ul { height: 70%; }
.footer_wrap .family li{ padding:0 30px; border-right: 1px solid #666; }
.footer_wrap .family li:first-of-type{ padding-left: 0; }
.footer_wrap .family li:last-of-type{ border-right: none; }

/*modal*/
.modal_bg { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 30px; width: 420px; height: auto; background-color: #fff; }
.modal .modal_tit { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.modal .modal_conts { line-height: 32px; }
.modal button { width: 150px; color: #fff; background-color: #0A9B97; text-align: center; margin: 10px auto 0; padding: 10px 0; cursor: pointer; }

 

 

JQUERY

$(document).ready(function(){
    //사이드메뉴
    $('.dep1 li').mouseover(function(){
       $('.sub_menu').stop().fadeIn(300); 
    })
    $('.header_wrap').mouseleave(function(){
        $('.sub_menu').stop().fadeOut(300); 
    })
     //슬라이드
     setInterval(function(){
        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:'-100%'});
        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:'-200%'});
        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:'0'});
     })
     //공지사항 갤러리 탭 color변경 + 컨텐츠내용변경
     $('.board .b02').click(function(){
        $('.b01').removeClass('on');
        $('.b02').addClass('on');
        $('.notice').css('display','none');
        $('.gallery').css('display','flex');
     })
     $('.board .b01').click(function(){
        $('.b02').removeClass('on');
        $('.b01').addClass('on');
        $('.gallery').css('display','none');
        $('.notice').css('display','block');
     })
     //modal
     $('.notice li:first-of-type').click(function(){
        $('.modal_bg').stop().fadeIn(500);
     })
     $('.modal button').click(function(){
        $('.modal_bg').stop().fadeOut(500);
     })
});

 

 

HTML

<!DOCTYPE html>
<html lang="ko">
<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">
        <header id="header" class="flx j_spc_btw a_center">
            <h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고이미지"></a></h1>
            <nav class="gnb">
                <ul class="flx">
                    <li>
                        <a href="#" class="dep">회사소개</a>
                        <ul class="sub_menu">
                            <li><a href="#">기업정보</a></li>
                            <li><a href="#">CEO인사말</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">조직도</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">지속가능경영</a>
                        <ul class="sub_menu">
                            <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="sub_menu">
                            <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="sub_menu">
                            <li><a href="#">뉴스</a></li>
                            <li><a href="#">분양뉴스</a></li>
                            <li><a href="#">CI/BI</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <main id="main">
            <div class="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>
            <div class="m_wrap">
                <ul class="link flx a_center j_spc_btw">
                    <li><a href="#" class="flx a_center"><img src="images/link1.png" alt="기업정보"><span>기업정보</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link2.png" alt="건축사업"><span>건축사업</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link3.png" alt="주택사업"><span>주택사업</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link4.png" alt="상담하기"><span>상담하기</span></a></li>
                    <li><a href="#" class="flx a_center"><img src="images/link5.png" alt="예약하기"><span>예약하기</span></a></li>
                </ul>
                <div class="banner flx a_center">
                    <a href="#"><img src="images/banner.png" alt="배너이미지"></a>
                    <div class="b_txt">
                        <p class="tit">2024 기능건설 인재채용</p>
                        <p class="txt">주식회사 기능건설과 함께 할 역량있는 인재를 모집합니다.</p>
                    </div>
                </div>
                <div class="board">
                    <div class="tab_btn flx a_center">
                        <h3 class="b01 on">공지사항</h3>
                        <h3 class="b02">갤러리</h3>
                    </div>
                    <div class="notice">
                        <ul>
                            <li><a href="#" class="flx a_center j_spc_btw"><spna>기능건설 공지사항1 입니다.</spna><spna>2024.06.08</spna></a></li>
                            <li><a href="#" class="flx a_center j_spc_btw"><spna>기능건설 공지사항1 입니다.</spna><spna>2024.06.08</spna></a></li>
                            <li><a href="#" class="flx a_center j_spc_btw"><spna>기능건설 공지사항1 입니다.</spna><spna>2024.06.08</spna></a></li>
                            <li><a href="#" class="flx a_center j_spc_btw"><spna>기능건설 공지사항1 입니다.</spna><spna>2024.06.08</spna></a></li>
                        </ul>
                    </div>
                    <div class="gallery">
                        <ul class="flx a_center j_spc_btw">
                            <li class="flx flx_col a_center"><img src="images/gallery1.png" alt="갤러리이미지1"><spna>기능건설 이미지</spna></a></li>
                            <li class="flx flx_col a_center"><img src="images/gallery2.png" alt="갤러리이미지2"><spna>기능건설 이미지</spna></a></li>
                            <li class="flx flx_col a_center"><img src="images/gallery3.png" alt="갤러리이미지3"><spna>기능건설 이미지</spna></a></li>
                        </ul>
                    </div>
                </div>
            </div>  
        </main>
        <footer id="footer" class="flx a_center">
            <h4 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="푸터로고"></a></h4>
            <div class="flx flx_col ">
                <ul class="f_menu flx a_center">
                    <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="copy">COPYRIGHT &copy; by WEBDESIGN. ALL RIGHTS RESERVED</div>
            </div>
        </footer>
        <div class="modal_bg">
            <div class="modal">
                <h4>주식회사 기능건설 공지사항</h4>
                <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
                    무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.
                    남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.</p>
                <button type="button">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS

@charset "utf-8";
/*reset*/
* { margin: 0; padding: 0; box-sizing: border-box; }
ul,ol,li { list-style-type: none; }
a { text-decoration: none; color: inherit; }
img { vertical-align: top; }
button { border: 0; cursor: pointer; }
html, body { width: 100%; height: 100%; font-size: 15px; background-color: #fff; color: #666; }


/*common*/
.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_flx_end { justify-content: flex-end; }
.j_flx_st{ justify-content: flex-start; }
.j_spc_btw { justify-content: space-between; }
.hide { width: 1px; height: 1px; text-indent: -999999px; position: absolute; top: -999999px; left: -9999pc; overflow: hidden; } 


.wrap { position: relative; }
/*header*/
#header { width: 1340px; height: 100px; margin: 0 auto; }
.gnb > ul {  }
.gnb > ul >li { position: relative; width: 160px; height: 48px; line-height: 48px; text-align: center; }
.gnb > ul >li > a { display: block; width: 100%; height: 100%; font-size: 17px; font-weight: bold; }
.gnb > ul >li:hover > a { color: #fff; background-color :rgb(41, 98, 183, 0.5); }
.sub_menu { position: absolute; top: 48px; left: 0; width: 160px; z-index: 2; background-color: #fff; display: none; }
.sub_menu > li { height: 38px; line-height: 38px; }
.sub_menu > li:hover { color: #111; background-color: rgba(0, 0, 0, 0.1); }


/*main*/
#main{ width: 100%; height: auto; position: relative;}
#main .slide{ width: 100%; height: 350px; overflow: hidden; }
#main .slide .slide_wrap { width: 100%; height: 100%; }
#main .slide .slide_wrap > li { position: relative; width: 100%; height: 100%; }
#main .slide .slide_wrap > li span { padding: 10px 20px; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; }
.m_wrap { width: 1340px; height: auto; margin: 0 auto; position: relative;}
.m_wrap .link { width: 100%; height: 80px; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: -80px; padding: 0 20px; color: #fff; }
.m_wrap .link span { padding-left: 8px; }
.m_wrap .banner { height: 150px; padding: 0 10px; background-color: aliceblue; }
.m_wrap .banner .b_txt {  padding-left: 20px;}
.m_wrap .banner .b_txt .tit { font-size: 17px; height: 48px; line-height: 48px; font-weight: bold; }
.m_wrap .banner .b_txt .txt { font-size: 15px; height: 28px; line-height: 28px; }
.m_wrap .board { width: 55%; margin: 20px 0 ;}
.m_wrap .board .tab_btn > h3{ width: 100px; height: 38px; line-height: 38px; text-align: center; font-size: 17px; font-weight: bold; border: 1px solid #eee; border-bottom: 0; cursor: pointer; }
.m_wrap .board .tab_btn > h3.on { background-color: #3668E8; color: #Fff; }
.m_wrap .board .notice li { height: 48px; line-height: 48px; padding: 0 10px;}
.m_wrap .board .notice li:nth-child(odd) { background-color: #eee; }
.m_wrap .board .notice > ul { border: 1px solid #eee; }
.m_wrap .board .gallery { display: none; }

/*footer*/
#footer { width: 1340px; height: 120px; margin: 0 auto; background-color: #eee; padding: 0 10px; }
#footer .f_logo { margin-right: 40px; }
#footer .f_menu li { width: 150px; height: 38px; line-height: 38px; }
#footer .copy { height: 32px; line-height: 32px; }

/*modal*/
.modal_bg {  position: absolute; top: 0 ; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; }
.modal_bg .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; background-color: #fff; }
.modal_bg .modal h4{  font-size: 17px; font-weight: bold; height: 38px; line-height: 38px; }
.modal_bg .modal p { margin-bottom: 16px; }
.modal_bg .modal button { display: block; width: 150px; margin: 0 auto; padding: 6px 0 ; }
.modal_bg .modal button:hover { background-color: #3668E8; color: #fff; }

 

JQUERY

$(document).ready(function(){
    //서브메뉴
    $('.gnb > ul > li').mouseover(function(){
        $('.gnb > ul > li').children('.sub_menu').stop().fadeOut();
        $(this).children('.sub_menu').stop().fadeIn();
    })
    $('.gnb').mouseleave(function(){
        $('.gnb > ul > li').children('.sub_menu').stop().fadeOut();
    })
    //슬라이드
    $('.slide_wrap >li').hide();
    $('.slide_wrap >li:first-of-type').show();

    setInterval(function(){
        $('.slide_wrap >li:first-of-type').fadeOut().next().fadeIn().end().appendTo('.slide > ul');
    },3000)

    //공지사항tab

    $('.tab_btn .b02').click(function(){
        $('.tab_btn > h3').removeClass('on');
        $(this).addClass('on');
        $('.notice').stop().hide();
        $('.gallery').stop().show();
    })
    $('.tab_btn .b01').click(function(){
        $('.tab_btn > h3').removeClass('on');
        $(this).addClass('on');
        $('.gallery').stop().hide();
        $('.notice').stop().show();
    })
 
    //모달창
    $('.notice > ul > li:first-of-type').click(function(){
        $('.modal_bg').stop().show();
    })
    $('.modal > button').click(function(){
        $('.modal_bg').stop().hide();
    })

})

 

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">
        <main id="main" class="flx j_center">
            <header id="header">
                <h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
                <nav class="gnb">
                    <ul>
                        <li><a href="#" class="dep1">철길마을</a>
                            <ul class="sub_menu">
                                <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="#" class="dep1">주변맛집</a>
                            <ul class="sub_menu">
                                <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="#" class="dep1">주변여행지</a>
                            <ul class="sub_menu">
                                <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="#" class="dep1">도움마당</a>
                            <ul class="sub_menu">
                                <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>
            <section class="conts">
                <div class="banner flx flx_col a_center J_center">
                    <p class="banner_tit">아름다운 철길마을 지금 여행해보세요</p>
                    <button type="button">에약하기</button>
                </div>
                <div class="notice">
                    <h2>공지사항</h2>
                    <ul>
                        <li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항1 입니다.</span><span>2024-06-06</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-06</span></a></li>
                        <li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항4 입니다.</span><span>2024-06-06</span></a></li>
                    </ul>
                </div>
                <div class="gallery">
                    <h2>갤러리</h2>
                    <ul class="flx j_spc_btw">
                        <li><a href="#"><img src="images/gallery_1.png" alt="갤러리이미지1"></a><p class="gallery_txt">철길마을 전경1</p></li>
                        <li><a href="#"><img src="images/gallery_2.png" alt="갤러리이미지2"></a><p class="gallery_txt">철길마을 전경2</p></li>
                    </ul>
                </div>
                <ul class="link flx j_spc_btw">
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link_1.png" alt="바로가기1"><span>전화하기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link_2.png" alt="바로가기2"><span>문의하기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link_3.png" alt="바로가기3"><span>에약하기</span></a></li>
                    <li><a href="#" class="flx flx_col a_center"><img src="images/link_4.png" alt="바로가기4"><span>분실물</span></a></li>
                </ul>
            </section>
            <div class="slide">
                <ul class="slide_wrap flx">
                    <li><a href="#"><img id="iw1" src="images/slide_1.png" alt="슬라이드이미지1"><span>철길마을 이미지1</span></a></li>
                    <li><a href="#"><img id="iw2" src="images/slide_2.png" alt="슬라이드이미지2"><span>철길마을 이미지2</span></a></li>
                    <li><a href="#"><img src="images/slide_3.png" alt="슬라이드이미지3"><span>철길마을 이미지3</span></a></li>
                </ul>
            </div>
        </main>
        <footer id="footer" class="flx j_spc_btw a_center">
            <h3 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="footer로고"></a></h3>
            <div class="f_m">
                <ul class="f_menu flx j_spc_btw a_center">
                    <li><a href="#">footer1</a></li>
                    <li><a href="#">footer2</a></li>
                    <li><a href="#">footer3</a></li>
                    <li><a href="#">footer4</a></li>
                    <li><a href="#">footer5</a></li>
                </ul>
                <div class="copy flx a_center">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</div>
            </div>
            <select class="family_site">
                <option>패밀리사이트1</option>
                <option>패밀리사이트2</option>
                <option>패밀리사이트3</option>
                <option>패밀리사이트4</option>
                <option>패밀리사이트5</option>
            </select>
        </footer>
        <div class="modal_bg">
            <div class="modal">
                <p class="modal_tit">철길마을 이벤트</p>
                <p class="moadl_txt">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
                    무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
                    남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.</p>
                <button type="button" class="close">닫기</button>
            </div>
        </div>
    </div>
</body>
</html>

 

CSS

@charset "UTF-8";

/*reset*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body { width: 100%; height: 100%; color: #333; background-color: #fff; font-size: 15px; }
ul,ol,li { list-style-type: none; }
a, em { text-decoration: none; color: #333; display: block; }
img { vertical-align: top; }
button { border: 0; cursor: pointer; }

/*공통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_flx_st { justify-content: flex-start; }
.j_flx_end { justify-content: flex-end; }
.j_spc_btw { justify-content: space-between; }
.hidden { width: 1px; height: 1px; text-indent: -999999px; position: absolute; z-index: -9999px; font-size: 1px; }


/*main*/
.wrap { width: 100%; height: 100%; position: relative; }
#main { width: 100%; height: calc(100% - 120px); }
#header { width: 200px; height: 100%; border-right: 1px solid #eee; }
#header .logo { margin-top: 20px; }
#header .logo > img { display: block; width: 195px; margin: 0 auto; }
#header .gnb { padding: 0 10px; width: 100%; margin-top: 20px; }
#header .gnb .dep1{ height: 42px; line-height: 42px; padding-left: 20px; font-size: 17px; font-weight: bold; }
#header .gnb .dep1:hover { background-color: #2962B7; color: #fff; }
#header .gnb > ul > li { position: relative; }
#header .gnb .sub_menu { position: absolute; background-color: #2962B7; width: 100%; left: 100%; top: 0; display: none; }
#header .gnb .sub_menu li { height: 42px; line-height: 42px; padding: 0 10px; }
#header .gnb .sub_menu li:hover { background-color: rgba(0, 0, 0, 0.3); }
#header .gnb .sub_menu li > a {  color: #fff;}
.conts { width: 400px; height: 100%; }
.conts .banner { height: 15%; background: url(../images/banner.png) 50% 50%; justify-content: center; }
.conts .banner .banner_tit { color: #fff; background-color: rgba(0, 0, 0, 0.7); font-weight: bold; padding: 6px 20px; }
.conts .banner button { width: 150px; height: 32px; background-color: fff; border: 0; margin-top: 6px; border-radius: 30px; }
.conts .banner button:hover { background-color: #2962B7; color: #fff; font-weight: bold; }
.conts .notice { height: 35%; margin-top: 10px; }
.conts .notice h2,
.conts .gallery h2 { width: 150px; height: 38px; line-height: 38px; font-size: 17px; font-weight: bold; background-color: #eee; text-align: center; }
.conts .notice ul,
.conts .gallery ul { background-color: #eee; padding: 20px 0; }
.conts .notice ul > li { height: 42px; line-height: 42px; }
.conts .notice ul > li > a { padding:  0 10px; }
.conts .notice ul > li:nth-child(2n){ background-color: #fafafa; }

.conts .gallery { height: 35%; }
.conts .link { height: 15%; padding: 0 10px; }
.conts .link span { margin-top: 6px; }
.slide { width: calc(100% - 200px - 400px); height: 100%; overflow: hidden; }
.slide .slide_wrap li { position: relative; width: 100%; height: 100%; }
.slide span { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; font-size: 17px; font-weight: bold; padding: 10px 30px; }

#footer{width: 100%; height: 120px; border-top: 1px solid #eee; padding: 0 20px 0 10px;}
#footer .f_m { width: 50%; height: 100%; }
#footer .f_m .f_menu { height: 50%; padding: 0 30px; }
#footer .f_m .copy { height: 50%; border-top: 1px solid #eee; }
#footer .family_site { width: 150px; height: 42px; padding: 0 10px; }

/*모달창*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; }
.modal_bg .modal { background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; }
.modal_bg .modal .modal_tit { height: 48px; height: 48px; font-size: 17px; font-weight: 700; }
.modal_bg .modal .modal_txt { height: 32px; line-height: 32px;}
.modal_bg .modal button { display: block; width: 150px; height: 32px; margin: 30px auto 0; background-color: #2962B7; color: #Fff; }

 

JQUERY

$(document).ready(function(){
    //서브메뉴
    $('.dep1').mouseover(function(){
        $('.sub_menu').hide()
        $('.dep1').css('background','#fff').css('color','#333');
        $(this).siblings().stop().fadeIn(300);
        $(this).css('background','#2962B7').css('color','#fff');
    })
    $('.gnb > ul > li').mouseleave(function(){
        $('.sub_menu').stop().fadeOut(300);
        $('.dep1').css('background','#fff').css('color','#333');
     })
     //모달창
     $('.notice ul li:first-of-type').click(function(){
        $('.modal_bg').css('display','block');
     })
     $('.close').click(function(){
        $('.modal_bg').css('display','none');
     })
     //슬라이드
    setInterval(function(){
        let iw1 = $('#iw1').width();s
        let iw2 = iw1 + $('#iw2').width();

        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:'-' + iw1 + 'px'});
        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:'-' +  iw2 + 'px'});
        $('.slide_wrap').delay(3000);
        $('.slide_wrap').animate({marginLeft:0});
    })

})

 

+ Recent posts