CSS를 사용하여 글머리 기호 숨기기

이 기사에서는 HTML에서 목록의 글머리 기호를 숨기는 방법을 배웁니다. 개발자는 HTML 목록을 사용하여 관련 항목을 점별로 표시할 수 있습니다.

<ol> HTML 태그를 사용하여 주문 목록을 만들고 <ul> HTML 태그를 사용하여 정렬되지 않은 목록을 만들 수 있습니다. <ul>을 사용하면 기본적으로 글머리 기호에 대한 검은색 원이 생성되고 같은 방식으로 <ol>을 사용하면 기본적으로 글머리 기호에 대한 숫자가 만들어집니다.

이제 사용자 지정 이미지 또는 아이콘을 글머리 기호로 설정하려면 기본 글머리 기호를 숨겨야 합니다. 이것이 이 문서에서 수행할 작업입니다.

사용자 지정 CSS를 사용하여 기본 글머리 기호 숨기기

CSS를 사용하면 아래 예에서 글머리 기호만 숨길 것입니다.

여기서 우리는 두 가지 프로그래밍 언어 목록을 만들었습니다. 하나는 <ul> 태그를 사용하여 만든 순서 없는 목록이고 다른 하나는 <ol> HTML 태그를 사용하여 만든 순서 있는 목록입니다.

예제 코드:

<ul>
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Python</li>
  <li>Node Js</li>
  <li>Django</li>
</ol>

아래 출력에서 사용자는 기본 글머리 기호가 어떻게 보이는지 확인할 수 있습니다.

출력:

기본 글머리 기호를 숨기려면 list-style-type: none;을 적용합니다. HTML 목록에 추가하여 기본 글머리 기호를 숨깁니다.

아래 코드에서 사용자는 ul 및 ol 태그를 사용하여 모든 목록 항목에 액세스하고 CSS를 변경했음을 알 수 있습니다.

ul li {
list-style-type: none;
}
ol li {
list-style-type: none;
}

아래 출력에서 사용자는 정렬된 목록과 정렬되지 않은 목록의 글머리 기호가 숨겨져 있음을 확인할 수 있습니다.

출력:

또한 개발자는 인라인 CSS를 사용하여 특정 목록 항목의 글머리 기호를 숨길 수 있습니다. 아래 예에서는 정렬되지 않은 목록을 만들고 일부 항목에 대한 글머리 기호를 숨겼습니다.

<ul>
  <li style="list-style-type: none;">DelftStack</li>
  <li>Netherlands</li>
  <li style="list-style-type: none;">Germany</li>
</ul>

아래 출력에서 사용자는 여전히 Netherlands 항목에 대한 글머리 기호를 볼 수 있지만 list-style-type: none;을 적용한 DelftStack 및 Germany 항목에 대해서는 글머리 기호가 숨겨져 있습니다. 인라인 CSS를 사용합니다.

출력:

이 기사에서는 모든 항목의 글머리 기호를 제거하는 방법을 살펴보았습니다. 또한 특정 목록 항목의 글머리 기호를 숨기는 출력이 포함된 예제 코드를 보았습니다.