CSS에서 li 목록 항목 앞의 점을 제거하는 방법

웹 개발에서는 목록이 자주 사용되지만 목록 항목 앞의 점은 필요하지도 원하지도 않습니다. 그럼 어떻게 제거하나요? 이 글에서는 CSS를 사용하여 목록 항목 앞의 점을 제거하는 방법을 보여 드리겠습니다.

HTML에서는 일반적으로

또는
태그를 사용하여 순서가 지정된 목록이나 순서가 지정되지 않은 목록을 만듭니다. 정렬되지 않은 목록에서는 기본적으로 작은 점이 표시되고, 정렬된 목록에서는 기본적으로 숫자나 문자가 표시됩니다.

다음과 같은 HTML 코드가 있다고 가정해 보겠습니다.

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

이때 코드를 실행하면 각 줄 앞에 작은 점이 표시됩니다.

이러한 점을 제거하려면 CSS를 사용하여 제어할 수 있습니다. 아래에서는 세 가지 방법을 소개하겠습니다.

방법 1: 목록 스타일 사용

list-style은 목록의 스타일을 설정하는 데 사용되는 속성으로 목록 항목 앞의 글리프를 설정할 수 있습니다. 모든 글리프를 제거하려면 없음으로 설정할 수 있습니다. 다음은 구체적인 코드 구현입니다.

ul {
  list-style: none;
}

목록 스타일을 사용하면 모든 목록 항목을 한 번에 해결할 수 있지만 나중에 일부 목록 항목에 대해 특별한 설정을 해야 하는 경우에는 더 번거롭습니다.

방법 2: 의사 요소 사용: before

CSS에는 요소 앞에 내용을 추가할 수 있는 의사 요소인 before가 있습니다. 이를 사용하여 문자 모양을 제거하고 공백으로 바꿀 수 있습니다. 다음은 구체적인 코드 구현입니다.

ul li:before {
  content: " ";
}

이 방법은 상대적으로 더 유연하며 특정 li 요소를 설정할 수 있지만 이 방법은 순서가 지정되지 않은 목록에만 적용된다는 점에 유의해야 합니다. 순서가 지정된 목록 앞의 숫자나 문자를 제거하려면 다른 방법이 필요합니다.

방법 3: 변경 태그 사용

순서가 지정되지 않은 목록

의 태그를
또는

로 변경하여 앞에 있는 작은 점을 제거할 수 있습니다.

<div>
  <p>第一项</p>
  <p>第二项</p>
  <p>第三项</p>
</div>

이 방법을 사용하면 앞에 있는 작은 점을 제거할 수 있지만 목록의 원래 의미도 파괴되어 목록의 의미가 일부 손실됩니다. 단지 점을 제거하기 위해 목록 레이블을 제거하는 것은 아마도 좋은 습관이 아닐 것입니다.

요약하자면, 목록 항목 앞의 점을 제거하는 세 가지 일반적인 방법을 소개했습니다. 어떤 방법을 사용할지는 실제 요구 사항과 시나리오에 따라 다릅니다. 실제 개발에서는 다양한 요구 사항을 충족하기 위해 다양한 방법을 결합할 수도 있습니다.

위 내용은 CSS에서 li 목록 항목 앞의 점을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html 伪元素 ul li
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.