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

웹디자인기능사 공개도면 A-1 : Just 쇼핑몰

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

 

가로형 레이아웃 / 탭메뉴 / 가로 고정형 네비게이션 / 상하롤링배너

로고는 그냥 텍스트로만 쓰여진 이미지로 제작했고,
이미지는 큐넷에서 제공해주지 않기 때문에 unsplash 사이트에서 다운받아 임의 제작했습니다.

제이쿼리는 jquery-1.12.3.js를 다운받아서 썼습니다. (파일은 인터넷에서 검색해서 받으세요)

INDEX 자체를 처음 만들어본거라 책이랑 구글링으로 찾아가며 만들어봤는데
더 빠르고 효율적인 방법이 있다면 알려주세요 ~

 

 

html

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

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <title>JUST 쇼핑몰</title>
  <script type="text/javascript" src="script\jquery-1.12.3.js">
  </script>
  <link rel="stylesheet" type="text/css" href="css\style.css" />
</head>

<body>
  <div class="box">

    <!--헤더시작-->
    <header>
      <div class="header">
        <div class="logo">
          <a href="index.html"><img src="images\logo.jpg" alt="저스트쇼핑몰로고"></a>
        </div>
        <div class="navi_box">
          <ul>
            <li><a href="#">탑</a></li>
            <li><a href="#">아우터</a></li>
            <li><a href="#">팬츠</a></li>
            <li><a href="#">악세사리</a></li>
          </ul>
          <div class="menu_box">
            <ul>
              <li>
                <p><a href="#">블라우스</a></p>
                <p><a href="#">티</a></p>
                <p><a href="#">셔츠</a></p>
                <p><a href="#">니트</a></p>
              </li>
              <li>
                <p><a href="#">자켓</a></p>
                <p><a href="#">코트</a></p>
                <p><a href="#">가디건</a></p>
                <p><a href="#">머플러</a></p>
              </li>
              <li>
                <p><a href="#">청바지</a></p>
                <p><a href="#">짧은바지</a></p>
                <p><a href="#">긴바지</a></p>
                <p><a href="#">레깅스</a></p>
              </li>
              <li>
                <p><a href="#">귀고리</a></p>
                <p><a href="#">목걸이</a></p>
                <p><a href="#">반지</a></p>
                <p><a href="#">팔찌</a></p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <!--헤더끝-->
    
    <!--슬라이드시작-->
    <section>
      <div id="slide_wrap">
        <div class="slide_box">
          <ul>
            <li><a href="#"><img src="images\images (1).jpg" alt="슬라이드1" /></a></li>
            <li><a href="#"><img src="images\images (2).jpg" alt="슬라이드2" /></a></li>
            <li><a href="#"><img src="images\images (3).jpg" alt="슬라이드3" /></a></li>
          </ul>
        </div>
      </div>
    </section>
    <!--슬라이드끝-->
    
    <!--컨텐츠시작-->
    <section>
      <div class="contents_box">

        <div class="notice_box">
          <ul class="tab_menu">
            <li class="notice">
              <a href="#">공지사항</a>
              <div class="contents">
                <ul>
                  <li id="popup_button">
                    <div><a href="#">네번째 공지사항 입니다.</a><span>2019.03.28</span></div>
                  </li>
                  <li>
                    <div><a href="#">세번째 공지사항 입니다.</a><span>2019.03.27</span></div>
                  </li>
                  <li>
                    <div><a href="#">두번째 공지사항 입니다.</a><span>2019.03.26</span></div>
                  </li>
                  <li>
                    <div><a href="#">첫번째 공지사항 입니다.</a><span>2019.03.25</span></div>
                  </li>
                </ul>
              </div>
            </li>
            <li class="gallery">
              <a href="#">갤러리</a>
              <div class="contents">
                <ul>
                  <li><a href="#"><img src="images/gallery1.jpg" alt="갤러리"></a></li>
                  <li><a href="#"><img src="images/gallery2.jpg" alt="갤러리"></a></li>
                  <li><a href="#"><img src="images/gallery3.jpg" alt="갤러리"></a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>

        <!--공지사항클릭시팝업-->
        <div class="popup">
          <div class="popup_body">
            <div class="popup_top">
              <h2>타이틀</h2>
              <p>
                JUST 쇼핑몰 팝업입니다<br>
                JUST 쇼핑몰 팝업입니다<br>
                JUST 쇼핑몰 팝업입니다<br>
                JUST 쇼핑몰 팝업입니다<br>
                JUST 쇼핑몰 팝업입니다<br>
              </p>
            </div>
            <div class="popup_bottom">
              <input type="button" class="팝업닫기" value="닫기" width="100px">
            </div>
          </div>
        </div>
        <!--팝업끝-->

        <!---배너박스--->
        <div class="banner_box">
          <a href="#"><img src="images\banner.jpg" alt="원피스세일배너"></a>
        </div>
        <!---배너박스끝--->

        <!---링크박스--->
        <div class="link_box">
          <a href="#"><img src="images\callcenter.jpg" alt="콜센터안내"></a>
        </div>
        <!---링크박스끝--->
      </div>
    </section>
    <!--컨텐츠끝-->

    <!--푸터시작-->
    <footer>
      <div class="footer_box">
        <div class="down_logo">
          <a href="index.html"><img src="images\bottom_logo.png" alt="하단로고"></a>
        </div>
        <div class="copyright">
          <p>Copyright(c) 2019, 웹디자인기능사 All Right Reserved</p>
        </div>
        <div class="sns">
        <ul>
          <li><a href="#"><img src="images\sns (2).jpg" alt="카톡"></a></li>
          <li><a href="#"><img src="images\sns (3).jpg" alt="인스타"></a></li>
          <li><a href="#"><img src="images\sns (1).jpg" alt="페북"></a></li>
        </ul>
        </div>
      </div>
    </footer>
    <!---푸터끝--->


    <script type="text/javascript" src="script\menu.js"></script>
    <script type="text/javascript" src="script\slide.js"></script>
    <script type="text/javascript" src="script\tab_menu.js"></script>
    <script type="text/javascript" src="script\popup.js"></script>


