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

웹디자인기능사 공개도면 A-3 : 강원천문대

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

 

가로형 레이아웃 / 가로 고정 메뉴 네비게이션 / 페이드인아웃 배너 / 탭메뉴

로고는 텍스트로만하니 심심해서 포토샵 모양으로 달이랑 별 이미지를 넣어주었습니다 ㅋㅋ

갤러리탭 이미지 정렬 할 때 css에 display: flex;  justify-content: space-between; 값을 넣으니
보기좋게 균등배치돼서 좋더군요! margin으로 조절했었는데 훨씬 편하네요.

메인이미지 페이드인/아웃 효과 넣는것만 해도 머리가 아픈데
탭메뉴까지 제이쿼리 구현하는게 너무 머리아파서... 탭메뉴는 쉽게쉽게 갔습니다.
버튼부분 따로, 내용부분 따로 div로 감싼 다음에,
제이쿼리는 버튼은 클릭시 background 색 변경, 내용은 fadeIn()/hide() 이용해서 보였다 안보였다하게 ㅋㅋ 

사용된 이미지와 푸터 하단메뉴는 임의로 넣었습니다. (이미지 출처 : unsplash)

 

html

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

<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 class="index_box">
    <!---팝업시작--->
    <div class="popup_window">
      <div class="popup_content">
        <div class="popup_top">
          <h3>강원천문대 휴관안내</h3>
          감염병 위기단계가 '심각'수준으로 격상됨에 따라<br>
          강원도 지침에 의거 강원천문대를 휴관합니다.<br><br>
          추후 확산 추이에 따라 천문대 재개예정에 있으며<br>
          홈페이지를 통해 공지될 예정입니다.<br><br>
          문의 : 강원천문대 행정과 000-000-0000
        </div>
        <div class="popup_bottom">
          <input type="button" class="팝업닫기" value="닫기">
        </div>
      </div>
    </div>
    <!---팝업끝--->

    <!---헤더시작--->
    <header>
      <div id="header_box">

        <div class="logo_box">
          <a href="index.html"><img src="img/observatory_logo.png" alt="강원천문대로고"></a>
          <!--100x40px로 제작-->
        </div>

        <!---메뉴네비게이션시작--->
        <div class="navi_box">
          <ul>
            <li><a class="menu" href="#">강원천문대</a>
              <ul class="submenu">
                <li><a href="#">천문대소개</a></li>
                <li><a href="#">인사말</a></li>
                <li><a href="#">오시는길</a></li>
              </ul>
            </li>
            <li><a class="menu" href="#">이용안내</a>
              <ul class="submenu">
                <li><a href="#">프로그램</a></li>
                <li><a href="#">관람시간표</a></li>
                <li><a href="#">이달의 별자리</a></li>
              </ul>
            </li>
            <li><a class="menu" href="#">천문대예약</a>
              <ul class="submenu">
                <li><a href="#">예약하기</a></li>
                <li><a href="#">예약확인</a></li>
                <li><a href="#">예약취소</a></li>
              </ul>
            </li>
            <li><a class="menu" href="#">커뮤니티</a>
              <ul class="submenu">
                <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">
        <a href="#"><img src="img/slide01.jpg" alt="슬라이드1"></a>
        <a href="#"><img src="img/slide02.jpg" alt="슬라이드2"></a>
        <a href="#"><img src="img/slide03.jpg" alt="슬라이드3"></a>
      </div>
    </section>

    <section>
      <!---컨텐츠시작--->
      <div id="contents_box">

        <div class="left_contents">
          <ul class="tab_menu">
            <li><a href="#" title="tab1">공지사항</a></li>
            <li><a href="#" title="tab2">갤러리</a></li>
          </ul>

          <div class="content">
            <div class="tab1">
              <ul>
                <li><div><a class="팝업버튼">여기를 누르면 팝업이 뜹니다</a><span>20.03.20.</span></div></li>
                <li><div><a href="#">천체관측동아리 회원 모집</a><span>20.03.19.</span></div></li>
                <li><div><a href="#">천문대 체험학습 단체회원 모집</a><span>20.03.18.</span></div></li>
                <li><div><a href="#">2020년 2분기 천문대 행사</a><span>20.03.17.</span></div></li>
              </ul>
            </div>
            <div class="tab2">
              <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>

          <div class="mini_banner">
            <a href="#"><img src="img/mini_banner.jpg" alt="배너"></a>
          </div>

          <div class="direct_link">
            <a href="#"><img src="img/direct_link.jpg" alt="바로가기"></a>
          </div>

        </div>
    </section>
    <!---컨텐츠끝--->

    <footer>
      <div id="footer_box">
        <div class="bottom_logo">
          <a href="#"><img src="img/logo_mono.jpg" alt="하단로고"></a>
        </div>
        <div class="footer_right">
          <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>|
              <li><a href="#">이용안내</a></li>|
              <li><a href="#">고객센터(033-0000-0000)</a></li>
            </ul>
          </div>
          <div class="copyright">
            <a>Copyright(c) 2019, 웹디자인기능사 All Right Reserved</a>
          </div>
        </div>
      </div>
    </footer>

  </div>

  <script type="text/javascript" src="js/강원천문대.js"></script>
