본문 바로가기
꿀팁 공유/└ 웹디자인기능사

웹디자인기능사 공개도면 A-4 : 유진건설

by 가을색수달 2020. 3. 26.

 

이번 문제는 배경색이 흰색이 아니라 회색으로 들어가네요 ㅎㅎ 색깔도 3개나 들어가구요..

가운데 이미지 3개 페이드인/아웃하는 제이쿼리 코드를 복잡하게 쓰시는 분들이 많더라고요..
(대부분 배열 방식으로 이미지 순서대로 페이드아웃하고 마지막에 전체 이미지를 다시 불러오는 방법)

제 머리로는 그 코드를 다 외울 수가 없어서..
최대한 쉬운코드를 검색하고 검색해서 찾았습니다~ 예이~!
(요즘 세상에 검색하면 다 나오는데.. 코드 찾아서 복붙하거나 어디 저장해놨다가 쓰면 되지 왜 다 외웁니까 ㅠ)

로고/메인이미지3개/갤러리3개/배너 다 unsplash에서 이미지 다운받아 제작했습니다.

 

 

html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>유진건설</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
</head>


<body>
  <!-----팝업시작----->
  <div id="popup">
    <div class="popup_title">
      본사 방문 관련 안내
    </div>
    <div class="popup_text">
      코로나19 전염병 방지를 위하여<br>
      유진건설에서는 정기 방역 실시는 물론,<br>
      손소독제, 마스크를 항시 구비하고 있습니다.<br><br>
      유진건설은 안심하고 방문하셔도 좋습니다.
    </div>
    <div class="popup_bottom">
      <input type="button" class="팝업닫기" value="닫기">
    </div>
  </div>

  <!-----팝업끝----->

  <div id="index_box">

    <!-----헤더시작----->
    <header>
      <div id="header_box">
        <div class="top_logo">
          <img src="img\eugene_logo.png" alt="유진건설로고">
        </div>
        <div class="navi_box">
        <div class="sub_menu_bg"></div>
          <ul>
            <li><a href="#">회사소개</a>
              <ul class="sub_menu">
                <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>
              </ul>
            </li>
            <li><a href="#">입주정보</a>
              <ul class="sub_menu">
                <li><a href="#">입주단지</a></li>
                <li><a href="#">입주캘린더</a></li>
                <li></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>
                </ul>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <!-----헤더끝----->

    <!-----슬라이드시작----->
    <section>
      <div id="slide_box">
          <div><img src="img/slide01.jpg" alt="슬라이드1"></div>
          <div><img src="img/slide02.jpg" alt="슬라이드2"></div>
          <div><img src="img/slide03.jpg" alt="슬라이드3"></div>
      </div>
    </section>
    <!-----슬라이드끝----->

    <!-----컨텐츠시작----->
    <section>
      <div id="content_box">
        <div class="notice">
          <a class="notice_title">공지사항</a>
          <div>
            <ul>
                <li><a class="팝업버튼" href="#">여기를 클릭하면 팝업이 뜹니다.</a><span>20.03.23.</span></li>
                <li><a href="#">재개발사업지구 도급계약 체결</a><span>20.03.11.</span></li>
                <li><a href="#">주상복합개발 신축공사 수주</a><span>20.02.28.</span></li>
                <li><a href="#">지역경기활성 도시재생 프로젝트</a><span>20.02.07.</span></li>
            </ul>
          </div>
        </div>
        <div class="gallery">
        <a class="gallery_title">갤러리</a>
        <div>
          <ul>
            <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
            <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
            <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
          </ul>
        </div>
        </div>
        <div class="direct">
          <a href="#"><img src="img/direct.jpg" alt="바로가기"></a>
        </div>
      </div>
    </section>
    <!-----컨텐츠끝----->

    <!-----푸터시작----->
    <footer>
     <div id="footer_box">
      <div class="footer_left">
        <div class="bottom_menu">
          <ul>
              <li><a href="#">개인정보처리방침</a></li>|
              <li><a href="#">법적고지</a></li>|
              <li><a href="#">사이버감사실</a></li>|
              <li><a href="#">이용약관</a></li>
          </ul>
        </div>
          
        <div class="copyright">
          © EUGENE Construction All Rights Reserved.
        </div>
      </div>
      <div class="family">
        <div class="family_menu">
          <a>패밀리 사이트</a><span>▼</span>
          <ul>
            <li><a href="#">A사이트</a></li>
            <li><a href="#">B사이트</a></li>
          </ul>
        </div>
      </div>
      </div>
    </footer>
    <!-----푸터끝----->

  </div>

  <script type="text/javascript" src="js/eugene.js">

  </script>
