[CSS] List marker 스타일 바꾸기

::marker로 Marker 스타일링하기

 

리스트는 <ol>과 <ul>로 나뉜다.

기본적으로 <ol>은 1. 2. 3. ...으로 글머리가 생기고

<ul>은 작은 점으로 글머리가 생긴다.

하지만 이 스타일이 마음에 들지 않는다면...?

그럴 때 사용하는 css의 ::marker 기능!

::marker {
  /* ... */
}

 

원하는 리스트의 마커 요소에 스타일링을 추가할 수 있다.

아래와 같이 사용하면 된다.

li::marker {
  color: red;
  font-size: 1.5em;
}

 

여기에 사용할 수 있는 프로퍼티는 다음과 같다.

1. font properties

모든 폰트 프로퍼티를 사용할 수 있다.

font, font-size, font-family 등등...

font-size를 다르게 한다면?

약간 어색하지만 이런 결과도 가능하다.

마커만 커진 모습을 볼 수 있다.

 

2. white-space

여백을 조절할 수 있는 기능이다.

 

기본은 왼쪽이지만, white-space: pre-wrap; 코드를 추가하면 오른쪽처럼 변한다.

 

3.  color

마커의 색을 다르게 할 수 있다.

4. text-combine-upright, unicode-bidi, direction

잘 안 쓸 것 같지만... 글자의 방향을 조절하는 프로퍼티들

5. content

마커의 모양을 바꿀 수 있다.

아래처럼 활용 가능하다.

 

6. animation and transition

그밖에 다른 애니메이션이나 트랜지션 기능을 이용할 수 있다.

 

평범한 마커에서 벗어나 새로운 시도를 해보고 싶다면 꼭 기억하기!