마카로닉스

1924 No

웹표준 사이트 만들기 ( Webstoryboy) - 4 css footer 꾸미기, 슬릭 슬라이드 배너 적용, 메뉴 토글 적용, 슬릭 무비 갤러리 적용

2022-09-14 12:29:42 By 라이트 0 756 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

강의 목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg

01. 웹표준 사이트 만들기 - 기본 셋팅하기
02. 웹표준 사이트 만들기 - Layout1
03. 웹표준 사이트 만들기 - Layout2
04. 웹표준 사이트 만들기 - Layout3
05. 웹표준 사이트 만들기 - Layout4
06. 웹표준 사이트 만들기 - header1
07. 웹표준 사이트 만들기 - header2
08. 웹표준 사이트 만들기 - header3
09. 웹표준 사이트 만들기 - header4
10. 웹표준 사이트 만들기 - header5
11. 웹표준 사이트 만들기 - header6
12. 웹표준 사이트 만들기 - header7
13. 웹표준 사이트 만들기 - header8
14. 웹표준 사이트 만들기 - nav1
15. 웹표준 사이트 만들기 - nav2
16. 웹표준 사이트 만들기 - tit1
17. 웹표준 사이트 만들기 - tit2
18. 웹표준 사이트 만들기 - ban1
19. 웹표준 사이트 만들기 - ban2
20. 웹표준 사이트 만들기 - cont1
21. 웹표준 사이트 만들기 - cont2
22 .웹표준 사이트 만들기 - cont3
23.웹표준 사이트 만들기 - notice1
24.웹표준 사이트 만들기 - notice2
25. 웹표준 사이트 만들기 - notice3
26. 웹표준 사이트 만들기 - notice4
27. 웹표준 사이트 만들기 - Notice hover
28. 웹표준 사이트 만들기 - Notice hover2
29. 웹표준 사이트 만들기 - Notice hover3
30. 웹표준 사이트 만들기 - Notice hover4
31. 웹표준 사이트 만들기 - tab menu1
32. 웹표준 사이트 만들기 - tab menu2
33. 웹표준 사이트 만들기 - tab menu3
34. 웹표준 사이트 만들기 - notice5
35. 웹표준 사이트 만들기 - ad
36. 웹표준 사이트 만들기 - gallery
37. 웹표준 사이트 만들기 - login1
38. 웹표준 사이트 만들기 - login2
39. 웹표준 사이트 만들기 - login3
40. 웹표준 사이트 만들기 - login4
41. 웹표준 사이트 만들기 - login5
42. 웹표준 사이트 만들기 - login6
43. 웹표준 사이트 만들기 - footer
44. 웹표준 사이트 만들기 - w3c
45. 웹표준 사이트 만들기 - jquery nav1
46. 웹표준 사이트 만들기 - jquery nav2
47. 웹표준 사이트 만들기 - jquery nav3

강의 자료는 여기서 참고하세요~

현재 준비중이지만 http://webstoryboy.co.kr/3

HTML/CSS는 여기서 참고하세요~ http://coderap.tistory.com/

동영상 소스는 여기서 확인하세요~ http://wtss.tistory.com/category/Webs...

CSS 소스는 여기서 확인하세요~ http://wsss.tistory.com/

이쿼리 소스는 여기서 확인하세요 http://codejss.tistory.com/

소스 :

1) https://github.com/webstoryboy/webstandard

2) https://github.com/braverokmc79/web_publishing_project1

결과 화면 : https://braverokmc79.github.io/web_publishing_project1/#

43. 웹표준 사이트 만들기 - footer

index.html

        <div id="footer">
            <div class="container">
                <div class="footer">
                    <ul>
                        <li><a href="#">사이트 도움말</a></li>
                        <li><a href="#">사이트 이용약관</a></li>
                        <li><a href="#">사이트 운영규칙</a></li>
                        <li><a href="#"><strong>개인정보취급방침</strong></a></li>
                        <li><a href="#">책임의 한계와 법적고지</a></li>
                        <li><a href="#">게시중단요청서비스</a></li>
                        <li><a href="#">고객센터</a></li>
                    </ul>
                    <address>
                        <em>Copyright &copy;</em>
                        <a href="https://braverokmc79.github.io/web_publishing_project1/" target="_blank">webstoryboy.co.kr</a>
                        <span>All Right Reserved</span>
                    </address>

                    <div class="w3c">
                            <p>
                            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                <img style="border:0;width:88px;height:31px"
                                    src="//jigsaw.w3.org/css-validator/images/vcss"
                                    alt="올바른 CSS입니다!" />
                            </a>
                        </p>
                        <p>
                            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                <img style="border:0;width:88px;height:31px"
                                    src="//jigsaw.w3.org/css-validator/images/vcss-blue"
                                    alt="올바른 CSS입니다!" />
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- //footer -->

