summary, details

details

<details>
	// 짧은 설명
  <summary>System Requirements</summary>

  // 디테일한 설명
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

열린 채로 시작

• 디테일 박스가 열린 채로 시작하길 원한다면 <details open>

한번에 하나만 열기

• 한번에 하나만 열어볼 수 있게 하고 싶을 경우 name을 동일하게 설정

<details name="reqs">
</details>
<details name="reqs">
</details>
<details name="reqs">
</details>

여닫이 모양 커스터마이징

• MDN Web Docs<summary>: The Disclosure Summary element - HTML: HyperText Markup Language | MDN
  

  <summary>: The Disclosure Summary element - HTML: HyperText Markup Language | MDN

  The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

  MDN Web Docs

details {
  font-size: 1rem;
  font-family: "Open Sans", Calibri, sans-serif;
  border: solid;
  padding: 2px 6px;
  margin-bottom: 1em;
}

details:first-of-type summary::marker,
:is(::-webkit-details-marker) {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

details[open]:first-of-type summary::marker {
  content: "- ";
}

details:last-of-type summary {
  list-style: none;
  &::after {
    content: "+";
    color: white;
    background-color: darkgreen;
    border-radius: 1em;
    font-weight: bold;
    padding: 0 5px;
    margin-inline-start: 5px;
  }
  [open] &::after {
    content: "-";
  }
}

details:last-of-type summary::-webkit-details-marker {
  display: none;
}