본문 바로가기
2023/HTML

[HTML] 스크립트&폰트 설정

by Or0i쿠 2023. 4. 11.
지난 시간 ... position

 

 

더보기

 

 

<!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>
</head>
<link rel="stylesheet" href="./CSS/style.css">
<body>
    <div id="wrap">
    <header id="header" class="clearfix">
        <h1 class="logo"><a href="#"><img src="./images/logo.png" alt="logoimg"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">탑</a>
                <ul class="sub">
                    <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="sub">
                        <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="sub">
                    <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="sub">
                    <li><a href="#">귀걸이</a></li>
                    <li><a href="#">목걸이</a></li>
                    <li><a href="#">반지</a></li>
                    <li><a href="#">팡찌</a></li>
                </ul></li>
            </ul>
        </nav>
    </header>
    <section id="banner"><img src="./images/slide1.png" alt="ss urban"></section>
    <section id="contents" class="clearfix">
        <div class="notice">
            <h4>공지사항</h4>
            <ul>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가2021 봄 이벤트 30% sale !!! 특가2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가2021 봄 이벤트 30% sale !!! 특가</a></li>
                <li><a href="#">2021 봄 이벤트 30% sale !!! 특가 2021 봄 이벤트 30% sale !!! 특가</a></li>
            </ul>
        </div>
        <div class="c_ban">
            <h4>배너</h4>
            <ul>
                <li><img src="./images/gallery1.png" alt="1"></li>
                <li><img src="./images/gallery2.png" alt="2"></li>
                <li><img src="./images/gallery3.png" alt="3"></li>
            </ul>
        </div>
        <div class="link">
            <h4>바로가기</h4>
            <ul><li><img src="./images/link.png" alt=""></li></ul>
        </div>
    </section>
    <footer id="footer" class="clearfix">
        <div class="f_logo">
            <img src="./images/logo_f.png" alt="푸터로고">
        </div>
        <div class="f_menu">
            <a href="#">회사소개</a>
            <a href="#">사이트맵</a>
            <a href="#">개인정보처리방침</a>
            <a href="#">이메일수집거부</a>
            <a href="#">사이버감사실</a>
        </div>
        <div class="f_sns">
            <img src="./images/facebook.png" alt="페이스북">
            <img src="./images/twitter.png" alt="트위터">
            <img src="./images/instagram.png" alt="인스타그램">
        </div>
    </footer>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<SCript>
    $(".nav>ul>li").mouseover(function(){
        $(this).find(".sub").stop().slideDown(200)
    })
    $(".nav>ul>li").mouseleave(function(){
        $(this).find(".sub").stop().slideUp(200)
    })
</SCript>
</body>
</html>
@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box; font-size: 13px;}
li{list-style: none;}
a{color: #333; text-decoration: none;}
img{display: block;}
h1,h2,h3,h4,h5,h6{font-size: 13px; font-weight: normal;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

#wrap{width: 1200px; margin: 0 auto;}

/* header */
#header{width: 100%; background-color: lightgray;}
/* logo */
#header .logo{width: 200px; height: 100px; float: left;}
#header .logo>a{}
#header .logo>a>img{padding-top: 30px;}

/* nav */
#header .nav{background-color: white; 
    float: right; margin-top: 30px;}
#header >.nav>ul{}
#header >.nav>ul>li{background-color: black; width: 150px; height: 50px; float: left;
position: relative;}
#header >.nav>ul>li>a{font-size: 16px; font-family: 'TheJamsil5Bold';
    color: white; text-align: center;line-height: 50px; display: block;
}
#header >.nav>ul>li:hover{background-color: #ffd600  ;}
#header >.nav>ul>li>a:hover{color: black;}
#header >.nav>ul>li>.sub{position: absolute; left: 0; float: left; height: 200px; 
    display: none;}
