카테고리 메뉴 만들기

 

카테고리 메뉴는 사용자에게 세부 메뉴 항목을 보이기 쉽게 한다. 구현하고자 하는 카테고리 메뉴는 아래와 같다.

 

 

위와 같은 카테고리 메뉴를 만들기 위해서 다음과 같이 태그를 구성한다.

 

<div class="left">

    <dl>

        <dt><img src="group_open.gif" />접근관리</dt>

        <dd>IP정책</dd>

        <dd>로그인정책</dd>

        <dd>접근기록</dd>

        <dd>세션정보</dd> 

    </dl>

</div>

 

CSS 스타일은 다음과 같이 지정한다.

 

dl { margin:0px; }    // dl 엘레멘트의 기본 마진을 제거

dd { margin:0px; }     // dd 엘레멘트의 기본 마진을 제거

.left dt { font-weight:bold; padding:3px; }

.left img { vertical-align:middle; }    // 이미지가 텍스트 가운데 위치하게 함

.left dd { font-size:12px; text-indent:20px; padding-top:4px; }    // 패딩을 주어 여백과 텍스트 들여쓰기를 줌