Language

Web 수업자료/Web 정규

웹디자인 기능사

초코렛맛 2024. 10. 15. 16:51

자료 다운로드 

■ 레이아웃 설정

○ A-1 유형

	<style>
        #wrap{
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            height: 100px;
            display: flex;
        }
        #header > .logo{
            width: 15%;
            background-color: #bbb;
        }
        #header > .nav{
            width: 85%;
            background-color: #ccc;
        }

        #slide{
            height: 300px;
            background-color: #888;
        }
        #contents{
            height: 200px;
            display: flex;
        }
        #contents > div{
            width: calc(100% / 3);
        }
        #contents > .contents1{
            background-color: #555;
        }
        #contents > .contents2{
            background-color: #444;
        }
        #contents > .contents3{
            background-color: #333;
        }
        #footer{
            height: 100px;
            display: flex;
        }
        #footer > .footer1{
            width: 15%;
            background-color: #aaa;
        }
        #footer > .footer2{
            width: 70%;
            background-color: #bbb;
        }
        #footer > .footer3{
            width: 15%;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="logo"></div>
            <nav class="nav"></nav>
        </header>
        <main id="main">
            <div id="slide"></div>
            <div id="contents">
                <div class="contents1">1</div>
                <div class="contents2">2</div>
                <div class="contents3">3</div>
            </div>
        </main>
        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </footer>
    </div>
</body>

 

 

○ A-4 유형

<style>
        #wrap{
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            height: 100px;
            display: flex;
        }
        #header > .logo{
            width: 15%;
            background-color: #bbb;
        }
        #header > .nav{
            width: 85%;
            background-color: #ccc;
        }

        #slide{
            height: 300px;
            background-color: #888;
        }
        #contents{
            height: 200px;
            display: flex;
        }
        #contents > div{
            width: calc(100% / 3);
        }
        #contents > .contents1{
            background-color: #555;
        }
        #contents > .contents2{
            background-color: #444;
        }
        #contents > .contents3{
            background-color: #333;
        }
        #footer{
            height: 100px;
            display: flex;
        }
        #footer > .footer-l{
            width: 85%;
        }
        #footer > .footer-l > .footer-l-u{
            height: 50%;
            background-color: #222;
        }
        #footer > .footer-l > .footer-l-d{
            height: 50%;
            background-color: #444;
        }
        #footer > .footer-r{
            width: 15%;
            background-color: #bbb;
        }


    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="logo"></div>
            <nav class="nav"></nav>
        </header>
        <main id="main">
            <div id="slide"></div>
            <div id="contents">
                <div class="contents1"></div>
                <div class="contents2"></div>
                <div class="contents3"></div>
            </div>
        </main>
        <footer id="footer">
            <div class="footer-l">
                <div class="footer-l-u"></div>
                <div class="footer-l-d"></div>
            </div>
            <div class="footer-r"></div>
        </footer>
    </div>
</body>

 

○ C-1 유형

<style>
        #wrap{
            width: 1000px;
            display: flex;
        }
        #header{
            width: 15%;
        }
        #logo{
            height: 15%;
            background-color: darkgray;
        }
        #nav{
            height: 85%;
            background-color: rgb(108, 183, 202);
        }
        #main{
            width: 85%;
        }
        #main > #slide{
            height: 350px;
            background-color: antiquewhite;
        }
        #main > #contents{
            height: 200px;
            display: flex;
        }
        #contents > div{
            width: calc(100% / 3);
        }
        #contents > .con1{
            background-color: aqua;
        }
        #contents > .con2{
            background-color: aquamarine;
        }
        #contents > .con3{
            background-color: blueviolet;
        }
        #footer{
            height: 100px;
            display: flex;
        }
        #footer > .footer-l{
            width: 15%;
            background-color: chartreuse;
        }
        #footer > .footer-r{
            width: 85%;
        }
        #footer > .footer-r > .footer-r-u{
            height: 50%;
            background-color: crimson;
        }
        #footer > .footer-r > .footer-r-d{
            height: 50%;
            background-color: rgb(202, 149, 160);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div id="logo"></div>
            <nav id="nav">
                
            </nav>
        </header>
        <main id="main">
            <div id="slide"></div>
            <div id="contents">
                <div class="con1"></div>
                <div class="con2"></div>
                <div class="con3"></div>
            </div>
            <footer id="footer">
                <div class="footer-l"></div>
                <div class="footer-r">
                    <div class="footer-r-u"></div>
                    <div class="footer-r-d"></div>
                </div>
            </footer>
        </main>
    </div>
</body>

 

○ C-4 유형

 

○ D-1 유형

