list-style-type: none; 리스트 앞에 붙은 점을 제거 하기 위해서 채택완료

 list-style-type: none;

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

 

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

list-style-type 대신 list-style 속성을 사용했습니다.

 

목록
첫번째 점 만 게거 - 사과
점 - 바나나
점 - 오렌지

 

첫 번째 점 만 안나오고 

두 번째 부터 ~ 나오게 하려면 어떻게 해야 하나요?

 

감사합니다.

 

답변 4개

채택된 답변
+20 포인트

Copy
<style>
ul.test_dot {
    list-style-type: disc;
}
ul.test_dot li:first-child {
    list-style-type: none;
}
</style>

 

<ul class="test_dot">
<li>첫번째 점 만 게거 - 사과</li>
<li>점 - 바나나</li>
<li>점 - 오렌지</li>
</ul>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

배르만 님, 답변 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

웹메이킹 님, 배르만 님 

답변 감사합니다. 많은 도움이 되었어요. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

다음과 같은 방법도 있으니 참고해 보세요

 

Copy
<style>

.fruit-point {
  list-style-type: disc;
}

.no-dot {
  list-style-type: none;
}
</style>

<ul class="fruits-list">
  <li class="fruit-point no-dot">사과</li>
  <li class="fruit-point">바나나</li>
  <li class="banana-sublist">
    <ul>
      <li>바나나 종류 1</li>
      <li>바나나 종류 2</li>
      <li>바나나 종류 3</li>
    </ul>
  </li>
  <li class="fruit-point">오렌지</li>
  <li class="fruit-point">배</li>
</ul>

 

.fruit-point 클래스에 대해 목록 스타일을 disc로 설정하고, 첫 번째 점인 사과에는 .no-dot 클래스를 추가하여 목록 스타일을 제거 하였으며, 이렇게 하면 첫 번째 사과 점은 점이 제거되고, 나머지 점은 표시될 것으로 생각합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.


목록

첫번째 점 만 게거 - 사과

 

점 - 바나나
    점 - 바나나 종류 1
    점 - 바나나 종류 2
    점 - 바나나 종류 3

 

점 - 오렌지

 

점 - 배 


위와 같이 만들려고 하는데
첫번째 사과 점 제거 됩니다.
그런데 두번째 바나나 점도 제거 됩니다.

 

첫 번째 사과 점 만 없애고 싶어요.

 

처음 부터 위와 같이 질문을 드렸어야 하는데 
죄송합니다.

감사합니다. 


 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

[code]
<style>
ul.test_dot {
list-style-type: disc;
}
ul.test_dot > li:first-child {
list-style-type: none;
}
</style>

<ul class="test_dot">
<li>첫번째 점 만 게거 - 사과</li>
<li>점 - 바나나
<ul>
<li>점 - 바나나 종류 1</li>
<li>점 - 바나나 종류 2</li>
<li>점 - 바나나 종류 3</li>
</ul>
</li>
<li>점 - 오렌지</li>
<li>점 - 배</li>
</ul>

[/code]

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고