본문 바로가기

TUTORIAL


웹 디자인 기능사(2019)

22. 웹디자인 기능사 실기 따라하면 딴다. - 실전 사이트 만들기3-2

웹 디자인 기능사 실기 합격을 위한 영상입니다.
따라하면 누구나 딸 수 있는 자격증입니다.
끝까지 완주하시고 자격증 꼭 취득하세요^^


사용프로그램
brackets GO


샘플 보기 GO
소스 다운로드 GO
이미지 다운로드 GO


인스타그램 보기 GO

포폴 만들기 스터디 모임 GO


도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.

공개자료
01A-1, 02A-2, 03A-3, 04A-4, 05B-1, 06B-2, 07B-3, 08B-4, 09C-1, 10C-2, 11C-3, 12C-4


웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO

샘플
레이아웃 유형1 GO
레이아웃 유형2 GO
가로유형1 GO
가로유형2 GO
가로유형3 GO
세로유형1 GO
세로유형2 GO
탭메뉴유형 GO
레이어팝업유형 GO
이미지 슬라이드유형1 GO
이미지 슬라이드유형2 GO
이미지 슬라이드유형3 GO

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>정부 24</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap" class="clearfix">
        <aside id="aside">
            <h1><img src="images/logo01.jpg" alt="정부24"></h1>
            <nav class="nav">
                <ul>
                    <li class="active"><a href="#">서비스</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">정책정보</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">기관정보</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">고객센터</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>
        <section id="contents">
            <article class="banner">
                <div class="slideList">
                    <div class="slideImg">
                        <h2>페이드 효과 이미지1</h2>
                        <img src="images/banner01.jpg" alt="정부!!">
                    </div>
                    <div class="slideImg">
                        <h2>페이드 효과 이미지2</h2>
                        <img src="images/banner01.jpg" alt="정부!!">
                    </div>
                    <div class="slideImg">
                        <h2>페이드 효과 이미지3</h2>
                        <img src="images/banner01.jpg" alt="정부!!">
                    </div>
                </div>
            </article>
            <article class="tab">
                <ul>
                    <li class="active"><a href="#">자주 찾는 서비스</a>
                        <ul>
                            <li><a href="#"><img src="images/icon01.jpg" alt=""><span>주민등록표등폰</span></a></li>
                            <li><a href="#"><img src="images/icon02.jpg" alt=""><span>주민등록표등폰</span></a></li>
                            <li><a href="#"><img src="images/icon03.jpg" alt=""><span>주민등록표등폰</span></a></li>
                            <li><a href="#"><img src="images/icon04.jpg" alt=""><span>주민등록표등폰</span></a></li>
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#">키워드 서비스</a>
                        <ul style="display: none">
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
                            <li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
                        </ul>
                    </li>
                </ul>
            </article>
            <article class="layer clearfix">
                <div>
                    <h3>공지사항</h3>
                    <img src="images/icon06.jpg" alt="공지사항">
                    <ul>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                    </ul>
                    <a href="#" class="more">+</a>
                </div>
                <div>
                    <h3>공지사항</h3>
                    <img src="images/icon07.jpg" alt="공지사항">
                    <ul>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                    </ul>
                    <a href="#" class="more">+</a>
                </div>
                <div>
                    <h3>공지사항</h3>
                    <img src="images/icon08.jpg" alt="공지사항">
                    <ul>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                        <li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
                    </ul>
                    <a href="#" class="more">+</a>
                </div>
            </article>
        </section>
        <footer id="footer" class="clearfix">
            <h2><img src="images/logo02.jpg" alt="정부24"></h2>
            <address>
                서울 특별시 세종대로 209 행정안전부<br>
                정부 콜센터 1588-2188<br>
                Copyright © All right reserved
            </address>
            <div class="sns">
                <ul>
                    <li><a href="#"><img src="images/icon09.jpg" alt="트위터"></a></li>
                    <li><a href="#"><img src="images/icon10.jpg" alt="네이버"></a></li>
                    <li><a href="#"><img src="images/icon11.jpg" alt="페이스북"></a></li>
                </ul>
            </div>
        </footer>
    </div>
    
    <script src="script/jquery.min.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>















































 













