<style>
        body{
            margin: 0;
            padding: 0;
        }
        #main{
            display: flex;
        }
        #header{
            width: 200px;
        }
        #log{
            height: 150px;
            background-color: antiquewhite;
        }
        #nav{
            height: calc(100% - 150px);
            background-color: aquamarine;
        }
        #section{
            width: calc(100% - 200px);
        }
        #section > .slide{
            height: 400px;
            background-color: beige;
        }
        #section > .contents1{
            height: 200px;
            background-color: blueviolet;
        }
        #section > .contents2{
            height: 250px;
            background-color: rgb(43, 226, 119);
        }
        #footer{
            height: 100px;
            display: flex;
        }
        #footer > .ft1{
            width: 15%;
            background-color: rgb(48, 63, 148);
        }
        #footer > .ft2{
            width: 65%;
            background-color: salmon;
        }
        #footer > .ft3{
            width: 20%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <main id="main">
            <header id="header">
                <div id="log"></div>
                <nav id="nav"></nav>
            </header>
            <section id="section">
                <div class="slide"></div>
                <div class="contents1"></div>
                <div class="contents2"></div>
            </section>
        </main>
        <footer id="footer">
            <div class="ft1"></div>
            <div class="ft2"></div>
            <div class="ft3"></div>
        </footer>
    </div>
</body>

 

○ D-2 유형

 

○ D-4 유형

 

○ E-1 유형

 

○ F-1 유형

 

○ F-4 유형

 

 

 

 

 

 

 

 

■ 메뉴바 나오게 위

○ 메뉴 - 1 형태

 

 

 

- HTML구성

<body>
    <div id="wrap">
        <header>
            <div id="logo"></div>
            <nav id="nav">
                <ul id="menu">
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <main>

        </main>
    </div>
</body>

 

- CSS 구성

#wrap{
    width: 1200px;
    margin: 0 auto;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
header{
    height: 100px;
    display: flex;
}
#logo{
    width: 200px;
    background-color: #ccc;
}
nav{
    width: 1000px;
    background-color: #aaa;
    position: relative;
}
#menu{
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 600px;
    height: 50px;    
    display: flex;
}
#menu > li{
    width: 25%;
    text-align: center;
    background-color: #fff;
}

#menu > li > a{
    display: inline-block;
    width: 100%;
    height: 50px;
    text-align: center;
    align-content: center;
}
#menu > li > a:hover{
    background-color: #000;
    color: #fff;
}
#menu > li > .submenu{
    display: none;
}
#menu > li > .submenu >li{
    background-color: #fff;
}
#menu > li > .submenu > li > a{
    display: inline-block;
    width: 100%;
    height: 40px;
    align-content: center;        
}
#menu > li > .submenu >li > a:hover{
    background-color: #000;
    color: #fff;
}
main{
    height: 600px;
    background-color: #bbb;
}

 

- JQuery

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
    $(function(){
        $("#menu > li").mouseover(function(){
            $(this).find(".submenu").stop().slideDown();
        }).mouseout(function(){
            $(this).find(".submenu").stop().slideUp();
        });
    });
</script>

 

 

 

 

○ 메뉴 - 2 형태

 

- HTML, CSS 동일 JQuery

<script>
    $(function(){
        $("#menu > li").mouseover(function(){
            $(".submenu").stop().slideDown();
        }).mouseout(function(){
            $(".submenu").stop().slideUp();
        });
    });
</script>

 

 

 

○ 메뉴 - 3 형태

 

- HTML

<body>
    <div id="wrap">
        <header>
            <div id="logo"></div>
            <nav id="nav">
                <ul id="menu">
                    <li>
                        <a href="#">메뉴1</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴2</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴3</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">메뉴4</a>
                        <ul class="submenu">
                            <li><a href="#">submenu1</a></li>
                            <li><a href="#">submenu2</a></li>
                            <li><a href="#">submenu3</a></li>
                            <li><a href="#">submenu4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <div class="header-box"></div> <!-- 추가 -->
        </header>
        <main>

        </main>
    </div>
</body>

 

- CSS

#wrap{
    width: 1200px;
    margin: 0 auto;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
header{
    height: 100px;
    display: flex;
    position: relative;
}
header > .header-box{ /* 추가 */
    position: absolute;
    width: 100%;
    z-index: 1;
    display: none;
    background-color: #000;
    top: 100%;
}
#logo{
    width: 200px;
    background-color: #ccc;
}
nav{
    width: 1000px;
    background-color: #aaa;
    position: relative;
}
#menu{
    position: absolute;
    right: 20px;
    bottom: 0px;/* 수정 */
    width: 600px;
    height: 50px;    
    display: flex;
    z-index: 10; /* 추가 */
}
#menu > li{
    width: 25%;
    text-align: center;
    background-color: #fff;
}

