ul, ol 태그에서 커스텀 마커 사용하는 방법

 

안녕하세요. 루루개발자 입니다.

금일 회사에서 곧 오픈할 서비스의 약관에 대한 내용을 기획자분께 전달받아 해당 내용대로 HTML 마크업 작업을 진행 하던 도중 겪은 일에 대해 공유드리고자 합니다.

 

먼저, 다음과 같이 코드를 작성했다고 합시다.

<ol>
  <li>
    첫번째 아이템입니다.
  </li>
  <li>
    두번째 아이템입니다.
  </li>
</ol>
<ol style="list-style-type: none;">
  <li>
    가. 첫번째 아이템입니다.
  </li>
  <li>
    나. 두번째 아이템입니다.
  </li>
</ol>

첫번째 ol 태그는 목록 앞의 마커를 기본 값으로 사용하였고, 두번째 ol 태그에서는 가, 나, 다.. 로 시작하는 옵션을 css 에서 제공해주지 않기 때문에 list-style-type을 none 으로 줘서 목록 앞에 표시되는 기본 마커를 없앤 뒤 수기로 내용 앞에 "가", "나" 등의 글자를 적어주었습니다.

 

하지만 보시는대로 기본 마커는 컨텐츠가 차지하고 있는 영역의 바깥 부분에 보여지는 반면, 마커를 없애고 앞에 마커를 대신할 글자를 적은 경우는 컨텐츠가 차지하고 있는 영역 안에 보여지게 되어, 결과적으로 두 개의 ol 태그의 여백이 달리 보이게 됩니다. 결국 기본 마커 자리에 커스텀 마커가 표시되게 해야 여백이 동일하게 보여지게 가능합니다.

 

그렇다면, 앞에 표시되는 리스트의 기본 마커 자리에 가, 나, 다... 또는 ①, ②, ③ ... 과 같은 커스텀 마커를 사용하고 싶다면 어떻게 해야 할까요? css 에서 옵션을 제공해주지 않으니 불가능할까요?

 

그렇진 않습니다. 핵심은 marker 선택자에 있습니다. 기본 마커가 표시되는 자리를 요소 선택기로 선택해보면 다음과 같이 표시됩니다.

보시다시피 ::marker 라는 css 선택자로 지정되어 있는 것을 확인 할 수 있습니다. 그렇다면 저희가 저 marker 선택자를 css 에서 정의해주면 커스텀 리스트 마커를 사용할 수 있지 않을까요?

 

그렇게 생각하고 다음과 같이 css 를 작성해보겠습니다.

ol[data-list-style-type='ko'] > li:nth-child(1)::marker { content: '가. '; }
ol[data-list-style-type='ko'] > li:nth-child(2)::marker { content: '나. '; }
ol[data-list-style-type='ko'] > li:nth-child(3)::marker { content: '다. '; }
ol[data-list-style-type='ko'] > li:nth-child(4)::marker { content: '라. '; }
ol[data-list-style-type='ko'] > li:nth-child(5)::marker { content: '마. '; }
ol[data-list-style-type='ko'] > li:nth-child(6)::marker { content: '바. '; }
ol[data-list-style-type='ko'] > li:nth-child(7)::marker { content: '사. '; }
ol[data-list-style-type='ko'] > li:nth-child(8)::marker { content: '아. '; }
ol[data-list-style-type='ko'] > li:nth-child(9)::marker { content: '자. '; }
ol[data-list-style-type='ko'] > li:nth-child(10)::marker { content: '차. '; }
ol[data-list-style-type='ko'] > li:nth-child(11)::marker { content: '카. '; }
ol[data-list-style-type='ko'] > li:nth-child(12)::marker { content: '타. '; }
ol[data-list-style-type='ko'] > li:nth-child(13)::marker { content: '파. '; }
ol[data-list-style-type='ko'] > li:nth-child(14)::marker { content: '하. '; }

그리고 위 css 파일을 link 태그로 불러온 html 파일의 body 내용을 다음과 같이 작성해봅니다.

<ol>
  <li>
    첫번째 아이템입니다.
  </li>
  <li>
    두번째 아이템입니다.
  </li>
</ol>
<ol data-list-style-type="ko">
  <li>
    첫번째 아이템입니다.
  </li>
  <li>
    두번째 아이템입니다.
  </li>
</ol>

결과는 다음과 같습니다.

네, 이제는 기본 마커가 표시되는 자리에 가나다... 마커가 표시되는 것을 확인해볼 수 있습니다.

 

작성한 css 내용에 대해 설명을 하자면, 먼저 가나다 마커를 적용할 ol 태그를 지정해주어야 하는데 그 조건을 data-list-style-type 속성 값이 "ko" 인 ol 선택자로 지정해주었습니다. 그리고 하위 첫번째 li 태그의 marker 에 "가 ."를 표시해주는 css 를 작성하고, 하위 두번째 li 태그의 marker 에 "나 ."를 표시해주는 css 를 작성하고.. 그 다음 세번째 li 태그의 marker 에는 "다. ", 네번째 li 태그의 marker 에는 "라. " .... 와 같이 css 상에서 몇번째 li 태그이냐에 따라 표시될 마커를 지정해주었습니다.

 

이렇게 하면 나중에 li 태그의 순서가 바뀌더라도 가나다 순이 자동으로 적용됩니다. 이것은 기본 마커도 마찬가지입니다.

위 방식을 사용하면 ①, ②, ③ ... 이나 ⒜, ⒝, ⒞ ... 등과 같은 또 다른 커스텀 마커를 사용할 수 있습니다.

 

 

금일 약관에 대한 HTML 마크업 작업을 할 때 이러한 커스텀 마커가 필요했고, 잠시 고민한 끝에 이렇게 정리를 하여 마크업 작업을 마무리 할 수 있었습니다.

 

이상입니다.

감사합니다.