/* reset */
* {margin: 0; padding: 0;}
a {text-decoration: none; color: #333;}
li {list-style: none;}
.clearfix:before, .clearfix:after {content: ''; display: block; clear: both;}

/* layout */
#wrap {width: 1000px; margin: 0 auto; padding-top: 50px;}
#aside {float: left; width: 270px; }
#contents {float: right; width: 700px;  }
#footer {float: left; width: 100%;  background: #edf2f8}

/* aside */
#aside h1 {margin-bottom: 30px;}
#aside h1 img {width: 150px;}
#aside .nav li {position: relative; z-index: 1000; padding-bottom: 5px; background: #f1f1f1; padding: 10px;}
#aside .nav li a {font-size: 23px;}
#aside .nav li a:hover {text-decoration: underline;}
#aside .nav li.active a {color: blueviolet;}
#aside .nav li ul.submenu {display: none; width: 150px; position: absolute; right: -140px; top: 0;}
#aside .nav li ul.submenu li { }
#aside .nav li ul.submenu li a {display: block; font-size: 20px; color: #333; padding: 10px;
border-bottom: 1px solid #ccc;}
#aside .nav li ul.submenu li a:hover {text-decoration: none;}

/* banner */
.banner {height: 384px; }
.banner img {width: 100%; display: block;}
.slideList {width: 700px; position: relative;}
.slideList .slideImg {position: absolute; left: 0; top: 0;}
.slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; 
    transform: translate(-50%,-50%); background: rgba(0,0,0,0.5); padding: 10px 30px;
    border-radius: 25px;}

/* tab */
.tab {padding: 40px 0; height: 200px; position: relative; width: 100%;}
.tab img {width: 100px;}
.tab ul {text-align: center;}
.tab ul li {display: inline; padding: 5px;}
.tab ul li a {font-size: 24px; color: #999;}
.tab ul li ul {position: absolute; left: 0; top: 100px; width: 100%; overflow: hidden;}
.tab ul li ul li {width: 20%; float: left; box-sizing: border-box;}
.tab ul li ul li a {font-size: 14px;}
.tab ul li ul li a span {display: block;}
.tab ul li.active a {color: #000;}

/* layer */
.layer {background: #f7f7f7; padding: 15px;}
.layer > div {position: relative; float: left; width: 32%; 
    padding: 6% 3%; text-align: center; margin-right: 2%; background: #fff; 
    border: 2px solid #ccc; box-sizing: border-box;
}
.layer > div:last-child {margin-right: 0;}
.layer > div img {width: 100px; padding: 20px 0;}
.layer > div ul li {text-align: left; padding-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layer > div .more {position: absolute; right: 20px; top: 20px; border:1px solid #ccc; 
border-radius: 50%; width: 15px; height: 15px;}

/* #footer */
#footer {padding: 10px; box-sizing: border-box; margin-top: 20px;}
#footer h2 {float: left;}
#footer h2 img {width: 80px;}
#footer address {float: left; font-style: normal; padding: 20px 0 0 20px;}
#footer .sns {float: right; margin-top: 20px;}
#footer .sns ul {overflow: hidden;}
#footer .sns li {float: left; padding-bottom: 5px;}
#footer .sns li img {width: 60px;}





























































































































//세로 메뉴
$(".nav > ul > li").hover(
    function(){
        $(this).find(".submenu").stop().slideDown();
    },function(){
        $(this).find(".submenu").stop().slideUp();
});

//slideList > slideImg (1) eq(0)
//slideList > slideImg (2) eq(1)
//slideList > slideImg (3) eq(2)

//이미지 슬라이드 
$(".slideList").children("div:gt(0)").hide();

var currentIndex = 0;
//var currentIndex = 1;
//var currentIndex = 2;

setInterval(function(){
    var next = (currentIndex + 1) % 3;
    $(".slideList").find("div").eq(currentIndex).fadeOut();
    $(".slideList").find("div").eq(next).fadeIn();
    
    console.log("currentIndex="+ currentIndex);
    console.log("next="+ next);
    //currentIndex = 0
    //next = 1
    
    currentIndex = next;
},3000);