간단한 HTML details, summary 태그 예제

클릭하여 내용 보기

이곳에 토글로 열고 닫을 수 있는 내용을 넣습니다. 예를 들어, 더 자세한 정보나 추가적인 설명 등이 이 자리에 올 수 있습니다.

<style>
  /* summary 태그 스타일링 */
  summary {
    background-color: #A277BC; /* 배경색 설정 */
    color: white; /* 글자색 설정 */
    cursor: pointer; /* 마우스 오버 시 커서 변경 */
    padding: 10px; /* 패딩 설정 */
    margin-bottom: 0px; /* 하단 마진 설정 */
    user-select: none;  /* 버튼의 텍스트 선택 금지 */
  }

  /* details 태그 스타일링 */
  details {
    background-color: white; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
    padding: 5px; /* 패딩 설정 */
    margin: 5px; /* 상하 마진 설정 */
    border: 2px solid gray; /* 가장자리 경계 설정 */
  }
  
  details summary::marker{font-size:0;}
  
  /* details 요소가 열려 있을 때의 스타일 */
  details[open] summary {
	background-color: #E4E724; /* 배경색 설정 */
    color: black; /* 글자색 설정 */
  }
</style>

<details>
  <summary>클릭하여 내용 보기</summary>
  <br/>
  이곳에 토글로 열고 닫을 수 있는 내용을 넣습니다. 예를 들어, 더 자세한 정보나 추가적인 설명 등이 이 자리에 올 수 있습니다.
</details>