#menu > li > a{
    display: inline-block;
    width: 100%;
    height: 50px;
    text-align: center;
    align-content: center;
}
#menu > li:hover{ /* a hover에서 li: hover로 수정*/
    background-color: #000;
    color: #fff;
}
#menu > li > .submenu{
    display: none;
}
#menu > li > .submenu >li{
    background-color: #000; /* 수정 */
    color: #fff; /* 추가 */
}
#menu > li > .submenu > li > a{
    display: inline-block;
    width: 100%;
    height: 40px;
    align-content: center;        
}
#menu > li > .submenu >li > a:hover{
    background-color: #fff;/* 수정 */
    color: #000; /* 수정 */
}
main{
    height: 600px;
    background-color: #bbb;
}

 

- JQuery

$(function(){
    let suh = $(".submenu").height(); //submenu의 높이 확인
    $(".header-box").css("height",suh); 
    $("#menu > li").mouseover(function(){
        $(".submenu, .header-box").stop().slideDown();
    }).mouseout(function(){
        $(".submenu, .header-box").stop().slideUp();
    });
});

 

 

 

 

■ 메뉴바 나오게 좌

○ 메뉴 좌측 기본 세팅

<style>
    #wrap{
        width: 1000px;
        height: 650px;
        display: flex;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
    #header{
        width: 20%;
    }
    #header > #logo{
        height: 20%;
        background-color: #ccc;
    }
    #header > #nav{
        height: 80%;
        background-color: #aaa;
    }
    #main{
        width: 80%;
        background-color: #666;
    }
    
</style>
<body>
    <div id="wrap">
        <header id="header">
            <div id="logo"></div>
            <nav id="nav">
                <ul id="menu">
                    <li>
                        <a href="#">MENU1</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU2</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU3</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU4</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <main id="main"></main>
    </div>
    <script>
        $(function(){
            
        });
    </script>
</body>

 

 

○ 메뉴 - 4 형태

 

- CSS

#header > #nav > #menu{
    position: relative;
    top: 20px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
}
#menu li a{
    width: 100%;
    display: inline-block;
    align-content: center;
}
#menu > li > a{
    height: 50px;
}
#menu .submenu > li > a{
    height: 35px;
}
#menu > li:hover > a{
    background-color: #000;
    color: #fff;
}
.submenu > li:hover{
    background-color: #000;
    color: #fff;
}
#menu .submenu{
    display: none;
}

 

- JQuery

$(function(){
    $("#menu > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown();
    }).mouseout(function(){
        $(this).find(".submenu").stop().slideUp();
    });
});

 

 

○ 메뉴 - 5 형태

 

- CSS

#header > #nav > #menu{
    position: relative;
    top: 20px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
}
#menu li a{
    width: 100%;
    display: inline-block;
    align-content: center;
}
#menu > li > a{
    height: 50px;
}
#menu .submenu > li{
    width: 150px;        
}
#menu .submenu > li:last-child{
    margin-bottom: 200px;
}
#menu .submenu > li > a{
    height: 35px;
}
#menu .submenu{
    position: absolute;
    left: 100%;
    top: -30px;
    background-color: #000;
    color: #fff;
    display: none;
}
/* hover */
#menu > li:hover > a{
    background-color: #000;
    color: #fff;
}
.submenu > li:hover{
    background-color: #fff;
    color: #000;
}

 

- JQuery

$(function(){
    $("#menu > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown();
    }).mouseout(function(){
        $(this).find(".submenu").stop().slideUp();
    });
});

 

 

 

○ 메뉴 - 6 형태

- CSS 변경

/* #menu .submenu > li:last-child{ 
    margin-bottom: 200px;
} */ /*삭제*/
#menu .submenu > li > a{
    height: 35px;
}
/* 고정 변경 */
#menu > li{
    position: relative;
}
#menu .submenu{
    position: absolute;
    left: 100%;
    top: 0; /* 변경 */
    background-color: #000;
    color: #fff;
    display: none;
}

 

- CSS

#header > #nav > #menu{
    position: relative;
    top: 20px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
}
#menu li a{
    width: 100%;
    display: inline-block;
    align-content: center;
}
#menu > li > a{
    height: 50px;
}
#menu .submenu > li{
    width: 150px;        
}
#menu .submenu > li > a{
    height: 35px;
}
#menu > li{
    position: relative;
}
#menu .submenu{
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #000;
    color: #fff;
    display: none;
}
/* hover */
#menu > li:hover > a{
    background-color: #000;
    color: #fff;
}
.submenu > li:hover{
    background-color: #fff;
    color: #000;
}

 

- JQuery

$(function(){
    $("#menu > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown();
    }).mouseout(function(){
        $(this).find(".submenu").stop().slideUp();
    });
});

 

 

○ 메뉴 - 7 형태

- html

<body>
    <div id="wrap">
        <header id="header">
            <div id="logo"></div>
            <nav id="nav">
                <ul id="menu">
                    <li>
                        <a href="#">MENU1</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU2</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU3</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">MENU4</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <div id="bg"></div><!-- 배경 -->
                </ul>
            </nav>
        </header>
        <main id="main"></main>
    </div>
</body>

 

 

- CSS

