웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

💜 웹디자인 기능사 실기 연습문제

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>산업대학교</title>

    
    <link rel="stylesheet" href="css/index.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/script.js"></script>
</head>

<body>
    <div id="wrap">
        <header id="header">
            <div class="container">
                <h1 class="logo">
                    <a href="#">산업대학교</a>
                </h1>
                <nav class="nav">
                    <ul>
                        <li><a href="#">대학소개</a>
                            <ul class="submenu">
                                <li><a href="#">총장인사말</a></li>
                                <li><a href="#">학교소개</a></li>
                                <li><a href="#">홍보관</a></li>
                                <li><a href="#">캠퍼스안내</a></li>
                            </ul>
                        </li>
                        <li><a href="#">입학안내</a>
                            <ul class="submenu">
                                <li><a href="#">수시모집</a></li>
                                <li><a href="#">정시모집</a></li>
                                <li><a href="#">편입학</a></li>
                                <li><a href="#">재외국민</a></li>
                            </ul>
                        </li>
                        <li><a href="#">정보서비스</a>
                            <ul class="submenu">
                                <li><a href="#">대학정보알림</a></li>
                                <li><a href="#">정보공개</a></li>
                                <li><a href="#">정보서비스안내</a></li>
                            </ul>
                        </li>
                        <li><a href="#">커뮤니티</a>
                            <ul class="submenu">
                                <li><a href="#">공지사항</a></li>
                                <li><a href="#">참여게시판</a></li>
                                <li><a href="#">자료실</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- header -->
        <aside id="silder">
            <div class="container">
                <div class="sliderWrap">
                    <div class="slider s1">
                        <img src="imges/slider02-1.jpg" alt="미래를 향한 우리의 도전">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s2">
                        <img src="imges/slider02-2.jpg" alt="미래를 향한 우리의 도전">
                        <div class="text">
                            <h2>미래를 이끄는 학교 <strong>열정</strong>h2>
                            <p>학교</p>
                        </div>
                    </div>
                    <div class="slider s3">
                        <img src="imges/slider02-3.jpg" alt="미래를 향한 우리의 도전">
                        <div class="text">
                            <h2>미래를 이끄는 학교 <strong>열정</strong></h2>
                            <p>학교</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- silder -->
        <main id="main">
            <div class="container">
                <section class="notice">
                    <h3>산업대학교 새로운 소식</h3>
                     <ul>
                        <li><a href="#">2023년 신입생 모집중</a><span>2023.05.10</span></li>
                        <li><a href="#">융합 전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.10</span></li>
                        <li><a href="#">학과 및 학년별 장기자랑 대회</a><span>2023.05.10</span></li>
                        <li><a href="#">미래 작업 워크숍 및 박람회</a><span>2023.05.10</span></li>
                     </ul>
                </section>
                <!-- notice -->
                <section class="gallery">
                    <h3>우리학교 풍경</h3>
                    <ul>
                       <li><a href="#"><img src="imges/gallery02-1.jpg" alt="우리학교 강의실"></a></li>
                       <li><a href="#"><img src="imges/gallery02-2.jpg" alt="우리학교 도서관"></a></li>
                       <li><a href="#"><img src="imges/gallery02-3.jpg" alt="우리학교 정문 뷰"></a></li>
                    </ul>
                </section>
                <!-- gallery -->
                <section class="banner">
                    <h3>산업대학교<br>2023 체육대전</h3>
                    <a href="#">바로가기</a>
                </section>
                <!-- banner -->
            </div>
        </main>
        <!-- main -->
        <footer id="footer">
            <div class="container">
                <div class="footer1">
                    <div class="footer1-1">
                        <ul>
                            <li><a href="#">개인정보 처리방침</a></li>
                            <li><a href="#">정보 공개</a></li>
                            <li><a href="#">홈페이지 운영지침</a></li>
                        </ul>
                    </div>
                    <div class="footer1-2">
                        15073 경기도 안산시 산기대학로 237 (정왕동) 산업대학교 COPYRIGHT(C) ALL RIGHTS RESERVED.
                    </div>
                </div>
                <div class="footer2">
                    <select name="#" id="#">
                        <option>패밀리 사이트</option>
                        <option value="1">안양 산업대학교</option>
                        <option value="2">강원 산업대학교</option>
                        <option value="3">부산 산업대학교</option>
                    </select>
                </div>
            </div>
        </footer>
        <!-- footer -->
    </div>
