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

웹디자인기능사 공개도면 A-2 : Green 복지재단

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

 

가로형 레이아웃 / 패밀리사이트 / 가로 전체형 네비게이션 / 좌우롤링배너 / 모달팝업

앞에 just 쇼핑몰과 마찬가지로 이미지는 unsplash에서 다운받은 이미지로 제작했습니다.

헤더 부분은 전체가로메뉴라서 네비게이션 뒤에 배경으로 따로 div 박스를 추가해서 넣어주었습니다.

패밀리 사이트는 select / option 으로 만드는 방법으로 안하고
헤더에 메뉴처럼 div로 처리하고 제이쿼리로 slideDown 효과를 주었습니다.

java script 삽입은 알아서 ~ ^^

 

html

<!DOCTYPE html>
<html lang="kr">

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


<body>
  <!---modal popup start--->
  <div class="popup">
    <div class="popup_body">
      <div class="popup_top">
        <h1>임시휴관안내</h1>
        <p>
          언제 끝날지 모르는<br>
          코로나19 바이러스 긴급상황!<br><br>
          전염병 확산 방지 및 예방을 위하여<br>
          2월 21일부터 임시 휴관합니다.<br><br>
          휴관 종료일은 추후 홈페이지와<br>
          페이스북, 인스타그램을 통해<br>
          공지해드리겠습니다.<br><br>
          문의전화 : 0000-0000
        </p>
      </div>
      <div class="popup_bottom">
        <input type="button" class="팝업닫기" value="닫기">
      </div>
    </div>
  </div>
          <!---modal popup end--->
  <div class="index_box">

    <header>
      <div class="header_box">
        <div class="top_logo">
          <img src="img/Green_logo.png" alt="그린복지재단로고">
        </div>

        <div class="navi_box">
          <div class="navi_box_bg"></div>
          <ul>
            <li class="menu"><a href="#">재단소개</a>
              <div class="submenu_box">
                <a href="#">설립취지</a>
                <a href="#">연혁</a>
                <a href="#">찾아오시는길</a>
              </div>
            </li>
            <li class="menu"><a href="#">후원하기</a>
              <div class="submenu_box">
                <a href="#">국내후원</a>
                <a href="#">국외후원</a>
                <a href="#">맞춤후원</a>
              </div>
            </li>
            <li class="menu"><a href="#">자료실</a>
              <div class="submenu_box">
                <a href="#">서식자료실</a>
                <a href="#">사진자료실</a>
                <a href="#">후원양식</a>
              </div>
            </li>
            <li class="menu"><a href="#">스토리</a>
              <div class="submenu_box">
                <a href="#">웹진</a>
                <a href="#">보고서</a>
                <a href="#">나의 후원</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <section>
      <div class="slide_box">
        <ul class="slide_img">
          <li><img src="img\slide01.jpg" alt="슬라이드1"></li>
          <li><img src="img\slide02.jpg" alt="슬라이드2"></li>
          <li><img src="img\slide03.jpg" alt="슬라이드3"></li>
        </ul>
      </div>
    </section>

    <section>
      <div class="contents">
        <div class="notice">
          <div class="notice_title"><a href="#">공지사항</a></div>
          <ul>
            <li class="popup_button"><a href="#">누르면 모달팝업창이 뜹니다.</a><span>2020-03-19</span></li>
            <li><a href="#">폐타이어로 깔창을?</a><span>2020-03-18</span></li>
            <li><a href="#">지구를 살리는 제로 웨이스트샵</a><span>2020-03-17</span></li>
            <li><a href="#">나눔으로 행복한 미래</a><span>2020-03-16</span></li>
          </ul>
        </div>
        <div class="gallery">
          <div class="gallery_title"><a href="#">갤러리</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 class="banner">
          <div><a href="#"><img src="img/banner.jpg" alt="배너"></a></div>
        </div>
      </div>
    </section>

    <footer>
      <div class="footer_box">
        <div class="bottom_logo">
          <img src="img/Green_logo_mono.png" alt="하단로고">
        </div>
        <div class="copyright">
          <div>Copyright(c) 2019, 웹디자인기능사 All Right Reserved</div>
        </div>
        <div class="family_box">
          <div class="family_list_box">
            <div class="family_site"><a>패밀리 사이트</a><span>▼</span></div>
            <ul>
              <li><a href="#">A사이트</a></li>
              <li><a href="#">B사이트</a></li>
            </ul>
          </div>
          <!----------select/option으로 구현하는 방법
          <select>
            <option value="패밀리사이트">패밀리사이트</option>
            <option value="www.naver.com">A사이트</option>
            <option value="B사이트">B사이트</option>
          </select>
          -------------------------->

        </div>
      </div>
    </footer>

  </div>

  <script type="text/javascript" src="js/menu.js"></script>
  <script type="text/javascript" src="js/slideimg.js"></script>
  <script type="text/javascript" src="js/family.js"></script>
  <script type="text/javascript" src="js/modalpopup.js"></script>

