0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기

0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기

<ul> 요소로 순서가 없는 목록을 만들어보면 기본적(default)으로 각 항목(item)들은 글머리에 작은 동그라미 • 기호(Marker)가 표시된다.

    

이 글머리 기호를 바꾸고 싶으면 <ul> 요소에 style 속성으로 CSS의 list-style-type 속성(property)을 바꿔주면 된다. 즉, 다음과 같은 형식으로 작성한다. 

     

<ul style="list-style-type:속성값;">

  <li>항목들(items)</li>

   …

</ul>

CSS의 list-style-type 속성(property)의 속성값(value)은 disc, circle, square, none의 4가지가 있다. 

   

disc : 불릿(bullet) 기호 • 

circle : 동그라미 ◦ 

square : 네모 ￭

none : 글머리 기호 없음

하나하나 사용해보자. 

이 중 첫 번째의 CSS의 list-style-type의 속성값이 disc인 경우는 기본(Default)적인 설정값으로 별도의 글머리 기호를 지정하지 않을 경우 이 disc 속성값으로 구현된다.

위에서 제시한 HTML 사례는 0027.html로 작성되었다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:  0027 HTML 순서가 없는(unordered) 목록의 글머리 기호 바꾸기.apkg