#wrap{
    width: 1000px;
    height: 650px;
    display: flex;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
#header{
    width: 20%;
}
#header > #logo{
    height: 20%;
    background-color: #ccc;
}
#header > #nav{
    height: 80%;
    background-color: #aaa;
}
#main{
    width: 80%;
    background-color: #666;
}
#header > #nav > #menu{
    position: relative;
    top: 20px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
}
#menu > li{
    position: relative;
}
#menu li a{
    width: 100%;
    display: inline-block;
    align-content: center;
    height: 50px;
}
#menu .submenu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    width: 500%;
    text-align: left;
    display: none;
}

#menu .submenu > li{
    width: 150px;
    display: inline-block;
    text-align: center;        
}
#menu > #bg{
    position: absolute;
    top:0;
    left: 100%;
    height: 100%;
    width: 0;
    background-color: #00000033;
    transition: all 600ms;
}


/* hover */
#menu > li:hover > a{
    background-color: #00000033;
}
.submenu > li:hover{
    background-color: #000;
    color: #fff;
}

 

 

- JQuery

$(function(){
    let menul = ($("#nav").width()-$("#menu").width())/2;
    let mainw = $("#main").width();

    $("#menu > li").mouseover(function(){
        $("#bg").css("width",menul+mainw);
        $(".submenu").stop().fadeIn(500);
    }).mouseout(function(){
        $("#bg").css("width",0);
        $(".submenu").stop().fadeOut(200);
    });

});

 

 

 

 

■ Pop 매뉴

- Html

<div id="wrap">
    <div id="top"></div>
    <div id="contents">
        <div class="cont" id="cont1">
            <div class="box">
                <p>공지사항</p>
                <ul>
                    <li id="n-pop">1번글</li>
                    <li>2번글</li>
                    <li>3번글</li>
                </ul>
            </div>

        </div>
        <div class="cont"></div>
        <div class="cont"></div>
    </div>
    <footer id="footer"></footer>
    <div id="pop">
        <button id="close">닫기</button>
    </div>
</div>

 

- Css 기본

#wrap{
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
#top{
    height: 400px;
    background-color: #aaa;
}
#contents{
    height: 200px;
    display: flex;
}
#contents > .cont{
    width: calc(100% / 3);
}
#contents > #cont1{
    background-color: #666;
}
#cont1 > .box{
    width: 90%;
    margin: 0 auto;
    color: aliceblue;
}
#footer{
    height: 100px;
    background-color: #888;
}
#pop{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background-color: red;
    text-align: right;
    align-content: end;
    display: none;
}

 

- JQuery

$(function(){
    $(".box #n-pop").click(function(){
        $("#pop").show();
    });
    $("#close").click(function(){
        $("#pop").hide();
    });
});

 

 



 

■ 슬라이드

자료다운로드 : https://license.youngjin.com/

 

○ 큰화면 기본

 

- HTML / CSS 기본

<style>
    #wrap{
        width: 1200px;
        margin: 0 auto;
    }
    #header{
        height: 100px;
        background-color: #ccc;
    }
    #contents{
        height: 300px;
        background-color: #ddd;
    }
    #section{
        height: 200px;
        background-color: #999;
    }
    #footer{
        height: 100px;
        background-color: #888;
    }
</style>

<body>
    <div id="wrap">
        <header id="header"></header>
        <main id="main">
            <div id="contents"></div>
            <section id="section"></section>
            <footer id="footer"></footer>
        </main>
    </div>
</body>

 

 

 

○ 큰화면 FadeIn-FadeOut 유형

-  slide 추가 HTML, CSS

<style>
    #wrap{
        width: 1200px;
        margin: 0 auto;
    }
    #header{
        height: 100px;
        background-color: #ccc;
    }
    #contents{
        height: 300px;
        background-color: #ddd;
    }
    /* slider 시작 */
    .slider-wrap{
        position: relative;
    }
    .slider-wrap > .slide{
        position: absolute;
        display: none;
        left: 0;
        top: 0;
    }
    .slider-wrap > .slide:first-child{
        display: block;
    }
    .slider-wrap > .slide > img{
        vertical-align: top; /* 이미지 아래쪽 한줄 없에기*/
    }
    .slider-wrap > .slide > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
        font-size: 24px;
        padding: 10px 20px;
    }
    /* slider 종료 */
    #section{
        height: 200px;
        background-color: #999;
    }
    #footer{
        height: 100px;
        background-color: #888;
    }

</style>

<body>
    <div id="wrap">
        <header id="header"></header>
        <main id="main">
            <div id="contents">
                <div class="slider-wrap">
                    <div class="slide">
                        <img src="slide/img1.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                    <div class="slide">
                        <img src="slide/img2.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                    <div class="slide">
                        <img src="slide/img3.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                </div>
            </div>
            <section id="section"></section>
            <footer id="footer"></footer>
        </main>
    </div>
