HTML 세부 정보 요약 요소
2345 단어 html
세부 정보 요약 조합이며 결과는 다음과 같습니다.
HTML 상세 요약
이 기능을 추가하려면 내부에
details
요소를 입력하면 제목 역할을 하는 summary
가 있고 그 아래에는 접을 수 있는 콘텐츠가 될 p
가 있습니다.다음과 같이 표시됩니다.
<details>
<summary>How old is Dragonball Z?</summary>
<p>
Dragon Ball Z is adapted from the final 324 chapters of the manga series which were
published in Weekly Shōnen Jump from 1988 to 1995. It premiered in Japan on Fuji
Television on April 26, 1989
</p>
</details>
한 페이지에 여러 세부 정보를 포함할 수 있으며 스타일도 지정할 수 있습니다!
details {
width: 200px;
margin-bottom: 1rem;
border: 1px solid #efefef;
padding: 0.5rem;
}
summary {
color: #333;
font-weight: bold;
}
그리고 JavaScript가 포함되지 않은 멋진 아코디언과 같은 요소를 만들었습니다!
브라우저 지원
디테일과 요약 콤비의 멋진 부분은 지원이 꽤 좋다는 것입니다!
IE가 함께 작동하지 않는 것입니다.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(HTML 세부 정보 요약 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/html-detail-summary-element-2jb1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)