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 중국어 웹사이트의 기타 관련 기사를 참조하세요!