Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

parisangsoo

CSS 02/27 본문

CSS

CSS 02/27

SangssI 2023. 2. 27. 14:59

서브 메뉴 만들기 코드 분석

목표 결과 화면

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>서브메뉴 만들기</title>
    <link rel="stylesheet" href="../CSS/reset.css"> /* CSS폴더에서의 reset.css 파일 참조 */ 
    <style>
        #nav { width: 1050px; height: 45px;  /* 너비 높이 지정 */
            padding: 6px 7px; /* 안쪽 여백 지정 */
            background: #666; /* 배경색 지정 */
            margin: 0 auto; /* 메뉴 전체의 가운데 정렬 */

        }
        /* 자식 선택자를 통해 직계 li에게만 속성을 적용 */
        #nav > li { float: left; position: relative; /* 왼쪽 정렬, 부모의 속성 지정 */
            margin: 3px 10px; /* 바깥 여백 지정 */
            margin-left: 70px; /* 왼쪽 여백으로 메뉴의 거리감 지정 */
            text-align: center; /* 텍스트 중앙 정렬 */
        }
        #nav li a { display: block; /* a태그를 블록요소로 지정 */
            font: bold 20px sans-serif; /* 글씨 두껍게, 20px크기 , 기본 폰트 */
            padding: 10px 20px; /* 안쪽 여백 지정 */
            color: #e7e5e5; } /* 글자 색상 지정 */
            /*처음으로, 여행안내, 이용방법, 게시판, 사이트맵에 마우스를 올렸을때 변경사항 */
        #nav li:hover a { background: #fff; color: #444; } 
            /* 서브 메뉴의 위치값 지정권한 및 너비,테두리, 위치 지정 */ 
        #nav ul { width: 150px; border: 1px solid #b4b4b4;
            position: absolute; left: 0; top: 40px;}
            
        #nav > li ul { display: none; } /* 평소의 상태애소 서브메뉴를 숨겨줌 */
        #nav li:hover ul { display: block;} /* 마우스를 올렸을때 서브메뉴가 나타남 */
        #nav li ul li a {font-weight: normal;} /* 서브메뉴의 폰트를 얇게 지정 */
        #nav li ul li:hover a{ background: #ccc; /* 서브메뉴에 마우스를 올렸을때 나타나는 속성*/
            font-weight: bold; /* 글씨의 폰트를 얇게 지정 */
            color: #fff; /* 글씨의 색상을 지정 */
            border-radius: 30px;} /* 테두리를 둥글게 나타내는 속성 지정 */

    </style>

</head>
<body>
<ul id="nav">
    <li><a href="#">처음으로</a></li>

    <li>
        <a href="#">여행 안내</a>
        <ul>
            <li><a href="#">소개합니다.</a></li>
            <li><a href="#">오시는 길</a></li>
        </ul>
    </li>

    <li>
        <a href="#">이용방법</a>
        <ul>
            <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>
            <li><a href="#">공지사항</a></li>
            <li><a href="#">Q&A</a></li>
        </ul>
    </li>

    <li><a href="#">사이트맵</a></li>
</ul> <!-- nav -->





</body>
</html>

 

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

CSS 02/24  (0) 2023.02.24
CSS 02/23  (1) 2023.02.23
CSS 02/22  (0) 2023.02.23
CSS 02/20 ~ 02/21  (0) 2023.02.22
'CSS' Related Articles more
Comments