ul tag 점 없애기, HTML ul 점 제거 방법

떠돌이개발자Sep 19, 2023

<UL>, <LI> 리스트 태그의 점을 없애기(제거) 하는 방법

<ul>, <ol>, <li> 태그를 사용하여 생성된 리스트(목록) 앞에는 기본적으로 불릿이 생성이 된다. 이 블릿( 점, 숫자 등)을 없애는 방법에 대해 알아보자.

블릿 제거를 위한 속성 2가지

아래 속성 중 아무거나 사용해도 된다. 참고로 list-style 속성은, list-style-image, list-style-position, list-style-type 속성을 포함하는 단축 속성이다.

list-style-type: none;
list-style: none;

제거 예시 코드

<html>
<head>
<style>
.none_dot {
  list-style-type: none;
}
</style>
<head>
<body>
과일 종류
<ul>
  <li>배</li>
  <li>바나나</li>
  <li>사과</li>
</ul>
점 없는 목록
<ul class='none_dot'>
  <li>배</li>
  <li>바나나</li>
  <li>사과</li>
</ul>
</body>
</html>

불릿(점, 숫자) 제거 및 들여쓰기 제거

아래 예제와 같이 css를 사용해도 되고, ul 태그에 바로 적용해도 된다.

ul 태그에 바로 적용하는 방법

<style>
ul{
   list-style:none;
   padding-left:0px;
}
</style>

css를 사용하는 방법

<html>
<head>
 <style>
   .none_dot {
      list-style-type: none;
      padding-left:0px;
   }
 </style>
<head>
<body>
과일 종류
<ul>
  <li>배</li>
  <li>바나나</li>
  <li>사과</li>
</ul>
점 없는 목록
<ul class='none_dot'>
  <li>배</li>
  <li>바나나</li>
  <li>사과</li>
</ul>
</body>
</html>

목록 태그(ul, ol, li)와 같은 기능을 CSS로 만드는 방법

<head>
<style>
li.1 { list-style-type : lower-roman } /* 로마숫자 소문자으로된 목록 */
li.2 { list-style-type : upper-roman } /* 로마숫자 대문자으로된 목록 */
li.3 { list-style-type : lower-alpha } /* 알파벳 소문자으로된 목록 */
li.4 { list-style-type : upper-alpha } /* 알파벳 대문자으로된 목록 */
li.5 { list-style-type : disc } /* 점으로 된 목록 */
li.6 { list-style-type : circle } /* 속이 하얀색 원으로 된 목록 */
li.7 { list-style-type : square } /* 사각형으로 된 목록 */
li.8 { list-style-type : decimal } /* 숫자로 된 목록 */
li.9 { list-style-type : none } /* 아무 표시 없음 */
</style>
</head>



<ol>
<li class='1'>목록 항목 lower-roman</li>
<li class='2'>목록 항목 upper-roman</li>
<li class='3'>목록 항목 lower-alpha</li>
<li class='4'>목록 항목 upper-alpha</li>
<li class='5'>목록 항목 upper-alpha</li>
<li class='6'>목록 항목 disc</li>
<li class='7'>목록 항목 circle</li>
<li class='8'>목록 항목 square</li>
<li class='9'>목록 항목 none</li>
</ol>