</body>

</html>

헤더, 메뉴, 슬라이더, 본문, 푸터로 나눠 작업해줬습니다.

css와 js파일은 연동시켜서 작업했습니다.

CSS

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
}

/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
    /* background-color: rgba(255, 255, 255, 0.4); */
}

#wrap {
    width: 100%;
    /* width: 1000px; */
}

/* header */
#header {
    width: 100%;
    height: 100px;
    background-color: #997d7d;
    position: relative;
    z-index: 1000;

}

#header .container {
    display: flex;
    align-items: end;
    position: relative;

}

#header .container::after {
    content: '';
    width: 100%;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 0;
    top: 100px;
    z-index: -1;
    transition: all 400ms;
}

#header .container.on::after {
    height: 160px;
}

#header .container .logo {
    width: 20%;
    padding: 28px 0;
}

#header .container .nav {
    width: 80%;
    text-align: right;
}

#header .container .nav>ul {
    display: flex;
    justify-content: right;
}

#header .container .nav>ul>li {
    /* display: inline-block; */
    position: relative;
}

#header .container .nav>ul>li>a {
    display: block;
    padding: 15px 40px;
    background-color: #ddcbcb;
}

#header .container .nav>ul>li>a:hover {
    background-color: #997d7d;
}

#header .container .nav>ul>li>ul {
    /* display: none; */
    position: absolute;
    left: 0;
    top: 51px;
    text-align: center;
    /* background-color: rgb(175, 142, 142); */
    width: 100%;
    display: none;
}

#header .container .nav>ul>li>ul>li {}

#header .container .nav>ul>li>ul>li>a {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    color: #fff;
}

#header .container .nav>ul>li>ul>li>a:hover {
    background-color: #ddcbcb;
}

/* silder */
#silder {
    width: 100%;
    height: 300px;

}
#silder .container{
    overflow: hidden;
}


#silder .sliderWrap {
    display: flex;
    width: 400%;

}

#silder .sliderWrap .slider {
    position: relative;
    width: 100%;
}

#silder .sliderWrap .slider .text {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    /* text-align: center; */
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 40px;
}

#silder .sliderWrap .slider .text h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 4px;
}

#silder .sliderWrap .slider .text h2 strong {
    color: #cebf3d;
}

#silder .sliderWrap .slider .text p {
    color: #fff;
    font-size: 16px;
}

/* main */
#main {
    width: 100%;
    height: 200px;
    /* background-color: #bb7d7d */
}

#main .container {
    display: flex;
}

#main .container .notice {
    width: 400px;
    padding: 23px 20px;
    background-color: #ccc;
}

#main .container .notice h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

#main .container .notice li {
    display: flex;
    line-height: 1.8;
    position: relative;
    padding-left: 14px;
}

#main .container .notice li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 13px;
    border-radius: 50%;
}

#main .container .notice li a {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main .container .notice li a:hover {
    text-decoration: underline;
}

#main .container .notice li span {
    width: 30%;
    text-align: right;
}

#main .container .gallery {
    width: 400px;
    padding: 25px 20px;
}

#main .container .gallery h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

#main .container .gallery ul {
    display: flex;
}

#main .container .banner {
    width: 400px;
    background-image: url(../imges/banner.jpg);
    background-size: cover;
    text-align: center;
}

#main .container .banner h3 {
    margin-top: 40px;
    font-size: 24px;
    color: #000000;
}

#main .container .banner a {
    background-color: rgba(0, 0, 0, 1);
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 40px;
}

/* footer */
#footer {
    width: 100%;
    height: 100px;
    background-color: #a76f6f;
}

#footer .container {
    display: flex;
}

#footer .container .footer1 {
    width: 80%;
}

#footer .container .footer1 .footer1-1 {
    width: 100%;
    height: 50px;
}

#footer .container .footer1 .footer1-1 li {
    display: inline;
    border-right: 1px solid #333;
}

#footer .container .footer1 .footer1-1 li:last-child {
    border: 0;
}

