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 © 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');
})
})'웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 코드 F-3 오픈뱅킹 (0) | 2025.02.24 |
|---|---|
| 웹디자인기능사 실기 코드 F-1 주식회사 기능건설 (1) | 2025.02.21 |
| 웹디자인기능사 실기 코드 E-4 철길마을 (0) | 2025.02.20 |
| 웹디자인기능사 실기 코드 E-3 영상박물관 (0) | 2025.02.18 |
| 웹디자인기능사 실기 코드 D-4 리빙샵아울렛 (1) | 2025.02.17 |
