상세 블록의 다른 스타일

개발
1

핀란드 미디어 회사가 사용하는 것과 비슷한 느낌을 내려고 시도해 보았습니다.

스크린샷만 봐도 충분할 것 같네요:

IMG_3465
IMG_34651306×887 166 KB

저는 CSS를 조작하는 기본 기술만 가지고 있어서, 이것이 (쉽게) CSS로 가능할지 확신이 서지 않습니다. 하지만 첫 시도는… 음, 그렇게 잘 되지 않았습니다.

아래는 제가 사용한 코드입니다 (주석은 물론 제 자신을 위한 것입니다)

/*- details 요소에 대한 사용자 정의 스타일 - */
/* 버튼의 배경 이미지와 외관을 대체합니다 */
summary {
  background-color: #f5f5f5; /* 배경색 */
  border: 1px solid #d8d8d8; /* 테두리선 */
  padding: 10px; /* 여백 */
  border-radius: 5px; /* 둥근 모서리 */
  cursor: pointer; /* 커서 스타일 */
  display: flex; /* Flexbox 사용 */
  justify-content: space-between; /* 정렬 */
  align-items: center; /* 중앙 정렬 */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* 기본 목록 마커 제거 */
}
summary::after {
  content: '⮟'; /* 화살표 추가 */
  font-size: 20px; /* 화살표 크기 */
}

/*- details 요소의 콘텐츠에 대한 사용자 정의 스타일 - */
details[open] summary::after {
  content: '⮝'; /* 열릴 때 화살표를 위로 변경 */
}
details {
  margin-bottom: 10px; /* 블록 간 간격 */
}
details > div {
  padding: 10px; /* 콘텐츠 여백 */
}

일부는 제가 직접 만들고, 일부는 GPT의 제안으로 만들었습니다.

아이디어가 있으신가요?

2

Hey @Jagster :wave:

이걸 위한 테마 컴포넌트를 만들었어요… :tada:

3

정말 최고예요 :+1: 이제 뭘 했는지 제대로 파볼게요.

감사합니다!

6

먼저, 약 20년 전에 Visual Basic로 ‘hello world’ 같은 간단한 프로그램을 작성해 본 적이 있습니다. 또한 try/error 방법을 사용해 WordPress 플러그인을 몇 가지 조정해 보았고, 한 번은 루트부터 시작해 VPS의 모든 소유권을 변경하는 데 성공한 적도 있습니다.

그 훌륭한 해결책은 더 이상 [details .. open]을 따르지 않습니다. Details block doesn’t obey open 의 내용과 관련이 있을 것으로 생각합니다.

문제가 이 부분에서 발생하는 건가요:


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

왜냐하면 이것이 Discourse의 이 코드와 비슷하기 때문입니다. :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>