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();
    });
});

 

 

 

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

Web 4 24-09  (1) 2024.09.10
Web 3 24-08  (0) 2024.08.08

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

  • 현재글웹디자인 기능사

관련글

티스토리툴바