<details> & <summary> 태그 스타일 꾸미기

HTML <details> 태그를 <summary> 태그와 함께 CSS로 꾸미는 방법에 대해 알아봅니다.
순수 CSS로만 꾸미는 방법과 jQuery를 포함한 자바스크립트를 같이 사용해서 애니메이션 효과 주기 등도 살펴봅니다.

다음의 목차로 예제와 함께 살펴보겠습니다.

  1. details 화살표(marker) 스타일 꾸미기
  2. details 어코디언(accordion) 만들기

사전에 필요로 하는 지식

HTML <details>와 <summary> 태그의 올바른 이해와 사용 방법에 대해 알고 있어야 합니다.

HTML <details> 태그
HTML <summary> 태그

<details> 태그를 브라우저에서 실제 표시된 모습을 보면 화살표 모양의 marker가 보입니다.
흔히 이 marker를 '아이콘'이라고도 부릅니다.

이 화살표 모양의 marker는 <details> 태그의 marker가 아니라, <summary> 태그의 marker입니다.

::marker 가상 요소 선택자 - 마커의 의미

다음의 코드 예제를 살펴보겠습니다.

HTML 
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
브라우저에서 실제 표시된 모습 '요약 내용'이라는 텍스트를 클릭하여 세부 정보를 보거나 숨길 수 있습니다.

위 예제에서 화살표 모양의 marker는 CSS로 사용자 정의 스타일로 변경하거나 제거할 수 있습니다.

하지만, <summary> 태그가 표준화되면서 아직 실험적인 구현으로 인해 브라우저별로 이 사용자 정의 스타일을 지원하는 방식의 차이가 있으므로 한동안 여러 접근 방식을 사용해야 합니다.

details 화살표(marker) 제거하기

details 화살표(marker)를 브라우저 화면에서 제거하기 위해서는

  • Safari 브라우저와
  • 그 외의 브라우저로 나누어

사용자 정의 스타일을 지정해야 합니다.

다음은 details 화살표(marker)를 제거하기 위한 사용자 정의 스타일 예제 코드입니다.

HTML 
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
CSS 
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */
}

/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */
브라우저에서 실제 표시된 모습
  • Safari 브라우저에서 details 화살표(marker) 제거하기 위해서는 비표준 CSS 가상 요소인 ::-webkit-details-marker를 통해 사용자 정의 스타일을 제거 할 수 있습니다.
  • 그 외 브라우저에서는 <summary> 태그의 display 속성의 값이 list-item입니다. 이는 HTML 기본 사양에 따라 요소의 기본 마커가 ::marker 가장 요소 선택자로 스타일이 지원되는데, 이 마커를 제거하기 위해서는 <summary> 태그에 list-style-type: none;으로 마커를 제거하거나(::marker 가장 요소 선택자는 display 속성의 값이 list-item일 경우에만 생성이 됩니다. display 속성의 값이 바뀌면 제거됩니다.) 이 속성의 단축 표현(shorthand property)인 list-style: none;으로 제거하면 됩니다. 물론, <summary> 태그의 display 속성의 값을 변경해서 기본으로 지원하는 마커를 제거할 수도 있습니다.

다음은 <summary> 태그의 display 속성의 값을 변경해서 기본으로 지원하는 마커를 제거하는 예제입니다.

CSS 
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    display: block; /* 그 외의 브라우저용 사용자 정의 스타일 */
}

/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */
브라우저에서 실제 표시된 모습

위 예제에서는 <summary> 태그의 display 값을 block으로 변경해서 기본으로 지원하는 마커를 제거한 것이지만, list-item 값이 아닌 다른 값으로 변경하면 동일한 효과를 나타낼 수 있습니다. 예를 들어, display: flex;, display: inline-block 등이 이에 해당합니다. 이는 개발자가 판단해서 가장 효율적인 값을 사용하면 됩니다.

다음은 <summary> 태그와 <summary> 태그의 display 속성의 값이 list-item에 대한 브라우저 호환성입니다.

마지막 업데이트 정보: 2024-06-13

summary 태그의 display list-item 브라우저 호환성
태그와 속성 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<summary> 12 79 49 6
display: list-item 89 89 49 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

details 화살표(marker) 커스텀으로 꾸미기

details 화살표(marker)를 커스텀으로 꾸미기 위해서는 먼저 details 화살표(marker)를 브라우저 화면에서 제거한 후, ::before나 ::after 가상 요소로 화살표(marker)를 만들어 꾸며줍니다.

