HTML5.1에서 새롭게 추가되는 태그 details, summary 요소

HTML에서 더보기/접기 기능을 사용하려면 간단한 방법으로는 구축이 사실상 좀 어렵습니다. 티스토리에서는 이 부분을 기본적으로 제공해주고 있기 때문에 개발자는 그저 CSS 스타일만 꾸며주기만 하면 됩니다. CSS의 체크박스 기능을 사용해서 응용할 방법도 있습니다면 이러면 코딩이 살짝 복잡해집니다. 혹은 자바스크립트의 일종인 jQuery를 활용하여 만들수도 있습니다.

 

HTML은 업그레이드 되고 있습니다. 현재까지는 HTML5가 대표적인 버전입니다. 5.2 버전에서는 다음의 요소가 새롭게 추가되었습니다. 말로는 설명이 어려우니 아래의 기본 예제를 살펴보시겠습니다.

 

See the Pen HTML5.2 <details> <summary> by rgy0409 (@rgy0409) on CodePen.

 

"여기를 눌러보세요." 부분을 직접 클릭해 보시기 바랍니다. 그러면 바로 아래에 "이렇게 추가 설명이 보여집니다." 라고 하는 텍스트가 보여지게 되고, 다시 한 번 눌러보시면 숨겨집니다. 이렇게 간단한 태그 구성으로 더보기/접기 기능을 구현할 수 있는 것입니다.

 

HTML 구조 살펴보기

위의 코드펜 예제에도 이미 나와있지만 한번 더 살펴보도록 합시다.

 

<details>
    <summary>여기를 눌러보세요</summary>
    <p>이렇게 추가 설명이 보여집니다.</p>
</details>

HTML의 기본 구조입니다. <details> 태그가 부모 요소이고, 1대 자식요소로 <summary>가 위치해 있음을 확인할 수 있습니다. <details> 요소는 더보기/접기 기능의 모든 영역을 감싸주는 태그라고 보시면 되고, <summary>가 바로 더보기/접기에서 보여지게되는 일종의 제목과 같은 역할을 하는 태그라고 이해하시면 될 것 같습니다. 특히 <summary> 의 직계 자매형제라인으로 <p>태그나 <h3>, <div>같은 태그를 바로 배치함으로서 summary를 클릭했을 경우 보여지는 내용들을 입력할 수 있습니다. 예제에서는 p태그를 사용했고 해당 태그 안쪽에 「이렇게 추가 설명이 보여집니다」 라는 텍스트를 넣어놓았음을 알 수 있습니다. 그렇다면 이렇게 단순히 1단 구성으로만 세팅할 수 있는것일까요? 그렇지 않습니다. 다음의 예제를 살펴보시겠습니다.

 

See the Pen HTML5.2 <details> <summary> 다단 구성 by rgy0409 (@rgy0409) on CodePen.

 

보시는 것처럼 사용자가 원하는만큼의 다단 형태 구성도 세팅 가능합니다.

 

CSS 적용시키기

당연히 스타일도 추가 가능합니다. 태그에 id 혹은 class명을 부여하고 이를 CSS로 스타일 코딩하면 됩니다. 예제를 살펴보시겠습니다.

 

See the Pen HTML5.2 <details> <summary> CSS 구성 by rgy0409 (@rgy0409) on CodePen.

 

 

보시는 것처럼 원하는 위치에 클래스명, ID명을 부여해서 얼마든지 CSS로 꾸밀 수 있습니다. CSS의 선택자 방법을 사용하여 원하는 스타일을 만들 수 있습니다.

 

summary 선택 시 검정색 외곽라인 없애기

이 방법은 기존에 사용하던 방법으로 진행 가능합니다. 외곽라인은 outline을 말합니다. 따라서 none 처리를 해버리면 될 겁니다. 따라서 구성되는 스타일 속성은 다음과 같습니다.

 

summary {
    outline: none;
}

이렇게 구성하면 클릭했을 때 검정색 테두리는 안 보이게 됩니다. 오타 주의하셔야 합니다. 이 방법이 위의 CSS 적용시키기 예제에 적용되어 있습니다. 확인해 보시면 검정색 테두리가 생기지 않는다는것을 확인할 수 있습니다.

 

마우스를 위로 올렸을 때 커서를 손가락 모양으로 바꾸기

이 방법 또한 간단합니다. 먼저 커서에 대한 CSS 스타일 요소는 다음과 같습니다.

 

summary {
    cursor: pointer;
}

이것을 summary에 마크업 해야합니다. 이유는 간단합니다. summary가 메뉴처럼 보여지게 하는 태그이기 때문입니다. 내용물은 굳이 마우스 모양이 손가락이 아니어도 될 겁니다. CSS 적용시키기 예제에 이 스타일 요소가 적용되어 있습니다. 그래서 메뉴 항목에 마우스 커서를 올리면 마치 링크가 되어있는 것처럼 마우스 커서가 손가락으로 바뀌는 것입니다.

 

삼각형모양의 특수문자 커스터마이징

기본적으로 <details>, <summary> 태그를 사용하면 더보기/접기 상황 구별을 위한 검정색 삼각형이 왼쪽에 자동 배치가 된다는것을 알 수 있습니다. 바로 이 검정색 삼각형을 편집하는 방법입니다. CSS 적용시키기 예제에서는 다음의 스타일이 마크업 되어있습니다.

 

details summary::-webkit-details-marker {
    font-size: 20px;
    margin-right: 5px;
}

그냥 단순히 폰트 사이즈 변경, 마진 오른쪽 값 변경 정도입니다. 만약 삼각형 화살표를 삭제하고 싶다면 어떻게 해야 할까요? 간단합니다. display: none;을 사용하면 됩니다. 또는 원하는 아이콘 이미지를 사용하려면 어떻게 해야할까요? 마찬가지로 background: url(이미지경로); 를 사용하면 될겁니다. 그러나 이 두가지의 방법만으로는 안 됩니다. 왜냐하면 클릭을 했을 때, 그냥 평상시의 아이콘 이미지가 서로 달라야 하기 때문입니다. 예제에서 살펴보시면 아시겠지만 클릭을 했을 때, 다시 원래대로 돌아왔을 때 삼각형 모양이 서로 다릅니다. 회전의 차이가 발생합니다. 따라서 반드시 두 가지의 선택자를 사용해야 합니다. 예를들어 다음과 같이 마크업 해야합니다.

 

details summary::-webkit-details-marker {
    background: url(이미지경로) center center no-repeat/cover;
}

details[open] summary::-webkit-details-marker {
    background: url(이미지경로) center center no-repeat/cover;
}

보시면 차이점이 보입니다. 일반적인 상태, 그리고 [open] 상태 이렇게 두 가지로 나뉘게 됩니다. 따라서 이미지로 변경하고자 하는 경우라면 당연히 두 개의 이미지를 준비해야 할 것입니다. 하나는 평상시, 다른 하나는 클릭했을 때의 이미지를 따로 사용해야 하기 때문입니다. 비단 이미지 뿐만 아니라 웹 아이콘 적용도 가능합니다. 가장 대표적으로 폰트어썸이 있는데 이를 응용해서 얼마든지 기본 상태와 클릭 상태에 대해 따로 폰트어썸 아이콘을 적용시켜 멋진 스타일을 연출할 수 있습니다. 끝.