본문 바로가기
2023/HTML

[HTML] 스크립트 사용법 & 가상요소 활용

by Or0i쿠 2023. 4. 7. 
@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none; }
h1,h2,h3,h4,h5,h6{}
.clearfix::after, .clearfix::before{content: ""; display: block; clear: both;}
#wrap{width: 1200px;margin: 0 auto;}
#header{width: 100%;
    /* height: 100px; background-color: antiquewhite; */
    }

#footer {
    width: 100%;
    height: 100px;
    background-color: aqua;
}

#header >.logo{float: left;}
#header >.logo>a>img{padding-top: 10px;}
#header >.nav{float: right; margin-top: 50px;}
#header >.nav>ul{}
#header >.nav>ul>li{
    width: 150px; height: 50px;background-color: #1565c0 ; float: left;
    position: relative;
}
#header >.nav>ul>li>a{
    line-height: 50px; text-align: center; color: azure;
    display: block; 
}
#header >.nav>ul>li>.submenu{position: absolute; background-color: #1e88e5; 
display: none;}
#header >.nav>ul>li>.submenu>li{width: 150px; height: 50px;}
#header >.nav>ul>li>.submenu>li:hover{background-color: #0d47a1;}
#header >.nav>ul>li>.submenu>li>a{ text-align: center; line-height: 50px; display: block;
color: white;}
#header >.nav>ul>li:hover{background-color: #424242 ;}
/* banner */
#banner{width: 100%; height: 300px; background-color: lightyellow;
overflow: hidden;}
#banner>ul{width: 3600px;height: 300px; }
#banner>ul>li{float: left;}
#banner>ul>li>img{}

/* contents */
#contents{width: 100%; height: 200px; }
#contents>div{width: 380px;height: 180px; float: left;
color: white; padding: 10px;}
#contents>div>h3{background-color: #0d47a1 ; width: 120px; height: 40px;
text-align: center; line-height: 40px; border-radius: 20px 0;}
#contents>div>ul{border-top: 5px solid #0d47a1;}
#contents>.notice{
    /* background-color: #0288d1   ;  */
}
#contents>.notice>ul>li{padding-top: 8px;padding-left: 10px;}
/* cont_gallery */
#contents>.gallery{ 
    /* background-color: #0277bd ; */
}
#contents>.gallery>ul>li{float: left ; padding-right: 10px; padding-top: 8px;}
#contents>.gallery>ul>li:last-child{padding-right: 0;}
/* cont_link */
#contents>.link{
    /* background-color: #0288d1  ; */
}

#contents>.link>ul>li{width: 380px; height: 130px; overflow: hidden;padding-top: 8px;}
더보기

ctrl + k + f 정렬

더보기
/* banner */
#banner{width: 100%; height: 300px; background-color: lightyellow;
overflow: hidden;}
#banner>ul{width: 3600px;height: 300px; }
#banner>ul>li{float: left;}
#banner>ul>li>img{}
제이쿼리로 서브메뉴 보이게하기

https://developers.google.com/speed/libraries?hl=ko#jqueryㅇ

호스팅된 라이브러리     |  Hosted Libraries  |  Google Developers

가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.

developers.google.com

 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".nav>ul>li").mouseenter(function(){});
    </script>
$(".nav>ul>li").mouseenter(function(){명령});
    <script>
        $(".nav>ul>li").mouseenter(function(){
            $(this).find(".submenu").slideDown(200)
        });
    </script>
더보기
<!DOCTYPE html>
<html lang="en">
<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>Document</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_star/logo.png" alt=""></a>
            </h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">강원천문대</a>
                    <ul class="submenu">
                        <li><a href="#">천문대소개</a></li>
                        <li><a href="#">인사말</a></li>
                        <li><a href="#">오시는 길</a></li>
                    </ul>
                    </li>
                    <li><a href="#">이용안내</a>
                        <ul class="submenu">
                            <li><a href="#">프로그램</a></li>
                        <li><a href="#">관람시간표</a></li>
                        <li><a href="#">이달의별자리</a></li>
                        </ul>
                    </li>
                    <li><a href="#">천문대예약</a>
                        <ul class="submenu">
                        <li><a href="#">예약하기</a></li>
                        <li><a href="#">예약확인</a></li>
                        <li><a href="#">예약취소</a></li>
                        </ul>
                    <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>
        <section id="banner"><ul class="clearfix">
            <li><img src="./img_star/banner01.png" alt=""></li>
            <li><img src="./img_star/banner02.png" alt=""></li>
            <li><img src="./img_star/banner03.png" alt=""></li>
        </ul></section>
        <section id="contents" class="clearfix">
            <div class="notice">
                <h3>공지사항</h3>
                <ul>
                    <li>|강원 천문대| - 안내사항 -</li>
                </ul>
            </div>
            <div class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li><img src="./img_star/gallery01.png" alt=""></li>
                    <li><img src="./img_star/gallery02.png" alt=""></li>
                    <li><img src="./img_star/gallery03.png" alt=""></li>
                </ul>
            </div>
            <div class="link">
                <h3>바로가기</h3>
                <ul>
                    <li><img src="./img_star/qlink.png" alt=""></li>
                </ul>
            </div>
        </section>
        <footer id="footer"></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(".submenu").stop().slideDown(200)
        });
        $(".nav>ul>li").mouseleave(function(){
            $(this).find(".submenu").stop().slideUp(200)
        });
    </script>
</body>
</html>
box-shadow: 30px 20px;
더보기
box-shadow: 30px 20px 20px;
box-shadow: 30px 20px 20px palevioletred;
text-shadow: 10px 10px #aaa;
background: linear-gradient(to bottom,blue,red);
가상요소 추가
#contents>.notice>ul>li::before{content: ""; position: absolute; width: 3px; height: 3px;
    left: 10px; top:13px; background-color: #212121;
    border-radius: 50%;
}
white-space: nowrap; 한 줄로
overflow: hidden; 현재 영역에 너ㅓㄼ이 만큼 자르기
text-overflow: ellipsis; 말줄임표 
#contents&amp;gt;.notice&amp;gt;ul&amp;gt;li{position: relative; content: ""; padding-top: 5px; padding-bottom: 3px;}#contents&amp;gt;.notice&amp;gt;ul&amp;gt;li::before{content: ""; position: absolute; width: 3px; height: 3px;&amp;nbsp; &amp;nbsp; left: 10px; top:13px; background-color: #212121;&amp;nbsp; &amp;nbsp; border-radius: 50%;}
저작자표시 비영리 동일조건 (새창열림)

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

[HTML] 스크립트&폰트 설정  (0) 2023.04.11
[html] Tool  (0) 2023.04.10
[HTML] 포지션 활용  (0) 2023.04.06
[HTML] reset / 네비게이션  (0) 2023.04.05
[HTMl] 이미지 / 리스트  (0) 2023.04.04

관련글

티스토리툴바