</body>

 

- JQuery

$(function(){
    let index = 0;
    setInterval(function(){
        let nextIndex = (index+1) %3; //1 2 0 1 2 0 반복
        $(".slide").eq(index).fadeOut(1200);
        $(".slide").eq(nextIndex).fadeIn(1200);
        index = nextIndex; 
    },3000);
});

 

○ 큰화면 좌측으로 이동하면서 이미지 넘어가기

- HTML, CSS

<style>
    #wrap{
        width: 1200px;
        margin: 0 auto;
    }
    #header{
        height: 100px;
        background-color: #ccc;
    }
    #contents{
        height: 300px;
        background-color: #ddd;
        overflow: hidden; /* 나보다 크면 안보이게 */
    }
    /* slide 시작 */
    .slider-wrap{
        display: flex;
    }
    .slider-wrap > .slide{
        position: relative;
    }
    .slider-wrap > .slide > img{
        width: 1200px;
        height: 300px;
        display: block;
    }
    .slider-wrap > .slide > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 20px;
        background-color: #ffffff88;
    }
    /* slide 종료 */
    #section{
        height: 200px;
        background-color: #999;
    }
    #footer{
        height: 100px;
        background-color: #888;
    }
</style>

<body>
    <div id="wrap">
        <header id="header"></header>
        <main id="main">
            <div id="contents">
                <div class="slider-wrap">
                    <div class="slide">
                        <img src="slide/img1.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                    <div class="slide">
                        <img src="slide/img2.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                    <div class="slide">
                        <img src="slide/img3.jpg" alt="이미지 설명">
                        <span>이미지 글자</span>
                    </div>
                </div>
            </div>
            <section id="section"></section>
            <footer id="footer"></footer>
        </main>
    </div>
</body>

 

-JQuery

$(function(){
    let index = 0;
    $(".slider-wrap").append($(".slide").first().clone(true)); //첫번째 이미지를 마지막에 추가하고 원래 이미지는 그대로
    setInterval(function(){
        index++;
        $(".slider-wrap").animate({"margin-left":-index * 100 + "%"},600);    

        if(index==3){ //마지막 이라면
            setTimeout(function(){
                $(".slider-wrap").animate({"margin-left":0},0); //바로 처음으로이동
                index = 0; //처음으로
            },700); //700ms가 지나고 600ms동안 애니메이션, 100ms만에 변경 
        }
    },3000); //3s마다 시작해

});

 

 

○ 큰화면 위로 이동하면서 이미지 넘어가기

- CSS 내부변경

.slider-wrap{ 
    /* display: flex; */ /* 위아래로 배치 하기위해서 변경 */
}

 

-JQuery

$(function(){
    let index = 0;
    $(".slider-wrap").append($(".slide").first().clone(true)); //첫번째 이미지를 마지막에 추가하고 원래 이미지는 그대로
    setInterval(function(){
        index++;
        // magin-top으로 -300px 배수로 이동해
        $(".slider-wrap").animate({"margin-top":-index * 300 + "px"},600);    

        if(index==3){ //마지막 이라면
            setTimeout(function(){
                $(".slider-wrap").animate({"margin-top":0},0); //바로 처음으로이동
                index = 0; //처음으로
            },700); //700ms가 지나고 600ms동안 애니메이션, 100ms만에 변경 
        }
    },3000); //3s마다 시작해

});

 

 



○ 작은 화면 유형

- HTML / CSS 기본

<style>
    body{
        margin: 0;
    }
    #wrap{
        width: 100%;
        margin: 0 auto;
    }
    #main{
        display: flex;
        height: 800px;
    }
    #header{
        width: 200px;
        background-color: #ccc;
    }
    #section{
       width: 400px;
        background-color: #999;
    }
    #contents{
        width: calc(100% - 600px);
        background-color: #ddd;
    }
    #footer{
        height: 100px;
        background-color: #888;
    }
</style>

<body>
    <div id="wrap">
        <main id="main">
            <header id="header"></header>
            <section id="section"></section>
            <div id="contents"></div>
        </main>
        <footer id="footer"></footer>
    </div>
</body>

 

○ 작은화면 FadeIn Out

- HTML