</body>

</html>

CSS

@charset "UTF-8";

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

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

.popup_window{
  display: none;
  position: absolute;
  z-index: 3;
  top: 150px;
  left: 400px;
}
.popup_content{
  width: 400px;
  height: 250px;
  padding: 20px;
  background: white;
  border: 5px solid #30a3f3;
}
.popup_top{
  height: 90%;
}
.popup_top h3{
  color: #30a3f3;
  height: 40px;
}
.팝업닫기{
  background-color: #333333;
  color: white;
  border: none;
  padding: 10px 30px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
.팝업버튼{
  cursor: pointer;
}


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

.logo_box{
  float: left;
  width: 180px;
  height: 40px;
  padding: 30px 25px;
}

/*---메뉴네비게이션---*/
.navi_box{
  position: absolute;
  float: right;
  width: 800px;
  height: 30px;
  top: 40px;
  left: 380px;
}
.navi_box>ul{
  display: inline;
}
.navi_box>ul>li{
  display: inline-block;
  position: relative;
  float: left;
  width: 200px;
  height: 40px;
  text-align: center;
  background: #30a3f3;
}
.menu{
  display: block;
  width: 180px;
  height: 20px;
  margin: 10px 10px;
}
.navi_box>ul>li:hover{
  background: #0066ad;
  transition: 1s;
}
.navi_box>ul>li:hover>a{
  font-weight: 800;
  color: white;
}
.submenu{
  display: none;
  position: absolute;
  width: 200px;
  background: rgba(0,0,0,0.7);
  padding: 10px 0;
  z-index: 2;
}
.submenu>li{
  width: 200px;
  height: 20px;
  padding: 10px 0;
}
.submenu>li>a{
  color: white;
}
.submenu>li:hover{
  background: white;
}
.submenu>li:hover>a{
  font-weight: 800;
  color: #333333;
}

/*-----이미지슬라이드-----*/
#slide_box{
  position: relative;
  height:300px;
}

#slide_box>a{
  position: absolute;
  width: 1200px;
  height: 300px;
}


/*-----컨텐츠-----*/
#contents_box{
  height: 200px;
  background: #0066ad;
}

/*----탭메뉴---*/
.left_contents{
  display: block;
  float: left;
  width: 380px;
  height: 180px;
  margin: 10px;
  overflow: hidden;
}
.tab_menu{
  width: 380px;
  height: 30px;
}
.tab_menu li a{
  float: left;
  width: 100px;
  height: 22px;
  padding: 4px 0;
  text-align: center;
  background: silver;
}
.tab_menu li a:hover,
.tab_menu li a:hover::after,
.tab_menu li a:focus,
.tab_menu li a:focus::after{
  background: white;
}
.tab_menu li a::after{
  position: absolute;
  background: silver;
}
.tab_menu #current a,
.tab_menu #current a::after{
  background: white;
  z-index: 3;
}


