웹디자인기능사
웹디자인기능사 실기 코드 F-1 주식회사 기능건설
ddururu
2025. 2. 21. 19:16
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 © 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();
})
})