html

웹디자인 기능사 연습문제 1

grovy 2023. 5. 12. 23:40
728x90

2023웹디 기능사 실기문제를 만들어볼거에요

사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~'

요렇게 만들어졌구요 

요 레이아웃을 보구 만들었어요

 

 

 

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/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 class="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="slider">
            <div class="container">
                <div class="sliderWrap">
                    <div class="slider s1">
                        <img src="image/slider01.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s2">
                        <img src="image/slider02.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s3">
                        <img src="image/slider03.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- slider -->
        <main id="main">
            <div class="container">
                <section class="notice">
                    <h3>공지사항</h3>
                    <ul>
                        <li><a href="#">2023년 신입생 모집중</a><span>2023.05.01</span></li>
                        <li><a href="#">융합전공멘토링 학생 모집</a><span>2023.05.02</span></li>
                        <li><a href="#">학과 및 학년 별 참여</a><span>2023.05.03</span></li>
                        <li><a href="#">졸업생 취업박람회</a><span>2023.05.04</span></li>
                    </ul>
                </section>
                <!-- notice -->
                <section class="gallery">
                    <h3>우리학교풍경</h3>
                    <ul>
                        <li><a href="#"><img src="image/gallery01.jpg" alt="우리학교 풍경"></a></li>
                        <li><a href="#"><img src="image/gallery03.jpg" alt="우리학교 풍경"></a></li>
                        <li><a href="#"><img src="image/gallery02.jpg" alt="우리학교 풍경"></a></li>
                    </ul>
                </section>
                <!-- gallery -->
                <article class="banner">
                    <h3>산업대학교 <br>2023<br>체육대전</h3>
                    <a href="#">바로가기</a>
                </article>
                <!-- 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 부분 

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    color: #333;
}
.wrap{
    width: 100%;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
img { 
    vertical-align: top;
}
/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
    
}
/* header */
#header {
    width: 100%;
    height: 100px;
    background-color: #EFEFEF;
    position: relative;
    z-index: 1000;
}
#header .container {
    display: flex;
    align-items: end;
    position: relative;
}
#header .container::after {
    content: '';
    width: 100%;
    height: 0;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    left: 0;
    top: 100px;
    z-index: -1;
    transition: all 0.4s;
}
#header .container.on::after {
    height: 160px;
}
#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;
}
#header .container .nav > ul > li > a {
    display: block;
    padding: 15px 40px;
    background-color: #FFE194;
}
#header .container .nav > ul > li > a:hover {
    background-color: #FFD66F;
}
#header .container .nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 50px;
    text-align: center;
    width: 100%;
    display: none;
}
#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: #D9B352;
}
/* slider */
#slider{
    width: 100%;
    height: 300px;
    background-color: #bbb;
}
#slider .container{
    overflow: hidden;
}
#slider .sliderWrap{
    display: flex;
    width: 4800px;
}
#slider .sliderWrap .slider{
    position: relative;
    width: 1200px;
}
#slider .sliderWrap .slider img{}
#slider .sliderWrap .slider .text{
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 40px;
}
#slider .sliderWrap .slider .text h2{
    font-size: 24px;
    color: #fff;
    margin-bottom: 4px;
}
#slider .sliderWrap .slider .text h2 strong{
    color: aqua;
}
#slider .sliderWrap .slider .text p{
    font-size: 16px;
    color: #fff;
}
/* main */
#main{
    width: 100%;
    height: 200px;
    background-color: #ccc;
}
#main .container{
    display: flex;
}
#main .container .notice{
    width: 400px;
    padding: 25px 20px;
    background-color: #dfc7c7;
}
#main .container .notice h3{
    font-size: 24px;
    margin-bottom: 10px;
}
#main .container .notice li{
    display: flex;
    line-height: 1.8;
    position: relative;
    padding-left: 10px;
}
#main .container .notice li::before{
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 11px;
    border-radius: 50%;
}
#main .container .notice li a{
    width: 70%;
}
#main .container .notice li a:hover{
    text-decoration: underline;
}
#main .container .notice li span{
    width: 30%;
    /* background-color: #ccc; */
    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(../image/banner.jpg);
    text-align: center;
    position: relative;
}
#main .container .banner h3{
    margin-top: 40px;
    font-size: 24px;
    color: #3a2727;
}
#main .container .banner a{
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 40px;
}
/* footer */
#footer{
    width: 100%;
    height: 100px;
    background-color: #ddd;
}
#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: 15px 10px;
    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;

}

그리고 자바스크립트 부분

$(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();   //이미지 가로값
    $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)
});

우선, $를 이용하여 전체 문서가 준비됐을 때 바로 실행되는 함수를 정의합니다. $(function(){...});으로 구현되어 있습니다.

이후 .nav > ul > li와 .sliderWrap, .slider 클래스를 가진 요소를 선택합니다.

.nav > ul > li 클래스를 가진 요소에 마우스 커서를 올리면 하위 요소인 .nav > ul > li > ul 클래스를 가진 요소가 400밀리초 동안 fade-in 되며, #header .container 요소에 on 클래스가 추가됩니다. 마우스 커서를 요소 밖으로 이동하면 다시 100밀리초 동안 fade-out되며 #header .container 요소에서 on 클래스가 제거됩니다.

이후 이미지 슬라이드를 구현하는 코드가 나옵니다. $sliderWrap 요소에 첫 번째 이미지를 복사하여 마지막에 추가합니다. 이렇게 함으로써 마지막 이미지에서 다시 첫 번째 이미지로 이동할 때 자연스럽게 이어지는 효과를 만들 수 있습니다.

setInterval을 이용하여 3초마다 실행되는 함수를 정의합니다. currentIndex 변수는 현재 이미지의 인덱스를 저장하는 역할을 하며, 이 변수는 슬라이드가 움직일 때 마다 1씩 증가합니다. $sliderWrap 요소의 marginLeft 값을 -현재 이미지 인덱스 * 이미지 가로값으로 설정하면 이미지가 왼쪽으로 이동합니다. 마지막 이미지까지 도달하면 다시 첫 번째 이미지로 돌아갑니다. 이때 setTimeout을 이용하여 0.7초 뒤에 marginLeft 값을 0으로 설정하고, currentIndex 값을 0으로 초기화합니다. 이렇게 함으로써 마지막 이미지와 첫 번째 이미지가 자연스럽게 이어지는 효과를 만들 수 있습니다.

포인트 ! 

html을 먼저 만들고 

css로 슬라이드가 보여질 화면과 sub메뉴를 완성시킨뒤

script를 작업해야 에러잡기도 쉽고 코드 짜기도 쉬워요 ! 

'html'의 다른글

  • 현재글웹디자인 기능사 연습문제 1

관련글

댓글

티스토리툴바