‘상세 정보 숨기기’ 요소의 표시 문제

[Canapin (Coin-coin le Canapin)]

이 블록에서,

[details="Summary"]
이 텍스트는 숨겨집니다
[/details]

모든 자식 요소나 형제 요소에 display: block을 적용하는 CSS 규칙이 두 개 있습니다:

details[open]>*, details[open] .lightbox-wrapper {
    display: block;
}

details[open]>summary:first-of-type ~ *,
details.open>summary:first-of-type ~ * {
    display: block;
}

이것은 문제가 됩니다. 인라인(inline)으로 표시되어야 하는 각 요소가 대신 블록(block)으로 표시되어 전체 폭을 차지하기 때문입니다. 스팬(span)이나 링크가 그렇습니다. 이 규칙들의 목적은 무엇인가요?

예시:

[details="Hidden"]
증강된 이미지와 지구에서 동일한 헤일로와의 비교:
![66bb711c57dd10e4e4f9713ebeec0ccec9a8d0dc1|220x499](upload://eEOifbxarMIErU6OnozO45BJq0I.jpeg)
![541efc040f313220531d74677a9105e44890c29c1|442x500](upload://c0ausOGkNA0BJMAsmAnOqmpWBv6.jpeg)
화성의 대기는 95%가 이산화탄소(CO<sub>2</sub>)로 구성되어 있지만, 헤일로는 물(H<sub>2</sub>O) 얼음 결정에 의해 생성되었기 때문에 지구에서 흔히 볼 수 있는 22° [헤일로](https://en.wikipedia.org/wiki/22%C2%B0_halo?oldformat=true)와 유사합니다. 사실 정확히 같은 것입니다.
[/details]

↓

Hidden

증강된 이미지와 지구에서 동일한 헤일로와의 비교:

화성의 대기는 95%가 이산화탄소(CO₂)로 구성되어 있지만, 헤일로는 물(H₂O) 얼음 결정에 의해 생성되었기 때문에 지구에서 흔히 볼 수 있는 22° 헤일로와 유사합니다. 사실 정확히 같은 것입니다.

---

여기에는 3개의 인라인 요소가 있습니다: <sub>와 링크:

---

---

커스텀 플러그인이 설치되어 있지 않더라도 안전 모드(safe mode)를 활성화하고 모든 플러그인을 비활성화하면 문제가 사라집니다:

---

---

try.discourse.org의 비디오 예시:

[JammyDodger]

Hi @Canapin

(제가 이해를 제대로 하고 있다면) 이것은 마크다운과 HTML이 혼합되어 있기 때문이라고 생각합니다. 이미지와 그림 사이에 줄바꿈을 넣으면 의도한 대로 표시되어야 합니다:

숨김

향상된 이미지와 지구에서 동일한 할로 현상과의 비교:

화성의 대기층은 95%가 이산화탄소(CO₂)로 구성되어 있지만, 이 할로는 물(H₂O) 얼음 결정에 의해 생성되었기 때문에 일반적인 지구의 22° 할로와 유사합니다. 사실 정확히 동일한 현상입니다.

@Canapin

커스텀 플러그인이 설치되어 있지 않더라도 안전 모드를 활성화하고 모든 플러그인을 비활성화하면 문제가 사라집니다:

details가 플러그인으로 간주된다고 보므로, 안전 모드에서 공식 플러그인을 비활성화하면 그것도 함께 꺼질 것입니다.

[Canapin (Coin-coin le Canapin)]

아하, 알겠습니다. 줄바꿈을 넣지 않아서 뒤따르는 텍스트 내용이 <p> 태그로 감싸지지 않았던 거군요.

글을 쓸 때만 간단히 수정할 수 있겠네요. 나중에 이 문제가 수정되지 않는다면 저에게는 괜찮지만, 다른 사람들에게는 가끔 혼란을 줄 수 있을 것 같습니다 (다만 다른 보고서를 보지는 못했지만요…).

또한, 미리보기는 잘 작동하지만 최종 게시물은 그렇지 않다는 점도 참고해 주세요.

---

Hide Details 컨테이너 내부에서 모든 직접 자식/형제 요소를 블록 요소로 만드는 CSS 규칙의 배경에 대해서도 궁금합니다.

[JammyDodger]

@Canapin

Hide Details 블록 안의 모든 직접 자식/형제 블록을 숨기도록 만드는 CSS 규칙에 대한 근거에도 관심이 있습니다.

저는 이 부분에 대해 잘 모르겠습니다. 하지만 이전에 간과되었을 수 있으니 인용으로 따로 빼서 살짝 주목을 받도록 하겠습니다. 혹시 커뮤니티에서 이 부분을 더 잘 아시는 분이 계실지도 모르니까요.