</body>

</html>

css

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-size: 1rem;
    list-style: none;
    color: #333333
}

body {
    background: #f2f2f2;
}

#index_box {
    position: relative;
    width: 1200px;
    height: 700px;
    margin: 0 auto;
}

/*-------팝업시작-------*/
#popup {
    display: none;
    position: absolute;
    top: 160px;
    left: 380px;
    width: 400px;
    height: 250px;
    background: white;
    border: 5px solid #333333;
    z-index: 3;
}

.popup_title {
    padding: 10px 0 10px 10px;
    width: 390px;
    height: 25px;
    font-size: 1.3rem;
    color: white;
    background: #333333;
}

.popup_text {
    padding: 10px;
    height: 140px;
    line-height: 25px;
}

.popup_bottom {
    height: 50px;
    padding-right: 10px;
}

.팝업닫기 {
    padding: 10px 20px;
    background: #ffc000;
    border: none;
    float: right;
}

/*-------팝업끝-------*/

/*-------헤더시작-------*/
#header_box {
    position: relative;
    width: 100%;
    height: 100px;
}

.top_logo {
    float: left;
    width: 150px;
    height: 50px;
    padding: 25px 30px;
}

/*----메뉴시작----*/
.sub_menu_bg {
    position: absolute;
    display: none;
    top: 100px;
    left: -0px;
    width: 1200px;
    height: 140px;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
}

.navi_box {
    margin-top: 60px;
    margin-right: 20px;
    float: right;
    width: 600px;
    z-index: 1;
}

.navi_box > ul {
    display: inline;
    font-size: 0;
}

.navi_box > ul > li {
    display: inline-block;
}

.navi_box > ul > li > a {
    display: block;
    width: 150px;
    height: 20px;
    padding: 10px 0;
    text-align: center;
    font-size: 1.2rem;
    color: white;
    background: #333333;
}

.sub_menu {
    position: absolute;
    display: none;
    width: 150px;
    height: 130px;
    padding-top: 10px;
    z-index: 3;
}

.sub_menu > li {
    width: 150px;
    height: 18px;
    padding: 10px 0;
    text-align: center;
}

.sub_menu > li > a {
    display: block;
    margin: 0 5px;
    width: 140px;
    height: 28px;
    border-bottom: 1px solid grey;
}

.navi_box > ul > li:hover > a {
    color: #ff5050;
}

.sub_menu > li:hover {
    background: #ff5050;
}

.sub_menu > li:hover > a {
    color: white;
}

/*----메뉴끝----*/
/*-------헤더끝-------*/

/*-------슬라이드시작-------*/
#slide_box {
    position: relative;
    width: 1200px;
    height: 300px;
    z-index: 1;
}

#slide_box > div {
    position: absolute;
}

/*-------슬라이드끝-------*/

/*-------컨텐츠시작-------*/
#content_box {
    width: 100%;
    height: 200px;
    background: #ff5050;
}

/*----공지사항시작----*/
.notice {
    float: left;
    width: 380px;
    height: 180px;
    padding: 10px;
}

.notice_title {
    display: block;
    width: 90px;
    height: 20px;
    padding: 5px 0;
    text-align: center;
    background: #ffc000;
    color: white;
}

.notice div {
    width: 350px;
    height: 120px;
    padding: 15px;
    background: white;
}

.notice div > ul > li > a {
    float: left;
    font-size: 0.9rem;
    color: dimgray;
    line-height: 30px;
}

.notice div > ul > li > span {
    float: right;
    font-size: 0.9rem;
    color: dimgray;
    line-height: 30px;
}

.notice div > ul > li:hover > a {
    font-weight: 800;
    color: #333333;
}