#header >.nav>ul>li>.sub>li{background-color: #424242; width: 150px; height: 50px;}
#header >.nav>ul>li>.sub>li{}
#header >.nav>ul>li>.sub>li>a{color: whitesmoke; display: block ;
text-align: center; line-height: 50px; font-weight: bold; font-size: 15px;}
#header >.nav>ul>li>.sub>li>a:hover{color: black;}
#header >.nav>ul>li>.sub>li:hover{background-color: white;}

/* //header */

/* content */
#contents{width: 1200px;}
#contents>div{width: 400px; height: 200px; background-color: #bdbdbd ;
float: left; padding: 10px;}
#contents>div>h4{width: 120px; height: 40px; background-color: #212121 ;
text-align: center; line-height: 40px; color: white; 
font-family: 'TheJamsil5Bold'; letter-spacing: 4px; font-weight: 100; }
#contents>div>ul{border-top: 5px solid black; 
    padding-top: 8px; left:0px; right: 0px;}
#contents>.c_ban>ul>li{float: left;}
/* content_banner */
#contents>.c_ban>ul>li>img{margin-left: 4px;}
#contents>.c_ban>ul>li:last-child{margin-right: 0px;}
#contents>.link>ul{
    width: 380px; height: 180px; overflow: hidden;
}
/* .notice */
#contents>.notice{}
#contents>.notice>ul{}
#contents>.notice>ul>li{position: relative; content: ""; padding-top: 5px; padding-bottom: 3px;}
#contents>.notice>ul>li::before{content: ""; position: absolute; width: 3px; height: 3px;
    left: 10px; top:13px; background-color: #212121;
    border-radius: 50%;
}
#contents>.notice>ul>li>a{padding-left: 30px; 
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
display: block;
}

/* footer */
#footer{
    width: 100%;
    background-color: black; 
}
#footer a{color: white;}
#footer>div{
    height: 100px;  width: 200px;
    line-height: 100px; float: left;
}
#footer .f_logo{
    padding-top: 30px;
}
#footer .f_menu{
    width: 800px; text-align: center;
}
#footer .f_menu>a{position: relative; margin-right: 15px;}
#footer .f_menu>a::before{content: ""; position: absolute;
left: -10px; top: 2px; width: 1px; height: 15px; background-color: #666;}
#footer .f_menu>a:first-child::before{width: 0;}

#footer .f_sns{}
#footer .f_sns>img{
    display: inline; margin-right: 15px; padding-top: 35px; margin-left: 10px;
}
↓ 스크립트 명령어 한번에 해결하기 ↓
    <script>
        $(".nav>ul>li").mouseenter(function(){
            $(this).find(".sub").stop().slideDown(200)
            $(".dgnav").stop().slideDown(200)
        })
        $(".nav>ul>li").mouseleave(function(){
            $(this).find(".sub").stop().slideUp(200)
            $(".dgnav").stop().slideUp(200)
        })
    </script>

 

