코딩/웹페이지웹디자인 실기 B-4 유형 연습해보기!!

오늘은 웹디자인 실기 B-4 유형을 연습해봅시당!

B-4 pdf를 참고해주세여!

구조

<!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/style.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="images/slider01.jpg" alt="">
                        <div class="text">
                            <h2>미래를 이끄는<span>열정</span></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s2">
                        <img src="images/slider02.jpg" alt="">
                        <div class="text">
                            <h2>당신이 원하는<span>교육</span></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s3">
                        <img src="images/slider03.jpg" alt="">
                        <div class="text">
                            <h2>미래를 향한 우리의<span>도전</span></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.12</span></li>
                        <li><a href="#">융합전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.12</span></li>
                        <li><a href="#">학과 및 학년별 참여줄 확인</a><span>2023.05.12</span></li>
                        <li><a href="#">2023년 미래 자동차 워크숍 안내</a><span>2023.05.12</span></li>
                    </ul>
                </section>
                <!-- //notice -->
                <section class="gallery">
                    <h3>우리 학교 풍경</h3>
                    <ul>
                        <li><a href="#"><img src="images/gallery01.jpg" alt="우리학교 마당"></a></li>
                        <li><a href="#"><img src="images/gallery02.jpg" alt="우리학교 도서관"></a></li>
                        <li><a href="#"><img src="images/gallery03.jpg" alt="우리학교 정문"></a></li>
                    </ul>
                </section>
                <!-- //gallery -->
                <div class="banner">
                    <h3>산업대학교<br>2023<br>체육대전</h3>
                    <a href="#">바로가기</a>
                </div>
                <!-- //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>
    <!-- //wrap -->
</body>
</html>

CSS

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    color: #333333;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    vertical-align: top;
}
#wrap {
    width: 100%;
}
/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
}
/* header */
#header {
    width: 100%;
    height: 100px;
    background-color: #ffe6e6;
    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;
    transition: all 400ms;
}
#header .container.on::after {
    height: 164px;
}
#header .container .logo {
    width: 20%;
    padding: 30px 0;
}
#header .container .nav {
    width: 80%;
    text-align: right;
}
#header .container .nav > ul {
    display: flex;
    justify-content: right;
}
#header .container .nav > ul > li {
    position: relative;
    z-index: 1;
}
#header .container .nav > ul > li > a {
    display: block;
    padding: 15px 40px;
    background-color: #ffc6d6;
}
#header .container .nav > ul > li > a:hover {
    background-color: #eb99b0;
    transition: all 0.3s;
}
#header .container .nav > ul > li > ul {
    position: absolute;
    left: 0;
    width: 100%;
    top: 51px;
    text-align: center;
    display: none;
}
#header .container .nav > ul > li > ul > li {}
#header .container .nav > ul > li > ul > li > a {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #fff;
}
#header .container .nav > ul > li > ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}
/* silder */
#silder {
    width: 100%;
    height: 300px;
}
#silder .container {
    overflow: hidden;
}
#silder .sliderWrap {
    display: flex;
    width: 400%;
}
#silder .sliderWrap .slider {
    position: relative;
    width: 1200px;
}
#silder .sliderWrap .slider .text {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 40px;

}
#silder .sliderWrap .slider .text h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 4px;
}
#silder .sliderWrap .slider .text h2 span {
    color: orange;
}
#silder .sliderWrap .slider .text p {
    color: #fff;
    font-size: 16px;
}
/* main */
#main {
    width: 100%;
    height: 200px;
}
#main .container {
    display: flex;
}
#main .container .notice {
    width: 400px;
    padding: 20px;
    background-color: #ffafaf;
}
#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: #333;
    position: absolute;
    left: 0;
    top: 11px;
    border-radius: 50%;
}
#main .container .notice li a {
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#main .container .notice li a:hover {
    text-decoration: underline;
}
#main .container .notice li span {
    width: 25%;
    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(../images/banner.jpg);
    text-align: center;
}
#main .container .banner h3 {
    font-size: 24px;
    margin-top: 40px;
    color: #000000;
}
#main .container .banner a {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 40px;
}
/* footer */
#footer {
    width: 100%;
    height: 100px;
    background-color: #d2b1b1;
}
#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 {
    display: inline-block;
    padding: 16px 10px 16px 0;
}
#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;
}

제이쿼리

$(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(50);
        $("#header .container").removeClass("on");
    });

    // 슬라이드
    let currentIndex = 0;
    const $sliderWrap = $(".sliderWrap");    //이미지 부모
    const $slider = $(".slider");            //각각의 이미지
    const $sliderWidth = $slider.width();     //이미지 가로값
    $sliderWrap.append($slider.first().clone(true));    // 첫번째 이미지 복사 마지막에 추가

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

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

    },3000);

});

제이쿼리_서브메뉴

메뉴의 항목에 마우스 오버했을 때($(".nav > ul > li").mouseover(function(){}), 모든 하위 메뉴를 서서히 나타나게 합니다($(".nav > ul > li > ul").stop().fadeIn(400))와 동시에 헤더 컨테이너에 "on" 클래스를 추가합니다($("#header .container").addClass("on")).

메뉴의 항목에서 마우스 아웃했을 때($(".nav > ul > li").mouseout(function(){}), 모든 하위 메뉴를 서서히 사라지게 합니다($(".nav > ul > li > ul").stop().fadeOut(50))와 동시에 헤더 컨테이너에서 "on" 클래스를 제거합니다($("#header .container").removeClass("on")).

제이쿼리_슬라이드

currentIndex 변수를 0으로 초기화합니다.
$sliderWrap 변수에는 슬라이드 이미지들의 부모 요소인 .sliderWrap를 선택합니다.
$slider 변수에는 각각의 이미지를 나타내는 .slider를 선택합니다.
$sliderWidth 변수에는 이미지의 가로 크기를 저장합니다.

첫 번째 이미지를 복제하여 마지막에 추가합니다($sliderWrap.append($slider.first().clone(true))).

일정 시간 간격으로 반복되는 함수가 실행됩니다.
currentIndex 값을 1씩 증가시킵니다(currentIndex++).
$sliderWrap 요소를 애니메이션을 사용하여 현재 이미지의 가로 너비($sliderWidth)와 currentIndex를 곱한 값만큼 왼쪽으로 이동시킵니다($sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex}, 600)).

만약 currentIndex가 $slider의 길이와 같아지면, 모든 이미지를 한 번씩 보여준 후에 실행됩니다.
일정 시간(700ms)이 지난 후에 첫 번째 이미지로 되돌아가도록 애니메이션을 적용합니다($sliderWrap.animate({marginLeft: 0}, 0)).
그리고 currentIndex를 다시 0으로 초기화합니다.

완성된 페이지

728x90

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩/웹페이지웹디자인 실기 B-4 유형 연습해보기!!

구조

CSS

제이쿼리

제이쿼리_서브메뉴

제이쿼리_슬라이드

완성된 페이지

구조

CSS

제이쿼리

제이쿼리_서브메뉴

제이쿼리_슬라이드

완성된 페이지

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역