style.css

/* footer */
.footer {text-align: center; padding: 30px 0;}
.footer ul{}
.footer li{display: inline;}
.footer li::after{content: '|'; margin: 0 10px}
.footer li:last-child::after{content: ''; margin-right: 0px}
.footer address{padding-top: 20px;}


.w3c{margin-top: 10px;}
.w3c p{display: inline;}

44. 웹표준 사이트 만들기 - w3c

index.html

             <div class="w3c">
                            <p>
                            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                <img style="border:0;width:88px;height:31px"
                                    src="//jigsaw.w3.org/css-validator/images/vcss"
                                    alt="올바른 CSS입니다!" />
                            </a>
                        </p>
                        <p>
                            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                                <img style="border:0;width:88px;height:31px"
                                    src="//jigsaw.w3.org/css-validator/images/vcss-blue"
                                    alt="올바른 CSS입니다!" />
                            </a>
                        </p>
                    </div>

style.css

.w3c{margin-top: 10px;}
.w3c p{display: inline;}

45. 웹표준 사이트 만들기 - jquery nav1

slick slider 이미지 화살표

https://kenwheeler.github.io/slick/

head

<head>
~

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>


~
</head>
<body>
~

body

            
            <div id="cont-ban">                
                <div class="container">
                    <div class="ban">                        
                        <ul class="main_img">
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
                            <li class="item"><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
                        </ul>
                    </div>                   
                </div>
            </div>
            <!-- //cont-ban -->

body 아래

   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
   <script type="text/javascript">
    $('.main_img').slick({
      dots: true,     
 
/*    fade: true,
      cssEase: 'linear' */
           
      infinite: true , /* 맨끝이미지에서 끝나지 않고 다시 맨앞으로 이동 */
      slidesToShow: 3, /* 화면에 보여질 이미지 갯수*/
      slidesToScroll: 1,  /* 스크롤시 이동할 이미지 갯수 */
      autoplay: true, /* 자동으로 다음이미지 보여주기 */
      arrows: true, /* 화살표 */
      dots:true, /* 아래점 */
      autoplaySpeed:3000,/* 다음이미지로 넘어갈 시간 3초 */
       
      speed:1000 , /* 다음이미지로 넘겨질때 걸리는 시간 */
      pauseOnHover:true, /* 마우스 호버시 슬라이드 이동 멈춤 */
    //  nextArrow: '<i class="fa fa-angle-right"></i>',
      //prevArrow: '<i class="fa fa-angle-left" style="font-size:15px;"></i>'
 
       
      //vertical:true,/* 세로방향으로 슬라이드를 원하면 추가하기// 기본값 가로방향 슬라이드*/       
     // responsive: [
     //  { /* 반응형웹*/
     //      breakpoint: 960, /* 기준화면사이즈 */
     
     //      settings: {slidesToShow:2 } /* 사이즈에 적용될 설정 */
     
              
     //  },
     
     //  {
             /* 반응형웹*/
     //      breakpoint: 768, 
             /* 기준화면사이즈 */
     //      settings: {slidesToShow:1 } /* 사이즈에 적용될 설정 */ 
     //      }
     
     // ]
 
});
</script>
</body>
</html>

css

/* slick */
.ban{padding: 30px 0 20px 0;}
.ban ul{overflow: hidden;}
.ban ul li{float: left;  text-align: center; } 

.main_img{position: initial;}  
.main_img .item a{display: inline-block; text-align: center;}
.slick-arrow{border: none; cursor: pointer;text-indent: -99999px;}
.slick-prev {position: absolute; left: -50px; top: 70px;  width:43px; height: 43px;  background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -150px  0px;}
.slick-next {position: absolute; right: -50px; top: 70px;  width:43px; height: 43px;  background:url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png)  -150px -43px;}
.slick-prev:hover{background-position-x: -193px; }
.slick-next:hover{background-position-x: -193px; }