</body>

</html>

css

@charset "UTF-8";

* {
  color: #333333;
  font-size: 13pt;
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

*::selection {
  background: transparent;
}

/*------팝업--------*/
.popup{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 3;
}
.popup_body{
  display: block;
  width: 260px;
  height: 460px;
  text-align: center;
  line-height: 30px;
  background: #ffffff;
  border: 5px solid black;
  margin: 100px auto;
  padding: 30px 20px;
}
.popup_top{
  height: 80%;
}
.popup_top>h1{
  color: #3cb149;
  font-size: 18pt;
  margin-bottom: 20px;
}
.popup_bottom{
  width: 100%;
  height: 20%;
}
.팝업닫기{
  background: #3cb149;
  color: white;
  padding: 10px 30px;
  text-align: center;
  cursor: pointer;
  border: none;
  margin-top: 40px;
}

/*------index-------*/
.index_box {
  background: #ffffff;
  width: 1200px;
  height: 700px;
  margin: 0 auto;
}

/*------헤더------*/
.header_box {
  width: 1200px;
  height: 100px;
  position: relative;
}

.top_logo {
  float: left;
  width: 300px;
  height: 40px;
  text-align: center;
  padding: 30px 0;
}

/*------네비------*/
.navi_box {
  position: absolute;
  width: 600px;
  height: 150px;
  left: 590px;
  margin: 60px 10px 0 0;
  z-index: 1;
}

/*------네비상위메뉴------*/
.menu {
  position: relative;
  float: left;
  width: 150px;
  height: 40px;
  text-align: center;
  font-size: 0;
  background: #3cb149;
}

.menu>a {
  position: relative;
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 1rem;
  transition: 0.5s;
  color: white;
}

.menu:hover>a {
  background: #434748;
  color: #3cb149;
  font-weight: 800;
}

/*------네비하위메뉴------*/
.navi_box_bg {
  display: none;
  position: absolute;
  width: 1200px;
  height: 110px;
  top: 40px;
  left: -590px;
  z-index: 1;
  background: #434748;
  overflow: hidden;
}

.submenu_box {
  display: none;
  position: absolute;
  top: 40px;
  padding: 10px 0;
  overflow: hidden;
  z-index: 2;
}

.submenu_box>a {
  display: block;
  width: 150px;
  height: 30px;
  text-align: center;
  line-height: 32px;
  font-size: 10pt;
  color: white;
  cursor: pointer;
  transition: 0.5s;
}

.submenu_box>a:hover {
  background: white;
  color: #333333;
  font-weight: bold;
}

/*------슬라이드배너------*/
section {}

.slide_box {
  clear: both;
  /*float해제*/
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide_img {
  position: absolute;
  width: 3600px;
  height: 300px;
  transition: 1s;
}

.slide_img>li {
  float: left;
  font-size: 0;
}

/*------컨텐츠------*/
.contents {
  height: 200px;
}

.notice, .gallery, .banner {
  width: 380px;
  height: 180px;
  padding: 10px;
  float: left;
  background: #434748;
}
.notice_title, .gallery_title {
  width: 100px;
  height: 20px;
  padding: 5px 0;
  text-align: center;
  background: #1d8844;
}
.notice_title>a, .gallery_title>a {
  color: white;
}
.notice>ul, .gallery>ul {
  height: 125px;
  padding: 10px;
  background: white;
}

.notice>ul>li {line-height: 28px;}
.notice>ul>li>a {font-size: 10pt;}
.notice>ul>li>span {
  font-size: 10pt;
  float: right;
  color: silver;
}

.notice>ul>li:hover {font-weight: 800;}


.gallery>ul>li {
  width: 100px;
  height: 100px;
  float: left;
  padding: 12.5px 10px;
}

.gallery>ul>li:hover {opacity: 0.5;}

.banner>div>a {
  display: block;
  width: 380px;
  height: 180px;
  overflow: hidden;
}

.banner>div:hover>a>img {transform: scale(1.1); transition: 0.5s;}


/*------푸터------*/
.footer_box {
  height: 100px;
  background: #3cb149;
}

.bottom_logo {
  width: 200px;
  height: 50px;
  float: left;
  padding: 25px 30px;
}

.copyright {
  width: 680px;
  height: 100%;
  float: left;
  display: table;
}
.copyright>div{
  text-align: center;
  display:table-cell;
  vertical-align:middle;
  color: #1d8844;
}

.family_box{
  width: 260px;
  height: 100%;
  float: right;
}
.family_list_box{
  width: 160px;
  height: 25px;
  font-size: 12pt;
  margin: 36px 53px;
  background: white;
  border: 1px solid silver;
}
.family_site{width: 150px; height: 15px; padding:5px; margin: 0 1px; cursor: pointer;}
.family_site>a{float: left;}
.family_site>span{float: right;}
.family_list_box>ul{
  display: none;
  width: 160px; height: auto;
  left: -2px;
  border: 1px solid silver;
  background: white;
}
.family_list_box>ul>li{
  padding: 5px 0 0 5px;
  display: block;
   height: 25px;
  z-index: 3;
}
.family_list_box>ul>li>a{
  font-size: 11pt;
}
.family_list_box>ul>li:hover{
  background: #1d8844;
}

/* 셀렉트옵션태그썼을때

.family_box>select {
  width: 150px;
  height: 25px;
  font-size: 12pt;
  margin: 37.5px 55px;
}

.family_box>select>option {
  font-size: 10pt;
}
*/

Java Script

//메뉴슬라이드
$('.menu a').hover(function(){
  $('.submenu_box').stop().slideToggle();
  $('.navi_box_bg').stop().slideToggle();
  /*
}, function(){
    $('.navi_box_bg').stop().fadeOut();*/
});


//이미지 좌우슬라이드
  setInterval(function(){
    $(".slide_img").delay("2500");
    $(".slide_img").animate({marginLeft:"-1200px"},"700");
    $(".slide_img").delay("2500");
    $(".slide_img").animate({marginLeft:"-2400px"},"700");
    $(".slide_img").delay("2500");
    $(".slide_img").animate({marginLeft:"-1200px"},"700");
    $(".slide_img").delay("2500");
    $(".slide_img").animate({marginLeft:"0"},"700");
  });


//메뉴슬라이드
  $('.family_list_box').hover(function(){
      $(".family_list_box ul").stop().slideDown();
    }, function(){
      $(".family_list_box ul").stop().slideUp();
  });


//팝업
$('.popup_button').click(function(){
  $('.popup').css("display","block");
});

$('.팝업닫기').click(function(){
  $('.popup').css("display","none");
});
저작자표시 비영리 변경금지

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

웹디자인기능사 공개문제 C-2 : 부여가을연꽃축제  (0) 2020.04.01
웹디자인기능사 공개도면 C-1 : 해운대빛축제  (0) 2020.03.27
웹디자인기능사 공개도면 A-4 : 유진건설  (0) 2020.03.26
웹디자인기능사 공개도면 A-3 : 강원천문대  (1) 2020.03.25
웹디자인기능사 공개도면 A-1 : Just 쇼핑몰  (0) 2020.03.23

관련글

댓글

티스토리툴바