<style>
    body{
        margin: 0;
    }
    #wrap{
        width: 100%;
        margin: 0 auto;
    }
    #main{
        display: flex;
        height: 800px;
    }
    #header{
        width: 200px;
        background-color: #ccc;
    }
    #section{
       width: 400px;
        background-color: #999;
    }
    #contents{
        width: calc(100% - 600px);
        background-color: #ddd;
    }
    /* 이미지 슬라이드 */
    .slider-wrap{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .slider-wrap > .slide{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    .slider-wrap > .slide:first-child{
        display: block;
    }
    .slider-wrap > .slide > img{        
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .slider-wrap > .slide > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 20px;
        font-size: 24px;
        background-color: #ffffff99;
    }
    /* 이미지 슬라이드 */
    #footer{
        height: 100px;
        background-color: #888;
    }
</style>

<body>
    <div id="wrap">
        <main id="main">
            <header id="header"></header>
            <section id="section"></section>
            <div id="contents">
                <div class="slider-wrap">
                    <div class="slide">
                        <img src="[Slide]/img1.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                    <div class="slide">
                        <img src="[Slide]/img2.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                    <div class="slide">
                        <img src="[Slide]/img3.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                </div>
            </div>
        </main>
        <footer id="footer"></footer>
    </div>
</body>

 

- JQuery

$(function(){
    let i = 0;
    setInterval(function(){
        let ci = (i+1)%3;
        $(".slide").eq(i).fadeOut();
        $(".slide").eq(ci).fadeIn();
        i = ci;
    },3000);
});

 

 

○ 작은화면 좌 Slide

- HTML, CSS

<style>
    body{
        margin: 0;
    }
    #wrap{
        width: 100%;
        margin: 0 auto;
    }
    #main{
        display: flex;
        height: 800px;
    }
    #header{
        width: 200px;
        background-color: #ccc;
    }
    #section{
       width: 400px;
        background-color: #999;
    }
    #contents{
        width: calc(100% - 600px);
        background-color: #ddd;
        overflow: hidden; /* 넘어간 부분 보이지 않게 */
    }
    /* 이미지 슬라이드 */
    .slider-wrap{
        width: 400%;
        height: 100%;
        position: relative;
        display: flex;
    }
    .slider-wrap > .slide{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .slider-wrap > .slide:first-child{
        display: block;
    }
    .slider-wrap > .slide > img{        
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }
    .slider-wrap > .slide > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 20px;
        font-size: 24px;
        background-color: #ffffff99;
    }
    /* 이미지 슬라이드 종료 */
    #footer{
        height: 100px;
        background-color: #888;
    }
</style>

<body>
    <div id="wrap">
        <main id="main">
            <header id="header"></header>
            <section id="section"></section>
            <div id="contents">
                <div class="slider-wrap">
                    <div class="slide">
                        <img src="[Slide]/img1.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                    <div class="slide">
                        <img src="[Slide]/img2.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                    <div class="slide">
                        <img src="[Slide]/img3.jpg" alt="이미지 설명">
                        <span>이미지 내용</span>
                    </div>
                </div>
            </div>
        </main>
        <footer id="footer"></footer>
    </div>
</body>

 

 

- JQuery

$(function(){
    let i = 0;
    $(".slider-wrap").append($(".slide").first().clone(true));
    setInterval(function(){
        i++;
        $(".slider-wrap").animate({"margin-left":-i*100+"%"},600);
        if(i==3){
            setTimeout(function(){
                $(".slider-wrap").animate({"margin-left":0},0);
                i = 0;
            },700);
        }
    },3000);
});

 

 

○ 작은화면 위 Slide

- CSS

.slider-wrap{
    width: 100%; /* 너비 */
    height: 100%;
    position: relative;
    /* display: flex;  */ /* 위아래 배치 */
}

 

- JQuery

$(function(){
    let i = 0;
    let sh = $(".slide").height();
    $(".slider-wrap").append($(".slide").first().clone(true));
    setInterval(function(){
        i++;
        $(".slider-wrap").animate({"margin-top":-i*sh+"px"},600);
        if(i==3){
            setTimeout(function(){
                $(".slider-wrap").animate({"margin-top":0},0);
                i = 0;
            },700);
        }
    },3000);
});

 

 

 

 

■ tap창

○ 기본

	<style>
        #wrap{
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            height: 100px;
            display: flex;
        }
        #header > .logo{
            width: 15%;
            background-color: #bbb;
        }
        #header > .nav{
            width: 85%;
            background-color: #ccc;
        }

        #slide{
            height: 300px;
            background-color: #888;
        }
        #contents{
            height: 200px;
            display: flex;
        }
        #contents > div{
            width: calc(100% / 3);
        }
        #contents > .contents1{
            background-color: #555;
        }
        #contents > .contents2{
            background-color: #444;
        }
        #contents > .contents3{
            background-color: #333;
        }
        #footer{
            height: 100px;
            display: flex;
        }
        #footer > .footer1{
            width: 15%;
            background-color: #aaa;
        }
        #footer > .footer2{
            width: 70%;
            background-color: #bbb;
        }
        #footer > .footer3{
            width: 15%;
            background-color: #ccc;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <div class="logo"></div>
            <nav class="nav"></nav>
        </header>
        <main id="main">
            <div id="slide"></div>
            <div id="contents">
                <div class="contents1">1</div>
                <div class="contents2">2</div>
                <div class="contents3">3</div>
            </div>
        </main>
        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </footer>
    </div>
</body>

 

 

○ contents1 번에 넣기

- HTML

