[css] 리스트 마커 변경하기 (::marker) - IE와 Safari 이슈

예리에르·2021년 12월 16일

CSS Marker

CSS

목록 보기

3/7

적용계기

서비스의 개인정보처리규정에 대한 내용을 나타내는 페이지개발을 진행하던 중. 유니코드를 사용해 동그라미숫자(①②③④)를 나타내야했다.
::marker를 사용해 변경을 시도했지만 ::makrer는 크롬에서 잘 작동하지만 IE와 Safari를 지원하지 않는다는 문제점이 있었다. ::marker MDN Docs

::marker

글 머리 기호 또는 번호가 포함된 목록 항목의 마커상자를 선택한다. 기본을 사용되는 <li></li>의 불릿이 예시중 하나이다.

적용예시

@counter-style circled-numbers {
    system: fixed;
    symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469";
}

...

ul.list-style-circle-number-list {
                    list-style: none;
                    counter-reset: circle-counter;

                    > li.circle-number-item {
                        counter-increment: circle-counter;

                        &::marker {
                            content: counter(circle-counter, circled-numbers) " ";
                        }
                    }
                }

처음에는 크롬에서는 적용이 원할하게 되어 완성된줄 알고 배포를 했었다. 브라우저를 확인하던 중IE와 Safari에서 적용되지 않는 모습을 발견하였다.
+) 추가로 @counter-style 역시 두개의 브라우저를 지원하지 않았고 기본적인 문법을 활용한 코드로 변경해야했다.

Each-List 반복 (@each)

결국 돌아가 가장기본적인 scss 문법을 적용하고자 하였고, 리스트에 필요한 문자의 유니코드들을 넣었다. 이후 @each를 통해 리스트를 돌았고 index를 활용하여 자식들에게 접근하는 방법을 적용하였다.

적용예시

$obj: "\2460", "\2461", "\2462", "\2463", "\2464", "\2465", "\2466", "\2467", "\2468", "\2469";

...

ul.list-style-circle-number-list {
                    list-style: none;

                    @each $ele in $obj {
                        $index: index($obj, $ele);

                        > li.circle-number-item:nth-child(#{$index}) {
                            position: relative;
                            display: block;
                            padding-left: 1rem;

                            &:before {
                                position: absolute;
                                left: 0;
                                content: "#{$ele}";

                            }
                        }
                    }
                }