더보기
<!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">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1 class="logo"><a href="#"><img src="./img/logo.gif" alt="logo"></a></h1>
            <nav class="nav">
                <ul>
                    <li><a href="#">재단소개</a>
                        <ul class="sub">
                            <li><a href="#">설립취지</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">찾아오시는 길</a></li>
                        </ul>
                    </li>
                    <li><a href="#">후원하기</a>
                        <ul class="sub">
                            <li><a href="#">국내후원</a></li>
                            <li><a href="#">국외후원</a></li>
                            <li><a href="#">맞춤후원</a></li>
                        </ul></li>
                    <li><a href="#">자료실</a>
                        <ul class="sub">
                            <li><a href="#">서식자료싷</a></li>
                            <li><a href="#">사진자료실</a></li>
                            <li><a href="#">후원양식</a></li>
                        </ul></li>
                    <li><a href="#">스토리</a>
                        <ul class="sub">
                            <li><a href="#">웹진</a></li>
                            <li><a href="#">보고서</a></li>
                            <li><a href="#">나의 후원</a></li>
                        </ul></li>
                </ul>
            </nav>
            <div class="dgnav"></div>
        </header>

        <section id="banner" class="clearfix"><img src="./img/slider3.jpg" alt=""></section>
        <section id="contents" class="clearfix">
            <div class="notice">
                <h3>공지사항</h3>
                <ul>
                    <li><a href="#">'GREEN : 나눔', 프로젝트 신청 안내</a></li>
                    <li><a href="#">2023 복지관  채용 공고 공지사항 안내</a></li>
                    <li><a href="#">2023 그린 이웃 with me 프로젝트(3월) 결과보고 자료</a></li>
                    <li><a href="#">2023 그린 이웃 with me 프로젝트 신청 안내 사항 및 주의 사항</a></li>
                    <li><a href="#">2023 그린 이웃 with me 프로젝트 </a></li>
                </ul>
            </div>
            <div class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li><img src="./img/thumb1.jpg" alt="갤러리1"></li>
                    <li><img src="./img/thumb2.jpg" alt="갤러리2"></li>
                    <li><img src="./img/thumb3.jpg" alt="갤러리3"></li>
                </ul>
            </div>
            <div class="link">
                <h3>바로가기</h3>
                <ul>
                    <li><img src="./img/banner.jpg" alt=""></li>
                </ul>
            </div>
        </section>
        <footer id="footer" class="clearfix">
            <div class="f_logo">
                <img src="./img/logoBtm.gif" alt="">
            </div>
            <div class="f_menu">
                <a href="#">회사소개</a>
                <a href="#">사이트맵</a>
                <a href="#">개인정보처리방침</a>
                <a href="#">이메일수집거부</a>
                <a href="#">사이버감사실</a>
            </div>
            <div class="f_sns">
                <img src="./img/instagram.png" alt="">
                <img src="./img/facebook.png" alt="">
                <img src="./img/twitter.png" alt="">
            </div>
        </footer>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".nav>ul>li").mouseenter(function(){
            $(this).find(".sub").stop().slideDown(200)
            $(".dgnav").stop().slideDown(200)
        })
        $(".nav>ul>li").mouseleave(function(){
            $(this).find(".sub").stop().slideUp(200)
            $(".dgnav").stop().slideUp(200)
        })
    </script>
</body>
</html>

 

@charset "utf-8";
*{margin: 0;padding: 0; box-sizing: border-box;
     font-family: 'NanumSquareNeo-Variable'; }
li{list-style: none;}
a{color: #333; text-decoration: none;}
img{display: block;}
h1,h2,h3,h4,h5,h6{font-size: 13px; font-weight: normal;}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
@font-face {
     font-family: 'NanumSquareNeo-Variable';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
 }

#wrap{width: 1200px; margin: 0 auto;}


/* header */
#header{width: 100%; background-color: white;
position: relative;}

/* .logo */
#header>.logo{width: 300px; height: 100px; background-color: white; float: left; padding-top: 29px; padding-left: 40px;}

/* nav */
#header>.nav{background-color: #2e7d32; float: right; margin-top: 50px;}
#header>.nav>ul{}
#header>.nav>ul>li{width: 200px; height: 50px; background-color: #388e3c ;
float: left; position: relative;}
#header>.nav>ul>li>a{text-align: center; line-height: 50px; color: white; display: block; font-size: 18px;}
#header>.nav>ul>li:hover{background-color: #33691e;}
#header>.nav>ul>li>.sub{position: absolute; float: left; left: 0; display: none; z-index: 10;}
#header>.nav>ul>li>.sub>li{width: 200px; height: 50px; background-color: #c8e6c9  ;
     }
#header>.nav>ul>li>.sub>li>a{text-align: center; line-height: 50px;}
#header>.nav>ul>li>.sub>li>a:hover{background-color: #e6ee9c ;}

