본문 바로가기

list-style 커스텀

[CSS] list-style 바꾸기 - list-style? 웹 퍼블리싱을 하다 보면 리스트 부분을 작성할 때 ul, ol, dl과 같은 엘리먼트를 사용하게 됩니다. 이때 각각의 태그들이 기본적으로 보여주는 list-style을 보면 다음과 같습니다. 하지만 기본 list-style들은 원형의 도트 스타일만 지원해 주고 색상 또한 li의 색상을 이어받아 사용하기 때문에 커스텀이 필요한 상황이 많이 발생합니다. - 가상요소를 통한 스타일 제가 가장 자주 쓰던 방법이면서 list-style을 다양한 크기와 모양으로 만들 수 있는 방법입니다. 먼저 변경이 필요한 해당 list-style을 none으로 지정해준 후 li 엘리먼트의 position 속성을 relative로 변경합니다. 그 후 해당 엘리먼트에 가상요소인 ::before 나 ::aft.. 더보기

티스토리툴바