#footer .container .footer1 .footer1-1 li a {
    padding: 16px 10px 16px 0;
    display: inline-block;
}

#footer .container .footer1 .footer1-2 {
    width: 100%;
    height: 50px;
    padding-top: 15px;
    box-sizing: border-box;
}

#footer .container .footer2 {
    width: 20%;
}

#footer .container .footer2 select {
    margin-top: 34px;
    width: 100%;
    height: 30px;

}

기본 틀을 먼저 잡아주고 나서

디자인 작업에 들어갔습니다.

메뉴, 이미지슬라이드, 탭메뉴 부분의 CSS를 잘 잡아줘야

스크립트가 제대로 작동하기 때문에 신경써서 작업을 해줍니다.

SCRIPT

$(function () {
    // 메뉴
    $(".nav > ul > li").mouseover(function () {
        $(".nav > ul > li > ul").stop().fadeIn(400);
        $("#header .container").addClass("on");
    });
    $(".nav > ul > li").mouseout(function () {
        $(".nav > ul > li > ul").stop().fadeOut(100);
        $("#header .container").removeClass("on");
    });

    // 슬라이드
    let currentIndex = 0;
    const $sliderWrap = $(".sliderWrap");     // 이미지 부모 : 움직이는 영역
    const $slider = $(".slider");             //각각의 이미지
    const $sliderWidth = $slider.width();     //이미지 가로값
    console.log($sliderWidth)
    $sliderWrap.append($slider.first().clone(true));     //첫번째 이미지를 복사해서 마지막에 추간


    setInterval(function () {
        currentIndex++;     // 현재 이미지를 1씩 증가
        $sliderWrap.animate({ marginLeft: (-$sliderWidth+400) * currentIndex }, 600)

if(currentIndex == $slider.length){
    setTimeout(function(){
        $sliderWrap.animate({marginLeft: 0}, 0);
        currentIndex = 0;
    }, 700)
}
    }, 3000)
});

메뉴는 마우스가 올라가면 서브메뉴가 나타나고, 마우스가 벗어나면 서브메뉴가 사라집니다.

$(".nav > ul > li") 를 선택해 메뉴의 각 항목에 마우스 이벤트를 등록,

마우스가 올라가면 $(".nav > ul > li > ul") 를 선택해 해당 메뉴의 서브메뉴를 나타내고,

$("header .container")를 선택해 페이지 상단에 위치한 헤더 영억에 on 클래스를 추가합니ㅏㄷ.

마우스가 벗어나면 서브메뉴와 on 클래스를 제거합니다.

이미지 슬라이드는

let currentIndex = 0 으로 초기화된 변수

currentIndex 는 현재 보여지는 이미지의 인덱스

$sliderWrap은 이미지들이 포함된 부모 요소

$slider는 각각의 이미지

$sliderWidth 는 이미지의 가로값

$sloderWrap에 첫번째 이미지를 복사해 마지막에 추가하여 무한 슬라이드를 구현합니다.

setInterval()함수를 사용해 3초마다 이미지를 슬라이드 하고

currentIndex를 1씩 증가시켜 다음 이미지로 넘어가고

$sliderWrap 에 animate()메소드를 사용해 슬라이드 효과를 부여

marginLeft 값을 이용해 슬라이드를 구현하고 -($sliderWidth + 400)*currentIndex 는 현재 슬라이드 위치를 계산

currentIndex와 이미지 개수 $slider.length 가 같아지면 setTimeout() 함수를 사용해 0.7초 후에 슬라이드 위치를 초기화하고, currnetIndex 를 0으로 초기화 합니다.

이렇게 함으로써 이미지가 끝까지 슬라이드 되었을 때, 첫번째 이미지로 다시 돌아옵니다.

한번 해보자 코딩

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

- Frederick Philips Brooks

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

💜 웹디자인 기능사 실기 연습문제

HTML

CSS

SCRIPT

'웹디자인기능사'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					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

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

- Frederick Philips Brooks

웹디자인 기능사 실기 연습문제_산업대학교(이미지슬라이드, 탭메뉴)

💜 웹디자인 기능사 실기 연습문제

HTML

CSS

SCRIPT

'웹디자인기능사'의 다른글

관련글

티스토리툴바