CSS-FLASHMENU

임재헌·2023년 3월 24일
CSS

목록 보기
20/23
<!DOCTYPE html>   
<html lang="ko"> 
<head>
<title> 20_플래시 메뉴 </title> 
<style>
.hide{
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

#nav{
    width: 200px;
    margin: 0 auto;
    background-color: silver;
}

#nav>ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*1.링크되는 문자열 스타일*/
#nav>ul>li>a{
    text-decoration: none;
    font-weight: bold;
    color: black;
    width: 200px;
    height: 64px;
    display: block;
    text-indent: 30px;/*들여쓰기*/
    /*4. 이미지 추가*/
    background-image: url(../images/icons.png);
    background-repeat: no-repeat;
    background-position: right 0;
}
/*2.링크 문자열에 마우스가 오버되면 각 배경색을 바꾼다*/
#nav>ul>li:nth-child(1)>a:hover{
    background-color: hotpink;
    /*16진수 #33ffff rgb함수(0,255,0)*/
}
#nav>ul>li:nth-child(2)>a:hover{
    background-color: aqua;
}
#nav>ul>li:nth-child(3)>a:hover{
    background-color: crimson;
}
#nav>ul>li:nth-child(4)>a:hover{
    background-color: darkgreen;
}
/*3.링크 문자열에 마우스가 오버되면 다양한 스타일 적용 */
#nav>ul>li>a:hover{
    color:white;
    font-size: 16px;
    text-shadow: 2px 2px 2px black;   
    width: 300px;
    box-shadow: 8px 5px 3px black; 
    border-radius: 0 30px 30px 0;
    /*모서리 라운드 처리*/
    /* 투명도 조절*/
    opacity: 0.5;
    /*가로 방향으로 0.5초 동안 부드럽게*/
    transition: width 0.5s ease;
}
/*5.각각 다른 이미지를 보여주기 위해 각 이미지 위쪽 여백을 조절해서 지정*/
#nav>ul>li:nth-child(2)>a{
    background-position: right -66px;/*right top*/
}
#nav>ul>li:nth-child(3)>a{
    background-position: right -462px;

}
#nav>ul>li:nth-child(4)>a{
    background-position: right -528px;
}

</style>
</head>

<body>
    <h1 class="hide"> 플래시 메뉴</h1> 
    <div id="nav">
        <h2 class="hide">주요메뉴</h2>
        <ul>
            <li><a href="#">flicker </a></li>
            <li><a href="#">twitter </a></li>
            <li><a href="#">newsvine </a></li>
            <li><a href="#">last.fm </a></li>
        </ul>
    </div>
</body>
</html>
임재헌
이전 포스트
CSS-SKEW

다음 포스트
CSS-FLASHMENU

CSS

CSS-SKEW

CSS-META TAG

0개의 댓글