#header>.dgnav{ width: 1200px; height: 150px; background-color: #c8e6c9;
 left: 0; top: 100px; position: absolute; z-index: 9; display: none;}
/* //header */



#banner{}

/* content */
#contents{width: 100%; background-color: antiquewhite; height: 200px;}
#contents>div{width: 400px; height: 200px; float: left; padding: 10px;
background-color: antiquewhite;}
#contents>div>h3{width: 120px; height: 40px; color: white;
background-color: #2e7d32; text-align: center; line-height: 40px;}
#contents>div>ul{border-top: 3px solid #2e7d32;}

/* .notice */
#contents>.notice>ul>li>a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
#contents>.notice>ul>li{position: relative; padding-top: 5px;
padding-bottom: 3px; content: ""; left: 18px;}
#contents>.notice>ul>li::before{content: ""; position: absolute; width: 3px; height: 3px; left: -8px; top: 10px; background-color: #333; border-radius: 50%;}


/* .gallery */
#contents>.gallery>ul>li{float: left; margin-right: 16px; margin-top: 19px;}
#contents>.gallery>ul>li:last-child{margin-right: 0;}

/* link */
#contents>.link>ul{padding-left: 12px; padding-top: 19px;} */

/* \\contents */



/* footer */
#footer {width: 100%; background-color: #33691e;}
#footer a{}
#footer>div{height: 100px;width: 250px; background-color: #388e3c;
float: left; line-height: 100px;}
/* .f_logo */
#footer>.f_logo{background-color: white;  padding-left: 20px;padding-top: 28px; }
/* .f_menu */
#footer>.f_menu{width: 700px; text-align: center; }
#footer>.f_menu>a{position: relative; margin-right: 15px;}
#footer>.f_menu>a::before{position: absolute; 
     content: ""; background-color: darkgreen; 
     width: 1px;height: 15px; left: -10px; top: 2px;}
#footer>.f_menu>a:last-child{margin-right: 0;}
#footer>.f_menu>a:first-child::before{width: 0;}
#footer>.f_menu>a:nth-child(3){font-weight: bold;}
/* .f_sns */
#footer>.f_sns>a{}
#footer>.f_sns>a>img{display: inline-block; margin-left: 34px; margin-right: 15px; padding-top: 38px;}

 

/* .notice */
#contents>.notice>ul>li>a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
#contents>.notice>ul>li{position: relative; padding-top: 5px;
padding-bottom: 3px; content: ""; left: 18px;}
#contents>.notice>ul>li::before{content: ""; position: absolute; width: 3px; height: 3px; left: -8px; top: 10px; background-color: #333; border-radius: 50%;}
#footer>.f_sns{text-align: center; line-height: 100px;}
#footer>.f_sns>a{}
#footer>.f_sns>a>img{display: inline-block; padding: 0 10px;}
/* .f_menu */
#footer>.f_menu{width: 700px; text-align: center; }
#footer>.f_menu>a{position: relative; display: inline; margin-right: 15px;}
#footer>.f_menu>a::before{position: absolute; 
     content: ""; background-color: darkgreen; 
     width: 1px;height: 15px; left: -10px; top: 2px;}
#footer>.f_menu>a:last-child{margin-right: 0;}
#footer>.f_menu>a:first-child::before{width: 0;}
#footer>.f_menu>a:nth-child(3){font-weight: bold;}

https://fontawesome.com/search?q=down&o=r 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

저작자표시 비영리 동일조건 (새창열림)

'2023 > HTML' 카테고리의 다른 글

[html] 웹페이지 구상  (0) 2023.04.11
[HTML] 유진건설 홈페이지 기본적인 틀 만들기  (0) 2023.04.11
[html] Tool  (0) 2023.04.10
[HTML] 스크립트 사용법 & 가상요소 활용  (0) 2023.04.07
[HTML] 포지션 활용  (0) 2023.04.06

관련글

티스토리툴바