HTML태그 중에서 리스트 태그인 ul, li에는 여러가지 타입, 종류가 존재합니다. 아래에서 자세히 알아봅니다.



# ul, li 태그 타입 및 스타일 알아보기

먼저 ul과 li 태그는 함께 사용되는 태그로 ul 태그 내부에 여러개의 li 태그를 사용할 수 있습니다. 아래를 봐주세요.
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

위와같이 내부에 여러개의 리스트 아이템이 위치하게 됩니다. 이때 각각의 리스트들을 어떻게 보여줄 지 결정할 수 있습니다. 일반적으로 square, circle 등이 자주 사용되지만 다양한 스타일이 존재합니다. 이때 사용 가능한 방법이 type 어트로뷰티를 사용하거나 아니면 css를 사용하는 방법이죠. 먼저 type을 알아보겠습니다.


! 태그에 type 어트로뷰티로 inline으로 코드를 추가하기
아래는 inline 방식으로 type 어트리뷰트를 추가하였습니다. 보시는 것처럼 type="square"라는 코드가 위치해있죠. square가 아닌 다른 값들을 사용할 수 있습니다. 원하는 리스트 타입을 선택하여 적용하시면 됩니다.
<ul type="square">
  <li>web</li>
  <li>is</li>
  <li>free</li>
</ul>

위 코드를 실행하면 어떻게 나타날까요? 바로 아래와 같이 나타나게됩니다.
<ul type="square">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>

다음으로 css의 속성을 사용하는 방법에 대하여 알아보죠.


! CSS의 list-style-type 속성으로 선언하기
이번에는 css를 사용하여 설정해보겠습니다. style 태그에 list-style-type 속성을 사용하고 값으로 disc를 주면 다음과 같을 것입니다.
<ul class="test">
  <li>web</li>
  <li>is</li>
  <li>free</li>
</ul>

@ list_style.css
ul.test {
  list-style-type: disc;
}

실제로 코드를 동작하면 어떻게 나타나지는 아래에서 확인해보세요.
<ul class="test">
<li>web</li>
<li>is</li>
<li>free</li>
</ul>
<style>
ul.test {
list-style-type: disc;
}
</style>

disc 타입은 위와 같이 출력되게됩니다.


! 리스트 스타일의 타입 값 알아보기
다양한 값들을 적용했을 때 어떻게 나타나는지 미리 알아두면 편리하겠죠. 아래는 다양한 값을 웹문서에 적용했을때 나타나는 모습입니다. 

  • disc

  • hiragana

  • hiragana

  • lower-alpha

  • lower-alpha

  • square


  • circle

  • decimal

  • decimal

  • upper-alpha

  • upper-alpha

  • upper-roman

  • upper-roman

  • none



여기까지 리스트 스타일을 적용하는 방법과 다양한 스타일을 함께 알아보았습니다.