</body>

</html>

css

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: "맑은 고딕";
  font-size: 14px;
  color: #222328;
}

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

/*헤더*/
.header {
  width: 1200px;
  height: 100px;
}

.logo {
  width: 200px;
  height: 100%;
  float: left;
}
.logo>a{
  display: block;
  width: 200px;
  height: 40px;
  margin: 30px auto;
}

/*--navi_whole_box--*/
.navi_box {
  float: right;
  width: 600px;
  height: 50px;
  margin: 25px 25px;
}

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

.navi_box>ul>li {
  display: inline-block;
  width: 150px;
  height: 50px;
  text-align: center;
}

.navi_box>ul>li>a {
  display: block;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
  color: black;
  background: khaki;
}

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

/*--navi_menu_box--*/
.menu_box {
  position: absolute;
  width: 600px;
  height: 220px;
  background: rgba(255, 255, 255,0.9) !important;
  display: none;
  z-index: 1;
}

.menu_box>ul {
  display: inline;
  width: 600px;
  font-size: 0;
}

.menu_box>ul>li {
  display: inline-block;
  width: 150px;
  height: 200px;
  vertical-align: top;
  text-align: center;
  padding: 10px 0;
}

.menu_box>ul>li:hover {
  background: white;
}

.menu_box>ul>li>p>a {
  display: block;
  width: 150px;
  height: 20px;
  padding: 10px 0;
  font-size: 12pt;
}

.menu_box>ul>li>p>a:link, a:visited {
  text-decoration: none;
  color: dimgray;
}

.menu_box>ul>li>p>a:hover {
  background: #940d0d;
  color: white;
  font-weight: bold;
}

/*-----슬라이드-----*/
#slide_wrap {
  clear: both;
  width: 1200px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}

.slide_box {
  overflow: hidden;
}

.slide_box>ul>li>a>img {
  display: block;
  border: 0;
  width: 1200px;
  height: 300px;
  transition: 1s;
}

/*컨텐츠*/
.contents_box {
  width: 100%;
  height: 200px;
}

.notice_box {
  float: left;
  width: 400px;
  height: 200px;
  background: khaki;
}

