html

html file
<!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>