details 요소 소개
<details> 요소는 HTML5에서 도입된 요소로, 사용자에게 접힘 및 펼침 동작을 제공하여 상세 정보를 표시하고 숨길 수 있는 기능을 제공합니다.
보통 한 개의 <summary> 요소와 한 개 이상의 내용 요소를 포함합니다. <summary> 요소는 <details> 요소의 토글(접힘/펼침) 동작을 제어하는 요소로 사용됩니다. 사용자가 <summary> 요소를 클릭하면 내용이 펼쳐지거나 접히게 됩니다.
기본적으로 <details> 요소는 접힌 상태로 시작합니다. 이는 요소의 내용이 초기에는 숨겨져 있음을 의미합니다. 사용자가 <summary> 요소를 클릭하면 내용이 펼쳐지며, 다시 클릭하면 접히게 됩니다.
<details> 요소에는 다양한 스타일링 옵션을 적용할 수 있으며, 특히 CSS를 사용하여 접힌 상태와 펼쳐진 상태의 스타일을 지정할 수 있습니다. 브라우저는 일반적으로 내용이 접혀 있는지 아니면 펼쳐져 있는지를 시각적으로 구별하는 디자인을 제공합니다.
<details> 요소는 웹 접근성을 개선하는 데에도 사용될 수 있습니다. 스크린 리더 등의 보조 기술을 사용하는 사용자도 접힘 및 펼침 동작을 통해 정보를 쉽게 이해하고 접근할 수 있습니다.
<details>
<summary>더보기</summary>
<p>여기서 부터 추가 정보를 표시할 수 있는 내용입니다.</p>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>
</details>더 보기
여기서 부터 추가 정보를 표시할 수 있는 내용입니다.
- 항목 1
- 항목 2
- 항목 3
웹표준 코딩에서 권고하는 details의 용도
<details> 태그는 웹 표준을 준수하고 웹 접근성을 개선하기 위해 사용하는 것이 좋습니다. 주로 다음과 같은 상황에서 <details> 태그를 사용할 수 있습니다:
- 상세 정보를 접을 수 있는 토글 기능이 필요한 경우:
<details>태그는 사용자가 클릭하면 상세 정보를 펼칠 수 있는 토글 기능을 제공합니다. 따라서 화면 공간을 절약하고 사용자가 필요한 정보를 선택적으로 표시할 수 있는 경우에 유용합니다.
시각장애인 분들이 가장 필요로 하는 기능으로 모든 내용이 소스상으로 펼쳐저 있는 것이 사용성을 떨어뜨리는 가장 큰 문제로 지적하고 있죠. - 접힌 내용과 펼쳐진 내용의 시각적인 구분이 필요한 경우:
<details>태그는 브라우저에서 제공하는 기본적인 스타일링을 통해 내용의 접힘과 펼침 상태를 시각적으로 구분할 수 있습니다.
이를 통해 사용자가 어떤 정보가 숨겨져 있는지 쉽게 파악할 수 있습니다.
내용이 펼쳐지는 형식이 아니더라도 스타일링 구분이 필요한 경우에도 유용하게 사용할 수 있습니다. - 웹 접근성을 개선해야 하는 경우:
<details>태그는 접근성을 고려한 웹 디자인을 위한 좋은 도구입니다. 펼침과 접힘 동작은 스크린 리더 및 보조 기술 사용자에게도 정보를 쉽게 이해하고 접근할 수 있는 기회를 제공합니다. - 토글 요소를 사용하여 사용자 경험을 개선하고자 할 때:
<details>태그를 활용하면 사용자들이 펼침 및 접힘 동작을 통해 웹 페이지 내의 정보를 더욱 쉽게 탐색할 수 있습니다. 사용자가 필요한 정보에 집중하고, 관련 정보를 숨기거나 펼치는 방식으로 사용자 경험을 개선할 수 있습니다.
위의 상황들은 <details> 태그를 사용하는 좋은 예시입니다. 하지만 사용 시에는 웹 페이지의 전반적인 디자인과 요구 사항에 맞게 적절히 활용해야 합니다.
details 요소가 일반 요소와 다른 점
html과 css 상에서의 특이성을 설명할 수 있는데요. CSS 특이성은 다음 목차인 주의사항에서 다루고 먼저, <details> 태그의 주요 특징을 설명드리겠습니다.
- 토글 기능:
<details>태그는 클릭하면 세부 정보가 펼쳐지거나 접히는 토글 기능을 제공합니다.
기본적으로 세부 정보는 접혀 있으며, 사용자가 클릭하면 펼쳐지고 다시 클릭하면 접힙니다.
이런 상호작용은 details 태그만의 특수성이라고 볼수 있습니다. - 요약 제목:
table의 caption, fieldset의 legend처럼 details에도 내용을 요약하는 표시 하는 태그가 존재합니다.
<summary>태그를 사용하여 제목을 지정하고, 클릭하면 세부 정보가 펼쳐지거나 접힙니다. - 세부 정보의 표현 방식:
<details>태그를 사용하여 세부 정보를 마크업할 때, 내부에 다른 HTML 요소들을 포함할 수 있습니다.
더불어 details 안에 details를 넣어 중첩사용이 가능하여 다단 메뉴를 구성할수도 있습니다.
이런 일반 적인 특징외에 실제 작업에서 어려움을 겪게될수도 있는 CSS 특이성이 있습니다.
details 요소의 디자인시 주의사항
기본 스타일: <details> 태그는 브라우저마다 기본적으로 다른 스타일을 가지고 있을 수 있습니다.
기본적으로 세부 정보는 접혀 있으며, 브라우저마다 아이콘 또는 텍스트 링크 등으로 표시됩니다.
따라서 CSS를 사용하여 <details> 태그를 스타일링할 때는 브라우저 간의 일관성을 유지하기 위해 몇 가지 스타일 변경이 필요할 수 있습니다.
펼침 및 접힘 상태 스타일: <details> 태그는 사용자가 펼치거나 접을 수 있는 토글 기능을 제공합니다. 펼쳐진 상태와 접힌 상태의 스타일을 제어하기 위해 open 속성을 사용하거나, JavaScript를 사용하여 동적으로 상태를 조작할 수 있습니다.
<style>
/* 접힌 상태의 스타일 */
details:not([open]) {
background-color: #f1f1f1;
}
/* 펼쳐진 상태의 스타일 */
details[open] {
background-color: #e1e1e1;
}
</style>트랜지션 및 애니메이션:
<details> 태그를 스타일링할 때, CSS 트랜지션과 애니메이션을 사용하여 토글 동작에 애니메이션 효과를 추가할 수 있습니다. 이를 통해 세부 정보의 펼침 및 접힘을 부드럽게 처리할 수 있게 설정되어 있습니다. 다만 브라우저의 transition 속성이 details를 지원하지 않는경우가 많아 원활한 트랜지션 효과를 기대하려면 좀더 시간이 필요할 듯 싶습니다.
flex 사용불가:display: flex는 <details> 요소에 직접 적용되지 않습니다. 하지만 내부의 자식 요소에는 적용할 수 있습니다.
float 사용불가 :
<details> 요소는 일반적으로 플로팅 요소로 사용되지 않으므로 float 속성은 적용되지 않습니다.
absolute 사용불가:position: absolute는 <details> 요소에 적용되지 않습니다. <details> 요소는 다른 요소와의 상대적인 위치를 변경하기 위한 절대 위치 설정이 의미 없으며, 일반적으로 position: static을 가지고 있습니다.
vertical-align 사용불가 :
<details> 요소는 인라인 레벨 요소가 아니기 때문에 vertical-align 속성이 적용되지 않습니다.
line-height 사용불가 :line-height 속성은 <details> 요소에 적용되지 않습니다. 줄 간격을 조정하려면 내부 컨텐츠에 line-height 속성을 적용해야 합니다.
이외에도 <details> 요소에 다른 CSS 속성을 적용할 때, 기본 브라우저 스타일이나 요소의 동작과의 충돌로 인해 의도한 대로 동작하지 않을 수 있습니다. 따라서 CSS를 적용할 때는 <details> 요소의 특성을 고려하고, 필요한 경우 내부 요소에 스타일을 적용하여 원하는 디자인을 구현하는 것이 중요합니다.