CSS 목록과 링크 스타일

 

 

목록의 불릿과 번호 스타일 지정하기 - list-style-type 속성

메뉴 항목이 목록과 링크를 결합한 형태이다. 목록과 링크를 만드는 속성에 대해서 알아보고자 한다.

 

/* 기본형 */
list-style-type: none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

 

 

 순서 없는 목록에서 불릿 모양 바꾸기 

순서 없는 목록은 기본적으로 채운 원(disc)을 불릿으로 사용한다. list-style-type 속성의 여러 속성 값을 이용해 불릿을 바꿀 수 있다.

• none: 항목 앞에 붙는 불릿을 없앤다. 주로 네비게이션(메뉴)를 만들 때 불릿이 보이지 않게 사용한다.
• disc : 채운 원 모양의 불릿이다. 기본값이다.
• circle : 빈 원 모양의 불릿이다.
• square : 채운 사각형 모양의 불릿이다.

 

<style>
    .sqbullet{ list-style-type: square; }
    .nobullet{ list-style-type: none; }
<style>

<ul class="nobullet">
     <li></li>
     <li></li>
</ul>

<ul class="sqbullet">
    <li></li>
    <li></li>
</ul>

 

 

 순서 목록에서 숫자 바꾸기

순서 목록에는 불릿 말고 항목 앞에 숫자가 붙는다. list-style-type 속성을 이용하면 숫자의 스타일도 바꿀 수 있다. 속성값은 다음과 같다.

• decimal : 1로 시작하는 십진수이다(1,2,3,4...). 기본값이다.
• decimal-leading-zero : 앞에 0이 붙는 십진수이다(01, 02, 03, ...).
• lower-roman : 소문자 로만 숫자이다.
• upper-roman : 대문자 로만 숫자이다.
• lower-alpha 혹은 lower-latin : 소문자 알파벳이다. (a, b, c, ...)
• upper-alpha 혹은 upper-latin : 대문자 알파벳이다. (A, B, C, ...)
• armenian : 아르메니아 숫자이다.
• georgian : 조지 왕조시대의 숫자이다. (an, ban, gan ...)

 

<style>
    ol {
        list-style-type: lower-alpha;
    }
</style>

<ol>
    <li>회사 소개</li>
    <li>도서</li>
    <li>사무실</li>
    <li>도서관</li>
</ol>

 

 

 블릿 대신 이미지 넣기 - list-style-image 속성

list-style-image 속성을 사용하면 블릿을 원하는 이미지로 바꿀 수 있다.

 

/* 기본형 */
list-style-image : <이미지> | none
/* <이미지> = url("이미지 파일 경로") */

 

예시)

<style>
    ul {
    	list-style-image: url("image.png");
    }
</style>

<ul>
    <li>회사 소개</li>
    <li>도서</li>
    <li>사무실</li>
    <li>도서관</li>
</ul>

 

 

 목록에 들여 쓰는 효과 내기 - list-style-position 속성

불릿이나 번호는 실제 내용의 바깥쪽에 표시된다. 하지만 list-style-position 속성을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과 화면에는 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과가 나타난다. 속성값은 다음과 같다.

• inside : 불릿이나 숫자를 안쪽으로 들여쓴다.
• outside : 불릿이나 숫자를 밖으로 내어 쓴다. 기본값이다.

 

예시)

.inside {
    list-style-position: inside;
}