<div class="contents1">
        <div class="info-menu">
            <a href="#" class="active">공지사항</a> |
            <a href="#">갤러리</a>
        </div>
        <div class="info-cont">
            <div class="notice">
                <ul>
                    <li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.01</span></li>
                    <li><a href="#">강원천문대 2023년 온라인 예매 안내</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>
            </div>
            <div class="gallery">
                <ul>
                    <li><a href="#"><img src="cont/gallery1.jpg" alt="이미지 설명"></a></li>
                    <li><a href="#"><img src="cont/gallery2.jpg" alt="이미지 설명"></a></li>
                    <li><a href="#"><img src="cont/gallery3.jpg" alt="이미지 설명"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="contents2"></div>
    <div class="contents3"></div>
</div>

 

-CSS

#contents > .contents1{
    padding: 10px;
    border: 1px solid #000;
}
#contents > .contents1 > .info-menu{
    text-align: center;
    font-size: 24px;
}
#contents > .contents1 > .info-menu > a.active{
    text-decoration-line: underline;
}
#contents > .contents1 > .info-cont > .notice{
    /*display: none; */ /* 겔러리 위치 보고 싶을때 none */ 
}
#contents > .contents1 > .info-cont > .notice li{
    display: flex;
    justify-content: space-between;
    padding: 5px 0px;
}
#contents > .contents1 > .info-cont > .notice li>a:hover{
    text-decoration-line: underline;
}
#contents > .contents1 > .info-cont > .gallery{
    margin-top: 30px;
}
#contents > .contents1 > .info-cont > .gallery > ul{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
}
#contents > .contents1 > .info-cont > .gallery > ul > li{
    width: 30%;
    height: 100%;
}
#contents > .contents1 > .info-cont > .gallery > ul > li img{
    width: 100%;
    height: 100%;
}

 

- JQuery

$(function(){
    let tbt = $(".info-menu > a"); // 텝버튼
    let tcont = $(".info-cont > div"); // 텝 콘텐츠
    tcont.hide().first().show(); // 처음 이미지 보여주기
    tbt.click(function(){
        let clickIndex = $(this).index(); // 클릭한 인덱스 번호 반환
        $(this).addClass("active").siblings().removeClass("active"); //클릭한 요소에 active 클래스 추가, 나머지 active 클래스 삭제
        tcont.eq(clickIndex).show().siblings().hide(); //클릭한 인덱스 번호에 있는 박스 보여주고 나머지는 안보여주기
    });
});

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<style>
    body{
        margin: 0;
        color: #333;
    }
    ul{
        padding: 0;
        list-style: none;
    }
    a{
        text-decoration: none;
        color: inherit;
    }
    #wrap{
        width: 1000px;
        height: 650px;
        display: flex;
        position: relative;
    }
    header{
       width: 20%; 
    }
    #hlog{
        height: 20%;
        align-content: center;
    }
    #hlog > img{
        width: 100%;
    }
    nav{
        height: 80%;
    }
    nav > #menu{
        width: 150px;
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
    }
    nav > #menu > li{
        position: relative;
        height: 50px;
    }
    nav > #menu > li > a{
        display: inline-block;
        align-content: center;
        width: 100%;
        height: 100%;
        background-color: black;
        color: #fff;
    }
    nav > #menu > li > a:hover{
        background-color: #fff;
        color: #333;
    }
    nav > #menu > li > .submenu{
        position: absolute;
        left: 100%;
        top: -10px;
    }
    .submenu{
        display: none;
    }
    .submenu > li{
        width: 150px;
        height: 40px;
        
    }
    .submenu > li > a{
        display: inline-block;
        align-content: center;
        width: 100%;
        height: 100%;
        background-color: #ddd;
    }
    .submenu > li > a:last-child{
        padding-bottom: 20px;
    }
    .submenu > li > a:hover{
        background-color: #fff;
    }
    main{
        width: 80%;
    }
    #imgslide{
        height: 350px;
        overflow: hidden;
    }
    #imgslide > .slide-wrap{
        width: 400%;
        display: flex;
    }
    .slide-wrap > .slide{
        position: relative;
    }
    .slide-wrap > .slide > img{
        display: block;
    }
    .slide-wrap > .slide > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 5px 10px;
        background-color: #ffffffa6;
        font-size: 20px;
        
    }


    section{
        height: 200px;
        display: flex;
    }
    section > div{
        width: calc(100% / 3);
    }
    .notice{
        padding: 0 10px;
    }
    .notice > div > div{
        display: flex;
        justify-content: space-between;
    }
    .notice > div > div:hover{
        color: #000;
        font-weight: 600;
    }
    .gallery{
        
    }
    .gallery > .imgbox{
        padding-top: 10px;
        width: 95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .cut{
        position: relative;
    }
    .cut > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cut > span{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        padding: 10px 20px;
        background-color: #ffffff80;
    }
    footer{
        height: 100px;
        display: flex;
    }
    .flog{
        width: 20%;
        align-content: center;
    }
    .flog > img{
        width: 100%;
    }
    .copy{
        width: 60%;
        text-align: center;
        align-content: center;
    }
    .family{
        width: 20%;
        text-align: center;
        align-content: center;
    }
    .family > #sl{
        font-size: 18px;
    }
    #pop{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        background-color: #fff;
        padding: 30px;
        display: none;
    }
    #pop > button{
        margin-top: 60px;
        width: 60px;
        height: 40px;
        font-size: 16px;
    }