.tab_menu{
  position: relative;
  width: 380px;
  height: 180px;
  margin: 10px;
  overflow: hidden;
}
.tab_menu>.notice>a{
  color: black;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 12px;
  display: block;
  float: left;
  background: white;
  width: 100px;
  height: 20px;
}
.tab_menu>.gallery>a{
  color: black;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding: 12px;
  display: block;
  float: left;
  background: darkkhaki;
  width: 100px;
  height: 20px;
}

.tab_menu>li+li>a{
  left:100px;
}

li.notice>.contents{
  position: absolute;
  width: 340px;
  height: 110px;
  margin-top: 40px;
  background: white;
  padding: 15px 20px;
}

.contents>ul>li>div{
  width: 100%;
  height: 30px;
}
.contents>ul>li>a{
  float: left;
}
.contents>ul>li>div>span{
  float: right;
}
li.gallery>.contents{
  position: absolute;
  overflow: hidden;
  height:0;
}
.contents>ul>li>a>img{
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

/*쇼핑몰팝업*/
.popup{
  display: none;
  position: fixed;
  top: 100px;
  left: 350px;
  background: rgba(0,0,0,0,6);
}
.popup_body{
  width: 200px;
  height: 300px;
  padding: 20px;
  background: white;
  border: 2px solid black;
}
.popup:active{
  display: block;
  opacity: 1;
}
.popup_top{
  height:80%;
  text-align: center;
  margin-bottom: 20px;
}
.popup_top h2{
  color:orange;
  margin-bottom: 20px;
  font-size: 20pt;
}
.popup_bottom{
  text-align: right;
}
.팝업닫기{
  background-color: red;
  color: white;
  border: none;
  padding: 10px 30px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}
/*쇼핑몰팝업끝*/

.banner_box {
  float: left;
  width: 400px;
  height: 200px;
  background: khaki;
}
.banner_box>a{
  overflow: hidden;
  display: block;
  margin:10px;
  width:380px;
  height:180px;
}

.link_box {
  float: right;
  width: 400px;
  height: 200px;
  background: khaki;
}
.link_box>a{
  overflow: hidden;
  display: block;
  margin:10px;
  width:380px;
  height:180px;
}

/*푸터*/
.footer_box {
  width: 100%;
  height: 100px;
  background: dimgray;
}

.down_logo {
  float: left;
  width: 200px;
  height: 100%
}
.down_logo>a{
  display: block;
  margin: 30px 0;
}

.copyright {
  float: left;
  width: 800px;
  height: 100px;
  text-align: center;
  display: table;
}

.copyright>p{
  display: table-cell;
  vertical-align: middle;
  color: white;
}

.sns {
  float: right;
  width: 140px;
  height: 60px;
  padding: 20px;
  display: table;
}

.sns>ul{
  margin:20 auto;
  width: 140px;
  height: 30px;
  display: table-cell;
  vertical-align: middle;
}
.sns>ul>li{
  float: right;
}
.sns>ul>li>a>img{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

Java Script

//메뉴 슬라이드

$(".navi_box").mouseover(function(){
  $(this).children(".menu_box").stop().slideDown();
})

$(".navi_box").mouseleave(function(){
  $(this).children(".menu_box").stop().slideUp();
})


//팝업

 $('#popup_button').on('click', function(){
     $('.popup').fadeIn();
 });

 $('.팝업닫기').on('click', function(){
     $('.popup').fadeOut();
 });


//아래에서 위로 올라가는 이미지 슬라이드.

setInterval( function(){             //setInterval(); 함수 반복 실행
  $(".slide_box").delay("2500");
  $(".slide_box").animate({marginTop:  "-300px" },"500");
  $(".slide_box").delay("2500");
  $(".slide_box").animate({marginTop:  "-600px" },"500");
  $(".slide_box").delay("2500");
  $(".slide_box").animate({marginTop:  "0" },"500");
});


//탭메뉴

$(".tab_menu > li > a").click(function() {
  $(this).parent().attr('class',"notice").siblings().attr('class',"gallery");
  return false;
});

이미지 슬라이드 코드 참고 : https://m.blog.naver.com/smilemauve/221494972936

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

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

웹디자인기능사 공개문제 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-2 : Green 복지재단  (0) 2020.03.24

관련글

댓글

티스토리툴바