Last updated: 2021-07-23

UL/Lists 에 Custom Bulllets를 세팅하는 방법

먼저 아래와 같은 HTML 코드가 있다고 가정하면, 먼저, 기존 불릿을 […]
Written by: doogak

먼저 아래와 같은 HTML 코드가 있다고 가정하면,

<div id=newlist><ul>
<li>첫번째 리스트입니다.</li>
<li>두번째 리스트입니다.</li>
<li class=othercheck>클래스를 다르게 지정한 리스트입니다.</li>
</ul></div>

먼저, 기존 불릿을 감추고 :before를 사용해서 새로운 불릿을 만들어 보겠습니다.

#newlist ul {
  list-style: none;
}
//* standard Unicode method *//

#newlist ul li:before {
content: "\2713";
color:#3740ff;
padding-right:5px;
}

//* if you use FA5 *//
#newlist ul li:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f14a";
color:#3740ff;
padding-right:5px;
}

#newlist .othercheck:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f4da";
color:#3740ff;
padding-right:5px;
}
무엇이든 물어보세요

Contact Form

빠른 시간안에 답변드리겠습니다.
입금계좌
IBK기업은행 073-096192-04-010
Copyright © 2022. Doogak Co., Ltd. All Right Reserved.
envelopepower-switchmagnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram