목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기

HTML 샘플 / 텍스트 태그 / 목록 태그

목록태그 HTML으로 생성한 것에 CSS로 디자인 요소를 추가할 수 있다. 

 

 

 

 

1. 리스트 블릿기호 변경 : list-style-type

1. ul (unordered list)

list-style-type 리스트 블릿기호 태그속성 - none, disc, circle, square

1.none

블릿기호 출력안함 

2. disc

블릿기호 : 까만점

3. circle

블릿기호 : 하얀 원 

4. square

블릿기호 : 사각형

 

 

2. ol(ordered list)

list-style-type 리스트 블릿기호 태그속성 - none, disc, circle, square

1. lower-roman

로마숫자 소문자
2. upper-roman

로마숫자 대문자
3. lower-alpha 

알파벳 소문자
4. upper-alpha

알파벳 대문자

5. decimal

숫자

6. none

블릿기호 출력안함

 

 

 

    <style>
        ul{
            list-style-type : disc;
            list-style-position: inside;
        }
        ol{
            list-style-type: lower-roman;
        }
    </style>

 

 

 

 

2. 블릿기호에 이미지 사용하기 : list-style-image

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

블릿기호 대신에 원하는 이미지파일을 적용할 수도 있다.

list-style-image에 이미지 경로를 잡아주어 설정할 수 있다.

 

 

 

 

3. 목록 들여쓰기 / 내어쓰기 : list-style-position / text-indent

1. list-style-position: inside/outside

inside : 목록의 블릿기호를 안으로 들여쓰기(inside)로 지정

outside : 목록의 블릿기호를 밖으로 내어쓰기(outside)로 지정

 

 

 

위의 예시는 로마자소문자 태그 외에는 아무런 태그를 걸지 않았고,

아래 예시에는 들여쓰기를 위해 list-style-position: inside 태그를 추가한 것이다.

 

비교했을 때 inside로 들여쓰기 되었지만, 문장이 길어져서 내려올 때 두번째줄부터는 들여쓰기가 되지 않는다.

이것을 해결하기 위해서는 text-indent를 사용한다.

 

 

2. text-indent

 px, em 등을 이용해 문단의 첫 줄에 대한 들여쓰기/ 내어쓰기를 할 수 있다.

음수는 왼쪽으로 이동하여 내어쓰기 / 양수는 오른쪽으로 이동하여 들여쓰기를 적용한다.

 

 

text-indent: -1em 을 추가해서 해결하였다.

문단의 첫줄에 음수값을 입력해서 왼쪽으로 내어쓰기가 적용되었다. 원하는 모습으로 두번째줄 들여쓰기가 적용된다.