.slick-dots{ display: flex;justify-content: center; margin-top: 15px;}
.slick-dots li{padding: 0 3px;}
.slick-dots button {display: block;width: 1rem;height: 1rem;padding: 0; border: none;border-radius: 100%;background-color: #5dbfeb;text-indent: -9999px;cursor: pointer;}
.slick-dots li.slick-active button {background-color: #2b91c8;}

46. 웹표준 사이트 만들기 - jquery nav2

47. 웹표준 사이트 만들기 - jquery nav3

48. 웹표준 사이트 만들기 - 메뉴 토글 적용

메뉴 토글

/* contents layout */
#cont-nav{background: url(../img/body_bg.gif) repeat-x; display: none;}
#cont-tit{background-color: #fff; }
#cont-ban{background-color: #dceff7; }

/* tit */
.tit h2{text-align: center; font-size: 39px; color:#2c94c4; letter-spacing: 2px; font-family:'Nanum Brush Script';}
.tit .btn{position: absolute; right: 0; top:0px; display: block; width: 60px; height: 60px; background-color: #000; background: url(../img/icon.png) 0 150px;}
.tit .btn:hover {background: url(../img/icon.png) -60px 150px;}   
.tit .btn.on {background-position: 0 -660px;}

$(function(){
        //전체 메뉴 버튼
        $(".tit .btn").click(function(event){
            event.preventDefault();
            $("#cont-nav").slideToggle(200);
            $(".tit .btn").toggleClass("on");
        });
});

49. 웹표준 사이트 만들기 - 슬릭 무비 갤러리 적용

슬릭 라이브러리 설정

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>


 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

html

                             <!-- gallery -->
                            <div class="gallery">
                                <h4>Gallery</h4>
                                <div class="gallery_btn">
                                    <ul>
                                        <li><a href="#" class="play"><span  class="ir">재생</span></a></li>
                                        <li><a href="#" class="stop"><span  class="ir">정지</span></a></li>
                                        <li><a href="#" class="prev"><span  class="ir">이전 이미지</span></a></li>
                                        <li><a href="#" class="next"><span  class="ir">다음 이미지</span></a></li>
                                    </ul>                                  
                                </div>
                                  <div class="gallery_img">
                                        <div><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/gallery01.jpg" alt="이미지1"></a></div>
                                        <div><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/gallery02.jpg" alt="이미지2"></a></div>
                                        <div><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/gallery03.jpg" alt="이미지3"></a></div>
                                        <div><a href="#"><img src="https://braverokmc79.github.io/web_publishing_project1/img/gallery04.jpg" alt="이미지4"></a></div>
                                </div>
                            </div>
                            <!-- //gallery -->

css

/* gallery */
.gallery{border: 1px solid #ccc; position: relative;}
.gallery h4{font-size: 14px; color: #0093bd; font-weight: bold; padding:8px 0px 6px 11px; border-bottom: 1px solid #ccc;}
.gallery .gallery_btn{ position: absolute; right: 0px; top: 0px;}
.gallery .gallery_btn ul{overflow: hidden;}
.gallery .gallery_btn li{float: left; width:23px; height: 23px; padding: 5px ; }
.gallery .gallery_btn li a{width:100%; height: 100%; display: block;}
.gallery .gallery_btn li .play{ background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -150px -120px;}
.gallery .gallery_btn li .stop{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -150px -143px;}
.gallery .gallery_btn li .prev{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -150px -166px}
.gallery .gallery_btn li .next{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -150px -189px}

.gallery .gallery_btn li .play:hover{ background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -173px -120px;}
.gallery .gallery_btn li .stop:hover{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -173px -143px;}
.gallery .gallery_btn li .prev:hover{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -173px -166px}
.gallery .gallery_btn li .next:hover{background: url(https://braverokmc79.github.io/web_publishing_project1/img/icon.png) -173px -189px}

.gallery .gallery_img{width: 266px; height: 208px; overflow: hidden; margin: 10px;}
.gallery .gallery_img img { width: 100%;}

        //갤러리 영역
        $(".gallery_img").slick({
            arrows: false,
            autoplay: true,
            autoplaySpeed: 3000,
            fade: true
        });

        $(".play").click(function(event){
             event.preventDefault();
            $(".gallery_img").slick("slickPlay");
        });
        $(".stop").click(function(event){
             event.preventDefault();
            $(".gallery_img").slick("slickPause");
        });
        $(".prev").click(function(event){
             event.preventDefault();
            $(".gallery_img").slick("slickPrev");
        });
        $(".next").click(function(event){
             event.preventDefault();
            $(".gallery_img").slick("slickNext");
        });