이 글에서는 HTML <details> 요소를 스타일링하는 몇 가지 간단한 방법을 살펴볼 것입니다. 이 요소는 웹 페이지에서 콘텐츠의 일부를 보여주고 숨기는 데 매우 유용합니다.
자바스크립트 없이 간단한 공개 요소를 HTML에 가지고 있는 것은 편리합니다. 하지만 <details> 요소의 기본 스타일링은 어떤 사람에게는 마음에 들지 않을 수 있습니다. 다행히도 이 요소의 스타일링을 변경하는 것은 매우 쉽습니다.
아래의 목차는 <details> 요소를 사용한 예입니다. 우리는 간단한 테두리와 약간의 패딩을 추가했습니다.
Table of Contents
요약 요소 소개
다음은 <details> 요소의 기본 코드입니다:
<details>
<summary>Click me!</summary>
<p>Peekaboo! Here's some hidden content!</p>
</details>
기본적으로 어떤 HTML 콘텐츠도 <details> 요소 내부에 배치할 수 있습니다. <summary> 요소는 사용자가 요소를 클릭하여 추가 콘텐츠를 표시하도록 하는 프롬프트를 제공하며, <details> 요소의 첫 번째 자식이어야 합니다.
다음은 이 코드의 실시간 예시입니다:
Click me!
Peekaboo! 여기 숨겨진 콘텐츠가 있습니다!
이제 <details> 요소의 모양을 개선하기 위해 CSS를 사용할 수 있는 다양한 방법을 살펴보겠습니다.
배경색, 테두리 및 패딩
A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.
테두리 추가
위의 목차에서 보듯이, 간단한 테두리는 <details> 요소를 강조하고 정의하는 데 많은 도움이 되며, 일부 패딩과 약간의 테두리 반경이 있습니다:
details {
padding: 10px;
border: 5px solid #f7f7f7;
border-radius: 3px;
}
위에서 사용한 스타일링을 위한 간단한 코드입니다.
배경색 추가
이번에는 테두리 대신 <details> 요소에 배경색을 추가해 보겠습니다:
details {
padding: 10px;
background-color: #e4eaef;
border-radius: 5px;
}
결과는 아래 Pen에 표시되어 있습니다.
배경색은 요소의 정의를 더 잘 제공하며 패딩은 내부 공간을 만드는 데 도움이 됩니다.
<summary> 요소를 나머지 콘텐츠와 구별하기 위해 다른 배경색을 제공하고 텍스트 색상을 변경할 수도 있습니다.
summary {
background-color: #2196F3;
color: white;
padding: 10px;
}
참고로 <summary> 요소의 텍스트 색상을 변경하면 마커 화살표의 색상도 변경됩니다. 이는 마커가 목록 항목에 붙은 불똥과 마찬가지로 <summary> 요소에 실제로 부착되어 있기 때문입니다. 아래에서 이들을 별도로 스타일링하는 방법을 살펴보겠습니다.
마커 스타일링
<summary> 요소는 display가 list-item으로 설정되어 있습니다. 따라서 기본 화살표(▶)는 HTML 목록 항목의 기본 마커처럼 변경할 수 있습니다. 사용되는 문자를 변경하고 독립적으로 색상을 변경할 수 있습니다.
마커 색상 변경
기본 마커의 색상을 다른 색상으로 설정해 보겠습니다. 재미를 위해 마커의 글꼴 크기도 키워 보겠습니다. 이를 위해 ::marker 의사 요소를 사용할 수 있습니다:
summary::marker {
color: #e162bf;
font-size: 1.2em;
}
결과는 아래에 표시됩니다.
이는 멋지고 간단한 해결책이지만, 안타깝게도 ::marker는 사파리에서 지원되지 않습니다. 이것이 치명적인 문제라면 아래의 다른 옵션을 참조하십시오.
마커 간격 변경
기본적으로 마커 화살표는 요약 텍스트에 매우 가깝습니다. 그 경우 list-style-position이 inside로 설정되어 있습니다. outside로 변경하면 왼쪽 패딩을 추가함으로써 요약 텍스트와 마커 사이의 공간을 추가할 수 있습니다. 또한 삼각형이 컨테이너 밖으로 나가지 않도록 왼쪽 여백을 추가해야 합니다:
summary {
list-style-position: outside;
margin-left: 30px;
padding: 10px 10px 10px 20px;
border-radius: 5px;
}
결과는 아래에 표시됩니다.
I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.
마커 모양 변경
우리의 <summary> 요소에 있는 마커가 삼각형이어야 할 필요는 없습니다. 우리가 원하는 어떤 문자로든 그것을 교체할 수 있습니다:
summary {
list-style-type: '⬇ ';
}
위에서 시도한 간격의 대안으로 '⬇ ' (화살표 옆에 공백이 있음)을 사용했음에 유의하세요.
이제 삼각형 대신 아래쪽 화살표를 가지고 있습니다. 하지만… 그 아래쪽 화살표는 <details> 요소가 열려있을 때 변경되지 않습니다. 그것은 <details> 요소가 두 가지 상태, 즉 closed와 open를 가지고 있고 우리는 단지 closed 상태에 대한 마커 스타일만 설정했기 때문입니다. 그러므로 open 상태에 대한 마커도 설정해 보겠습니다:
details[open] > summary {
list-style-type: '⬆ ';
}
이번에는 위를 향하는 화살표를 사용했습니다. 아래에 표시된 결과를 얻게 되었습니다.
젠장! 다시 한 번 Safari는 list-style-type을 <summary> 요소에서도 지원하지 않아 우리를 실망시킵니다. 그러나 절망하지 마십시오. 아래에서 더 멋진 해결책을 살펴볼 것입니다.
우리는 +와 –, ✓와 Χ 또는 ✗, ⋁과 ⋀ 등 다양한 다른 문자를 시도할 수 있으며, ★와 같은 다른 문자나 🍏 🍌 🍓 🍋 🍐와 같은 색이 풍부한 과일을 사용하며 재미를 더할 수도 있지만, 이러한 문자들이 모든 시스템에서 작동하지 않을 수 있으므로 조심해야 하며, 다시 한 번 말하지만 list-style-type은 Safari에서는 확실히 작동하지 않습니다.
<summary> 요소에 대한 사용자 지정 마커 생성
위에서 보았듯이, 기본 마커에 다른 문자를 설정하고 색상이나 글꼴 크기와 같은 스타일을 부여할 수는 있지만, 이렇게 하는 것에는 문제가 있을 수 있습니다. 더 나은 방법은 마커를 제거하고 완전히 사용자 지정된 대체 방안을 만드는 것일 수 있습니다.
사용자 지정 마커 제거
목록 항목 마커와 마찬가지로 마커를 완전히 제거할 수 있습니다:
summary {
list-style: none;
}
/* 다시 한 번, Safari */
summary::-webkit-details-marker {
display: none;
}
표준 list-style: none은 모든 브라우저에서 작동하지만… (짐작하시겠습니까?) … Safari는 예외입니다. 적어도 이 경우에는 독점 -webkit- 옵션이 있습니다.
참고: <summary> 요소의 마커를 제거하는 또 다른 방법은 <summary> 요소에 display 값을 list-item이 아닌 다른 값으로 설정하는 것입니다. 예를 들어 block 또는 flex입니다. 이 방법은 모든 브라우저에서 작동하지만… (말할 필요도 없겠지만?) … Safari는 예외입니다.
이제 요소에는 마커가 없습니다.
마커가 없으면 이 요소가 클릭 가능한 것으로 시각적으로 알림이 전혀 없으므로, 그대로 두는 것은 좋은 생각이 아닙니다.
배경 이미지를 마커로 사용
다음과 같이 배경에 이미지를 배치할 수 있습니다:
summary {
list-style: none;
padding: 10px 10px 10px 40px;
background: url(arrow.svg) no-repeat 14px 50%;
background-size: 18px;
font-weight: bold;
}
결과는 아래에 표시됩니다.
백그라운드 이미지를 <summary> 요소에 직접 사용하는 것의 단점은 <details> 요소가 열릴 때 이미지를 회전시킬 수 없다는 것입니다. 이는 CSS에서 백그라운드 이미지에 직접 애니메이션을 설정할 수 없기 때문입니다. (물론 열린 상태에 대한 다른 이미지를 사용할 수는 있지만, 여전히 이를 애니메이션화할 수는 없으며, 이는 훨씬 더 재미있습니다.) 따라서 백그라운드 이미지를 사용하고자 한다면, 회전 및/또는 애니메이션이 가능한 요소에 배치하는 것이 좋습니다.
백그라운드 이미지를 ::after로 마커로 사용
::after 가상 요소 내부에 백그라운드 이미지를 넣어 보겠습니다.
summary {
display: flex;
}
summary::after {
content: '';
width: 18px;
height: 10px;
background: url('arrow.svg');
background-size: cover;
margin-left: .75em;
transition: 0.2s;
}
details[open] > summary::after {
transform: rotate(180deg);
}
이 코드의 실시간 데모입니다.
<summary> 요소에 display: flex를 사용하여 화살표를 수평으로 쉽게 배치했습니다.
이 구성의 좋은 점은 화살표에 애니메이션을 추가할 수 있다는 것입니다. (애니메이션이 Safari에서는 작동하지 않는 것 같지만, 동작은 충분히 좋으며, 이 브라우저에 조금 지쳤습니다!)
요약 요소를 탭처럼 보이게 만들기
<summary> 요소를 완전한 너비로 설정해 왔지만, 꼭 그럴 필요는 없습니다. 이 간단한 변경으로 탭처럼 보이게 만들 수 있습니다.
summary {
display: inline-flex;
}
아래에 예시가 나와 있습니다.
<details> 요소의 너비를 제한하는 방법에 대해서도 다루고 있습니다.
지금까지 살펴본 모든 예시에서 <details> 요소는 블록 레벨 요소로서 그 컨테이너의 전체 너비에 맞춰져 있었습니다. 하지만 너비를 다르게 설정하고 싶다면, 예를 들어 width: 50%;와 같이 할 수 있습니다. 또는 인라인 표시로 설정하여 그 내용과 같은 너비로 만들 수도 있습니다:
details {
display: inline-block;
}
아래 탭을 클릭하여 <details> 요소의 좁은 너비를 확인하세요.
위의 Pen에서 display: inline-block을 width: 50%로 변경해보세요.
요약의 끝 부분에 마커 화살표 배치
이제 조금 다른 작업을 해보겠습니다. <summary> 요소의 오른쪽에 마커 화살표를 배치해보겠습니다. display: flex를 사용하고 있기 때문에, 화살표를 가장 오른쪽으로 이동시키려면 <summary> 요소에 justify-content: space-between를 추가하면 됩니다:
summary {
display: flex;
justify-content: space-between;
}
배경 이미지 없이 ::after를 마커로 사용
::after를 실제 이미지 없이 사용하는 다른 방법도 있습니다. 다음은 테두리만으로 ::after를 사용한 예시입니다:
summary::after {
content: '';
width: 0;
height: 0;
border-top: 10px solid #15171b;
border-inline: 7px solid transparent;
transition: 0.2s;
}
실시간 데모를 확인하세요.
이제 닫힌 상태와 열린 상태 사이에서 회전하는 화살표가 있습니다. <details> 요소에도 멋진 드롭 쉐도우를 추가했습니다.
이미지 없이 ::after를 사용하는 또 다른 방법은 content 속성 안에 유니코드 문자를 넣는 것입니다:
summary::after {
content: "\25BC";
transition: 0.2s;
}
이 코드는 삼각형 모양 (▼)을 마커로 설정하는 것을 보여주고 있습니다. 이 코드펜 데모.
수천 가지의 유니코드 기호가 있으며, 탐색하는 것은 매우 재미있습니다. 각 기호는 U + 25BC 또는 U + 025BC와 같은 코드를 가지고 있습니다. 이 코드를 content 속성 내에서 사용하려면 + 뒤의 문자들을 content 따옴표 안에 넣고, 앞에 \를 붙입니다: content: "\25BC". 처음에 하나 이상의 0이 있는 경우 이를 생략할 수 있습니다. (예를 들어, U + 02248는 "\02248" 또는 "\2248"이 될 수 있습니다.)
미호의 추가 기능
지금까지 우리가 다룬 내용은 이미 충분하지만, 더 재미있는 것들이 있으므로 여기서 몇 가지를 살펴보겠습니다.
<details> 요소에 대한 호버 효과
다양한 호버 효과를 <details> 요소에 설정할 수 있습니다. 예를 들어 다음과 같은 작업을 수행할 수 있습니다:
details {
transition: 0.2s background linear;
}
details:hover {
background: #dad3b1;
}
그 과정에서 <summary> 텍스트 색상을 open 상태에서 전환하겠습니다:
details > summary {
transition: color 1s;
}
details[open] > summary {
color: #d9103e;
}
결과는 아래에 표시됩니다.
<summary> 요소에 대해 배경 색상만 변경할 수도 있습니다.
<details> 요소의 열림과 닫힘을 애니메이션으로 표현할 수도 있습니다.
하하, 당했다! <details> 요소의 열고 닫힘을 애니메이트하는 것은 불가능해 보인다. MDN에 따르면:
안타깝게도 현재로서는 열림과 닫힘 사이의 전환을 애니메이트하는 내장된 방법이 없습니다.
그러나 내용을 애니메이트하면 재미있을 수 있습니다. <details> 요소의. 예를 들어, 내용이 드러날 때 서서히 나타나도록 설정할 수 있습니다:
details article {
opacity: 0;
}
details[open] article {
animation: fadeIn .75s linear forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
결과는 아래에 표시됩니다.
또 다른 방법은 콘텐츠를 이동하여 들어오는 것일 수 있습니다. 다음과 같이:
details {
overflow: hidden;
}
details[open] article {
animation: animateUp .5s linear forwards;
}
@keyframes animateUp {
0% {
opacity: 0;
transform: translatey(100%);
}
100% {
opacity: 1;
transform: translatey(0);
}
}
결과는 아래에 표시됩니다.
조금 치즈같고 과도할 수도 있지만 어쨌든 시도해볼 가치가 있습니다. 안타깝게도 이러한 애니메이션은 요소가 처음 클릭될 때만 작동합니다(브라우저 개발자 도구가 열려 있으면 이유가 무엇인지 이상하게도!). 효과를 반복적으로 작동하게 하려면 JavaScript의 개입이 필요합니다.
열린 상태와 닫힌 상태에서 요약 내용 변경
위의 데모에서 <select>는 항상 같은 텍스트를 가지고 있었습니다. <details> 요소가 열려 있든 닫혀 있든. 그러나 그것을 변경할 수 있습니다. 먼저 “Click me” 텍스트를 현재 위치에 두고 ::after 가상 요소를 사용하여 각 상태에 대한 추가 텍스트를 추가하겠습니다:
summary::after {
content: " to show hidden content";
}
details[open] summary::after {
content: " to hide extra content";
}
그것은 우리에게 아래에 표시된 결과를 제공합니다.
요약 커서 변경
기본 커서(<details> 요소의 마우스 포인터)는 다소 이상합니다. 대부분 표준 화살표이며, <summary> 텍스트 위에 마우스를 올리면 텍스트 포인터(또는 I-빔)가 됩니다.
재미삼아 핸드 커서(또는 “포인터”)로 변경해 보겠습니다.
summary {
cursor: pointer;
}
이렇게 하면 아래와 같이 <summary> 요소 어디에서든 마우스를 올릴 때 손 모양의 마우스 포인터가 나타납니다.
대신 <details> 요소에 커서를 설정할 수도 있으며, 이렇게 하면 <details> 요소 전체에 손 모양 커서가 적용됩니다. 하지만 클릭해야 할 부분에만 커서를 유지하는 것이 좋습니다.
접근성 포커스 스타일 변경
키보드로 페이지를 탐색할 때 <details> 요소로 탭을 할 수 있고, 이후 리턴 키를 눌러 열 수 있습니다. 포커스 상태에서 <summary> 요소에는 기본 아웃라인이 있습니다. 아래 이미지는 이러한 모습을 여러 브라우저에서 보여줍니다.
대체로 비슷한 모양으로, 대부분 간단하고 어두운(파란색 또는 검은색) 단색 아웃라인으로 약 3px 두께입니다.
<details> 요소에 대한 포커스 스타일을 여러 가지 설정할 수 있지만, 여기서는 간단한 개념 증명을 위해 아웃라인을 빨간색 점선으로 변경해 보겠습니다.
summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}
기본적으로 포커스 외곽선은 <summary> 요소를 클릭할 때 표시되지 않습니다. 하지만 포커스 스타일을 변경하면 해당 스타일이 비키보드 사용자에게도 표시됩니다(즉, 마우스로 <details> 요소를 클릭할 때입니다). 따라서 위의 코드에서 outline을 none으로 설정하고 focus-visible를 사용하여 스타일을 설정했으며, 이는 포커스 스타일이 실제로 유용한 키보드 사용자에게만 보이게 된다는 의미입니다.
아래 이미지는 새로운 스타일을 보여줍니다.
여기 라이브 데모가 있습니다.
<details> 요소에 포커스가 있을 때 애니메이션, 배경색 등을 사용하여 많은 재미를 볼 수 있습니다. 이를 더 실험해 보도록 맡기겠습니다.
아코디언 목록처럼 여러 개의 세부 요소 사용
여러 개의 세부 요소를 조정하여 하나가 열릴 때 다른 하나가 닫히도록 하는 방법에 대한 제안이 있습니다. HTML 사양은 심지어 여러 개의 <details> 요소 간에 이러한 목적을 위한 공유 name 속성을 제안합니다.
HTML과 CSS만으로는 현재 이를 수행할 방법이 없지만, JavaScript를 사용하여 이를 수행하는 몇 가지 멋진 예시들이 있습니다(예: 여기, 여기, 여기).
CSS로 할 수 있는 최선은 위에서 다룬 기술을 사용하여 현재 열려 있는 요소를 다른 요소들과 다르게 스타일링하는 것입니다.
간단한 예시는 다음과 같습니다:
details {
background-color: #2196F3;
}
details[open] {
background-color: #ce0e99;
}
요약 내부의 제목 스타일링
HTML 구조에 대해 걱정하는 일부 개발자들은 <summary> 요소 내부에 제목 요소를 배치하는 것을 좋아합니다. 이것이 유용한지 아닌지는 논쟁의 여지가 있지만, 기본 렌더링은 화살표 아래에 제목이 위치하는 것으로 보기 좋지 않습니다. 이것은 제목을 display: inline 또는 display: inline-block으로 설정함으로써 수정할 수 있습니다:
summary h2 {
display: inline;
}
이 데모를 CodePen에서 확인할 수 있습니다.
결론
위에서 보여드린 것처럼, <details> 요소를 스타일링하는 많은 간단한 방법들이 있습니다. 테두리, 패딩 및 배경 색상을 설정하는 것은 쉽고, 이들 자체로도 모양이 크게 개선됩니다. 기본 마커를 스타일링하는 방법 중 일부는 매우 편리하지만, 포레스트의 과일 회사 ()는 마커 스타일링에 많은 문제가 있으므로 완전히 사용자 정의 마커 요소를 만드는 쪽으로 택하는 것이 더 좋을 수 있습니다. (그렇다고 해서, 마커 스타일링이 사파리에서 <details> 요소를 깨지게 하지는 않습니다.)
<details> 요소의 열기와 닫기를 단순히 CSS로 애니메이션화하려는 시도들이 있었지만, 최선의 경우에도 그저 흉내낸 수준이므로 그 갈피를 잡으려고 시도하는 것은 가치가 없습니다. 정말로 애니메이션화된 열기와 닫기를 원한다면 자바스크립트가 필요합니다.
<details> 요소에 대해 자세히 알고 싶으시다면 다음을 확인하세요:
<details> 요소를 스타일링하는 다른 멋진 방법을 찾으신다면 트위터에 알려주세요. 그리고 여기에 소개할 수도 있습니다.
Source:
https://www.sitepoint.com/style-html-details-element/