/*----공지사항끝----*/
/*----갤러리시작----*/
.gallery {
    float: left;
    width: 380px;
    height: 180px;
    padding: 10px;
}

.gallery_title {
    display: block;
    width: 90px;
    height: 20px;
    padding: 5px 0;
    text-align: center;
    background: #5b9bd5;
    color: white;
}

.gallery div {
    width: 350px;
    height: 110px;
    padding: 20px 15px;
    background: white;
}

.gallery div ul {
    display: flex;
    justify-content: space-between;

}

.gallery div ul li {
    display: inline-block;
}

.gallery div ul li a img {
    width: 110px;
    height: 110px;
}
.gallery div ul li:hover{
    opacity: 0.7;
}

/*----갤러리끝----*/
/*----바로가기시작----*/
.direct {
    float: left;
    width: 380px;
    height: 180px;
    padding: 10px;
}

.direct a img {
    width: 380px;
    height: 180px;
}

/*----바로가기끝----*/
/*-------컨텐츠끝-------*/

/*-------푸터시작-------*/
#footer_box {
    width: 1200px;
    height: 100px;
    background: #333333;
}
/*----하단메뉴시작----*/
.footer_left {
    float: left;
    width: 945px;
    height: 70px;
    padding: 15px 0 15px 15px;
}
.bottom_menu {
    height: 50%;
}
.bottom_menu ul {
    list-style-type: none;
}

.bottom_menu ul li {
    float:left;
    margin-right: 20px;
}

.bottom_menu ul li a {
    color: dimgrey;
    font-size: 0.8rem;
}

.bottom_menu ul li:hover a{
    color: silver;
}
/*----하단메뉴끝----*/
/*----카피라이트시작----*/
.copyright{
    width: 100%;
    height: 20px;
    color: dimgrey;
    font-size: 0.7rem;
    padding-top: 15px;
}
/*----카피라이트끝----*/
/*----패밀리시작----*/
.family{
    float: right;
    width: 20%;
    height: 100px;
}
.family_menu{
    width: 130px;
    height: 20px;
    background: white;
    outline: none;
    margin: 40px auto;
    cursor: pointer;
}
.family_menu>a{
    font-size: 0.8rem;
    margin-left: 5px;
}
.family_menu>span{
    float: right;
    margin-right: 5px;
    font-size: 0.8rem;
    line-height: 22px
}
.family_menu>ul{
    display: none;
    position: absolute;
    width: 128px;
    padding: 5px 0;
    background: white;
    border: 1px solid silver;
}
.family_menu>ul>li>a{
    font-size: 0.8rem;
    line-height: 25px;
    margin-left: 10px;
}

.family_menu>ul>li:hover{
    background: #ff5050;
}

/*----패밀리끝----*/
/*-------푸터끝-------*/

java script

//메뉴박스
$('.navi_box').hover(function () {
    $('.sub_menu').stop().slideToggle();
    $('.sub_menu_bg').stop().slideToggle();
});


//이미지 페이드인아웃
$("slide_box > div:gt(0)").hide();

setInterval(function() { 
  $('#slide_box > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slide_box');
},  3000);


//패밀리사이트
$('.family_menu').mouseenter(function(){
    $('.family_menu>ul').slideDown();
    $('.family_menu>span').text('▲')
});

$('.family_menu').mouseleave(function(){
    $('.family_menu>ul').slideUp();
    $('.family_menu>span').text('▼')
});

//팝업
$('.팝업버튼').click(function(){
   $('#popup').show(); 
});
$('.팝업닫기').click(function(){
   $('#popup').hide(); 
});

이미지 페이드인/아웃 참고 블로그 : https://imivory.tistory.com/5

저작자표시 비영리 변경금지

'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제  (0) 2020.04.01
웹디자인기능사 공개도면 C-1 : 해운대빛축제  (0) 2020.03.27
웹디자인기능사 공개도면 A-3 : 강원천문대  (1) 2020.03.25
웹디자인기능사 공개도면 A-2 : Green 복지재단  (0) 2020.03.24
웹디자인기능사 공개도면 A-1 : Just 쇼핑몰  (0) 2020.03.23

관련글

댓글

티스토리툴바