관리 메뉴

어제 오늘 내일

[HTML/CSS] <UL>, <LI> 리스트의 점 없애기 본문

IT/HTML&CSS

[HTML/CSS] <UL>, <LI> 리스트의 점 없애기

hi.anna 2022. 12. 15. 07:22

 

<ul>, <ol>, <li> 태그를 사용하여 생성된 목록 앞에는

목록을 구분하는 점, 숫자 등이 표시됩니다.

이 때, 앞에 붙는 점을 없애는 방법입니다.

 

 

list-style-type 또는 list-style

목록
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>
점 없는 목록
<ul class='no_dot'>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>
.no_dot {
  list-style-type: none;
}

list-style-type: none;

리스트 앞에 붙은 점을 제거 하기 위해서

list-style-type의 값을 'none'으로 설정하였습니다.

list-style-type 대신 list-style 속성을 사용해도 됩니다.

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

(list-style 속성은, list-style-image, list-style-position, list-style-type 속성을 포함하는 단축 속성입니다)

 

 

 

 

반응형
0 Comments
댓글쓰기 폼