이것은 세부 사항 스타일 변경 실험에 대한 피드백 주제입니다.
BBCode를 사용한 details 태그의 예시:
abc
testing 123 123
123
HTML을 사용한 details 태그의 예시:
11개의 좋아요
HTML <details>를 사용하면 내용이 summary로 이어지는 것 같습니다:
This is an open details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.This is a HTML details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.아, 알겠습니다. 자동 줄바꿈이 되지 않고, 제가 수동으로 줄바꿈을 추가하지 않았기 때문이군요:
<details open>
<summary>
This is an open details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Summary
이 텍스트는 숨겨집니다
5개의 좋아요
네, 맞습니다. 직접 추가할 때 p 태그를 포함하지 않은 것 같고, 디테일 삽입 도구를 사용하면 자동으로 추가되는 것 같습니다.
직접 추가한 경우:
<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
삽입 도구:
<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>
삽입 도구가 추가하는 p 태그 덕분에 텍스트가 새 줄에 표시됩니다.
1개의 좋아요
아, 기존 스타일에 <p> 태그를 추가할 필요는 없었군요. 이 새로운 방식은 <p> 태그를 더 많이 요구하는 것 같네요. 
2개의 좋아요
일부 초기 피드백:
- 처음 새로운 details 요소를 접했을 때 그냥 지나쳐 버렸습니다.
[details]로 인식되지 않았어요. "새롭기 때문"일 수도 있지만… - 이전 디자인과 브라우저 기본 구현 방식에서 벗어났습니다. 화살표(chevron)가 summary 뒤에 위치해 있으며, 닫힌 상태의 방향은 이전(그리고 기본적으로) 열림 상태를 의미하던 방향과 반대입니다.
닫힘:
열림:
- 버튼/summary 요소가 훨씬 더 많은 공간을 차지합니다(이전에는 반인라인(semi-inline) 요소였음)
vs - 위에서 보았듯이, 이전에는 삼각형/화살표가 텍스트와 정렬되어 있었지만, 이제는 버튼의 패딩 때문에 “Summary” 텍스트가 정렬되지 않습니다(아무것도 서로 정렬되어 있지 않네요
)
- 모바일에서 상호작용한 후 버튼의 배경이 여전히 강조된 상태로 유지됩니다
- 배경 옵션보다는 테두리 옵션에 투표했을 것입니다 – 일부 내용을 숨기는 것이 단순히 숨기는 것만 하되, 대비에 영향을 주지 않는 방식(주로 내장 이미지와 이모지 경우에 관련됨)을 선호합니다.
업데이트:
- 클릭 가능한 영역이 줄어듦:
vs
7개의 좋아요
그것이 일종의 의도였습니다. 더 나은 방향으로 개선하려면 기존 방식, 특히 브라우저 기본 설정에서 벗어나야 합니다. 현재는 여러 개의 답글이 있는 게시물 하단의 “답글” 버튼 패턴을 따르고 있습니다.
좋은 지적입니다!
이것도 좋은 지적입니다. 확인해 보겠습니다 
검은색/어두운 이모지를 어두운/검은 배경 위에 사용하는 문제는 여기서 해결할 수 있는 것이 아닐 수도 있습니다…
이것도 다소 혼란스럽네요. 이전에 텍스트가 아닌 다른 곳을 클릭하셨나요? 그곳을 클릭하는 것이 자주 발생했나요?
3개의 좋아요
네. 이 기능을 꽤 많이 사용했어요, 특히 모바일에서요. 
영역이 작아서 잘 안 눌려요. 제 엄지가 화면에 닿는 위치가 바로 거기인 것 같아요.
5개의 좋아요
네! 플랫폼 기본 설정의 기대 사항 중 하나입니다: 체크박스/라디오 버튼과 그 <label>처럼, <details> 요소는 특정 방식으로 보이고 작동합니다. 예를 들어, 저는 GitHub에서도 같은 방식으로 사용합니다:
1개의 답변
사실 다른 것과 비슷하게 만드는 게 좋은 건지 모르겠네요 
1개의 좋아요
안녕하세요! 제 질문이 완전히 정확하지 않다면 양해 부탁드립니다 
사용자 그룹에 따라 숨겨진 콘텐츠를 표시하는 기능을 추가할 수 있을까요? 예를 들어, 사용자가 등록되지 않았거나 특정 그룹의 멤버가 아니면 세부 정보를 볼 수 없게 하고, 대신 접근 권한을 얻는 방법(예: 회원가입)에 대한 안내가 담긴 모달 창을 표시하는 것입니다.
전체 주제나 카테고리를 숨기는 테마 컴포넌트/플러그인의 존재는 알고 있습니다. 하지만 때로는 사용자에게 1차 정보만 읽을 수 있는 기회를 주고 싶을 때가 있거든요.
1개의 좋아요
일반적으로 카테고리 전체가 특정 그룹이나 사용자에게 제한되는 경우가 많고, 해당 카테고리 내 게시물의 세부 정보까지 제한하는 경우는 드물기 때문에, 이런 방식으로 활용된 적은 없습니다.
그럼에도 불구하고 플러그인을 통해 구현할 수 있을 것으로 생각하지만, 이 주제는 그런 논의를 위한 적절한 장소가 아닙니다.
1개의 좋아요
사소한 지적이지만, 인용 배경색과 약간 어긋나는 것 같습니다. 이런 “거의 맞지만 완전히는 아닌” 상태는 실수처럼 보일 수 있습니다. 완전히 일치시키거나, 아니면 더 확연히 다르게 보이는 것이 나을 것 같습니다.
다른 생각들…
This is a manual quote
이것은 부분 인용이며, 확장할 수 있습니다.
이 스타일을 약간 차용하는 것은 어떨까요? 동일한 패딩, 배경색, 확장 기능을 유지하되… 인용처럼 보이지 않으려면 최소한 테두리는 제거해야 할 것 같습니다
완전히 다른 스타일을 사용하는 것은 어떨까요?
7개의 좋아요
안녕하세요 
그냥 생각나는 대로 말해볼게요… 기본적으로 헤더를 표시하는 것이 꼭 필요한가요? 대부분의 경우 기본 Summary를 사용하니까, 대부분의 사용자는 헤더가 고유할 수 있다는 사실을 모를 수도 있겠더라고요. 그래서 details 안의 텍스트가 줄바꿈 없이 잘리고, 접혀 있을 때 끝에 ...더 보기가, 펼쳐 있을 때 접기가 표시되는 것이 더 자연스러울 것 같아요. 예를 들어, 잘린 첫 번째 줄의 내용이 자동으로 헤더로 표시되는 거죠. 이것이 기본 뷰가 될 수 있지만, 원한다면 사용자가 별도로 헤더를 추가할 수도 있겠죠?
4개의 좋아요
공정하게 말하면: 구현 방식은 라벨을 클릭하면 해당 라디오 버튼이 선택되도록 하는 것이며, 라벨 뒤의 빈 행 전체를 클릭해도 동작하도록 하는 것은 필수적인 요구사항이 아닙니다.
2개의 좋아요
- 체보(chevron)가 텍스트와 정렬되지 않았습니다(약간 너무 높게 배치됨)
vs
(그리고 같은 체보 아이콘이 아닌 것 같네요?
) - 작성기 메뉴는 삼각형을 사용하여 상세 정보 기능을 나타냅니다
- 2번 항목에 추가합니다.
텍스트 뒤에 아이콘을 배치하면, 특히 게시물을 빠르게 훑어볼 때 인식하기가 더 어려워집니다
- 2번 항목에 추가로 말씀드립니다.
아이콘이 가리키는 방향에 대해: 토글로 작동하므로, 현재 상태를 나타내기 위해 방향을 반대로 해서 표시하는 것이 더 합리적이지 않나요? (이것은 “답변” 버튼에도 해당됩니다) - tab 키로 탐색했을 때 포커스 상태가 없습니다
- 호버 상태는 닫혀 있을 때만 보입니다
5개의 좋아요
아마도… @awesomerobot 의견 좀?
경미한 버그 – 상세 페이지를 열면 더 많은 게시물을 로드할 때까지(그리고 약간 더) 위로 스크롤한 후, 다시 돌아오면 상세 내용이 렌더링되지 않습니다 (편집: 또는 닫혀 있지만, 여기서는 닫혀 있을 것으로 예상하지 않습니다)
3개의 좋아요
그래, 버튼처럼 처리하면 될 것 같기도 하다… 기존 HTML details 태그와 거의 비슷하게, (그리고 체브론을 추가해서)
펼치기
여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다... 여기 잘린 콘텐츠입니다...그리고…
요약 콘텐츠로 단락을 사용한다면 어떨까? 길이가 얼마든 될 수 있고 줄바꿈이 이상해질 수 있다. 제한을 두어야 하는가? 매우 매우 긴 요약 텍스트에 대한 사용 사례가 있는가? 다음 줄 체브론:
여기가 세부 내용입니다
3개의 좋아요