</style>
<body>
    <div id="wrap">
        <header>
            <div id="hlog">
                <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Header/logo.png" alt="메인로고">
            </div>
            <nav>
                <ul id="menu">
                    <li><a href="#">축제소개</a>
                        <ul class="submenu">
                            <li><a href="#">Festival소개</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>
                            <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>
        </header>
        <main>
            <div id="imgslide">
                <div class="slide-wrap">
                    <div class="slide">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/[Slide]/img1.jpg" alt="페스티벌1">
                        <span>World Festival 1</span>
                    </div>
                    <div class="slide">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/[Slide]/img2.jpg" alt="페스티벌1">
                        <span>World Festival 2</span>
                    </div>
                    <div class="slide">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/[Slide]/img3.jpg" alt="페스티벌1">
                        <span>World Festival 3</span>
                    </div>
                
                </div>
            </div>
            <section>
                <div class="notice">
                    <h1>공지사항</h1>
                    <div class="nbox">
                        <div class="box1">
                            <span><a href="#">Vallery Festival 공지1</a> </span>
                            <span><a href=#">2022.03.01</a></span>
                        </div>
                        <div class="box2">
                            <span><a href="#">Vallery Festival 공지2</a> </span>
                            <span><a href=#">2022.03.01</a></span>
                        </div>
                        <div class="box3">
                            <span><a href="#">Vallery Festival 공지3</a> </span>
                            <span><a href=#">2022.03.01</a></span>
                        </div>
                        <div class="box4">
                            <span><a href="#">Vallery Festival 공지4</a> </span>
                            <span><a href=#">2022.03.01</a></span>
                        </div>
                    </div>
                </div>
                <div class="gallery">
                    <h1>갤러리</h1>
                    <div class="imgbox">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Contents/gallery1.jpg" alt="갤러리1">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Contents/gallery2.jpg" alt="갤러리2">
                        <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Contents/gallery3.jpg" alt="갤러리3">
                    </div>
                </div>
                <div class="cut">
                    <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Contents/shortcut.jpg" alt="바로가기">
                    <span><a href="#">바로가기</a></span>
                </div>
            </section>
            <footer>
                <div class="flog">
                    <img src="실기파일/PART04/기출문제유형01회/수험자 제공 파일/Header/logo.png" alt="">
                </div>
                <div class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</div>
                <div class="family">
                    <select name="site" id="sl">
                        <option value="#">패밀리사이트1</option>
                        <option value="#">패밀리사이트2</option>
                        <option value="#">패밀리사이트3</option>
                    </select>
                </div>
            </footer>
        </main>
        <div id="pop">
            <h1>무궁화 축제</h1>
            <p>무궁무궁 무궁화 무궁화는 우리꽃
                피고 지고 또 피어 무궁화라네~
                광복절을 맞이하여 무궁화 축제가 열립니다.
                무궁화 전시, 무궁화 체험, 공연 등 많은 참여를 바랍니다.</p>
            <button>닫기</button>
        </div>
    </div>
    <script>
        $(function(){
            $("#menu > li").mouseover(function(){
                console.log(1);
                $(this).find(".submenu").stop().slideDown(500);
            }).mouseout(function(){
                $(this).find(".submenu").stop().slideUp(500);
                
            });

            $(".slide-wrap").append($(".slide").first().clone(true));
            let i = 0;
            setInterval(function(){
                i++;
                $(".slide-wrap").animate({"margin-left":-i*100+"%"},600);
                if(i==3){
                    setTimeout(function(){
                        $(".slide-wrap").animate({"margin-left":0},0);
                        i=0;
                    },700);
                }
            },3000);
            
            $(".box1").click(function(){
                $("#pop").show();
            });
            $("#pop > button").click(function(){
                $("#pop").hide();
            });

        });
    </script>
</body>
</html>

'Web 수업자료 > Web 정규' 카테고리의 다른 글

UX/UI 디자인 24-11  (7) 2024.11.16
Web 1,2 24-10  (10) 2024.11.11
Web 1,2 저녁 24-10  (0) 2024.11.08
Web 4 24-09  (1) 2024.09.10
Web 3 24-08  (0) 2024.08.08

'Web 수업자료/Web 정규'의 다른글

  • 현재글웹디자인 기능사

관련글

티스토리툴바