HTML 
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
CSS 
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
    display: block; /* 그 외의 브라우저용 사용자 정의 스타일 */
}
/* 브라우저 호환을 위해서는 위 두 사용자 정의 스타일을 모두 지정해야 함 */

/* 여기서부터는 details 화살표(marker) 커스텀으로 꾸미기  */
summary {
    position: relative;
    padding-left: 1.2em;
    cursor: pointer;
}
summary::before {
    content: "";
    position: absolute;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 0.75em solid yellowgreen;
    top: 0.2em;
    left: 0;
    transition: .25s transform;
}
details[open] summary:before {
    transform: rotateZ(90deg);
}
브라우저에서 실제 표시된 모습 '요약 내용'이라는 텍스트를 클릭해 보세요.

HTML <details> 태그를 <summary> 태그와 함께 어코디언(accordion) 꾸미기에 대한 예제들을 살펴보겠습니다.

  • 순수 CSS로만 어코디언 꾸미기
  • CSS와 jQuery로 애니메이션 어코디언 꾸미기

순수 CSS로만 어코디언 꾸미기

HTML 
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details>
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된
        월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
CSS 
details {
    padding: 0 2rem;
    background-color: #f1f9eb;
    border: 1px solid yellowgreen;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
details:last-child {
    margin-bottom: 0;
}
summary::-webkit-details-marker {
    display: none;
}
summary {
    display: block;
    padding: 2rem 3rem 2rem 0;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}
summary::before,
summary::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 2px;
    background-color: #222;
    right: 1rem;
    top: 2.5rem;
}
summary::after {
    transform: rotateZ(90deg);
}
details p {
    padding-bottom: 2rem;
}
details[open] summary::after {
    display: none;
}
브라우저에서 실제 표시된 모습

CSS와 jQuery로 애니메이션 어코디언 꾸미기

일러두기
아래의 예제 코드는 단순 샘플 코드입니다. 웹 접근성에 있어서 완벽하지 않습니다. 단순히 스타일 꾸미기와 작동을 이해하는 예제로만 활용하세요!

HTML 
<style>
    .demo-details-juqery-accordion {
        padding: 0 2rem;
        background-color: #f1f9eb;
        border: 1px solid yellowgreen;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    .demo-details-juqery-accordion:last-child {
        margin-bottom: 0;
    }
    .demo-details-juqery-accordion summary::-webkit-details-marker {
        display: none;
    }
    .demo-details-juqery-accordion summary {
        display: block;
        padding: 2rem 3rem 2rem 0;
        font-weight: 600;
        cursor: pointer;
        position: relative;
    }
    .demo-details-juqery-accordion summary::before,
    .demo-details-juqery-accordion summary::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 2px;
        background-color: #222;
        right: 1rem;
        top: 2.5rem;
    }
    .demo-details-juqery-accordion summary::after {
        transform: rotateZ(90deg);
    }
    .demo-details-juqery-accordion p {
        padding-bottom: 2rem;
        display: none;
    }
    .demo-details-juqery-accordion[open] summary::after {
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<details class="demo-details-juqery-accordion">
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<details class="demo-details-juqery-accordion">
    <summary>짧은 내용의 공지사항 제목입니다.</summary>
    <p>
        "팀 버너스리"에 의해 1989년 고안된 월드 와이드 웹(World Wide Web, WWW, W3)의
        하이퍼텍스트 시스템을 우리는 간단히 "웹"이라 부릅니다.
        현재 우리의 일상에서 대중화된 것 이상으로 절대적 위치를 차지하고 있습니다.
    </p>
</details>
<script>
    const $_details = $(".demo-details-juqery-accordion");
    const $_summary = $_details.find("summary");

    $_summary.on("click", function(e) {
        e.preventDefault();

        const $_this = $(this);
        const $_this_details = $_this.parent("details");
        const $_this_details_p = $_this_details.find("p");
        const $_this_details_open = $_this_details.attr("open");

        if (! $_this_details_open) {
            $_this_details.prop("open", true);
            $_this_details_p.stop().slideDown(600);
        } else {
            $_this_details_p.stop().slideUp(300, function() {
                $_this_details.prop("open", false);
            });
        }
    });
</script>
브라우저에서 실제 표시된 모습

참고문헌

같이 보기