.content{
  position: relative;
  width: 350px;
  height: 120px;
  background: white;
  padding: 15px; 20px;
}
.tab1{
  width: 350px;
  height: 120px;
}
.tab1 ul div a{
  float: left;
  font-size: 0.8rem;
  color: dimgrey;
  line-height: 28px;
}
.tab1 ul div span{
  float: right;
  font-size: 0.8rem;
  color: dimgrey;
  line-height: 28px;
}
.tab1 ul div a:hover{
  color: #333333;
  font-weight: 800;
}

.tab2{
  width: 350px;
  height: 120px;
}
.tab2 ul{
  display: flex;
  justify-content: space-between;
}
.tab2 ul li{
  display: inline-block;

}
.tab2 ul li a img{
  width: 110px;
  height: 110px;
}

/*----탭메뉴끝---*/

.mini_banner{
  display: block;
  float: left;
  width: 400px;
  height: 100%;
}
.mini_banner>a{
  display: block;
  height: 180px;
  margin: 10px;
}
.direct_link{
  display: block;
  float: left;
  width: 400px;
  height: 200px;
}
.direct_link>a{
  display: block;
  height: 180px;
  margin: 10px;
}



#footer_box{
  height: 100px;
  background: #333333;
}
.bottom_logo{
  float: left;
  width: 180px;
  height: 40px;
  padding: 30px 25px;
}
.footer_right{
  float: right;
  width: 970px;
  height: 100px;
}
.bottom_menu{
  text-align: center;
  padding-top: 10px;
}
.bottom_menu>ul{
  display: inline;
  color: silver;
  font-size: 0.7rem;
}
.bottom_menu>ul>li{
  display: inline-block;
}
.bottom_menu>ul>li>a{
  color: silver;
  font-size: 0.7rem;
  margin : 30px;
}
.bottom_menu>ul>li>a:hover{
  color: white;
}
.copyright{
  padding-top: 25px;
  text-align: center;
}
.copyright a{
  color: silver;
  font-size: 0.7rem;
}

Java Script

//메뉴슬라이드
$('.navi_box').hover(function() {
  $('.submenu').stop().slideToggle();
});


//이미지페이드인아웃
start();
var imgs = $('#slide_box>a').length - 1;
var now = 0;

function start() {
  $('#slide_box>a').eq(0).siblings().fadeOut('slow');
  setInterval(function() {
    slide();
  }, 3000);
};

function slide() {
  now = now == imgs ? 0 : now += 1;
  $('#slide_box>a').eq(now - 1).fadeOut('slow');
  $('#slide_box>a').eq(now).fadeIn('slow');
};


//공지사항갤러리 탭메뉴
$('.content').children().hide();
$('.content div:first').fadeIn();
$('.tab_menu li:first a').css('background','white');

$('.tab_menu li:last a').click(function(){
$('.tab_menu li:last a').css('background','white');
$('.tab_menu li:first a').css('background','silver');
$('.content div:first').css('display','none');
$('.content div:last').fadeIn();
});

$('.tab_menu li:first a').click(function(){
$('.tab_menu li:first a').css('background','white');
$('.tab_menu li:last a').css('background','silver');
$('.content div:first').fadeIn();
$('.content div:last').css('display','none');
});


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

 이미지 페이드 인 아웃 참고 : (도서) 김승일. 2019. 웹디자인기능사 7일 완성. e퍼플.

  now = now == imgs ? 0 : now += 1; 부분은 저도 이해가 잘 안가서 연구중 .. ㅠㅠ.. 그냥 외워야하나..;

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

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

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

관련글

댓글

티스토리툴바