투케이2K

86. (html/css/javascript/jquery) details , summary 태그 사용해 확장 내용 표시 수행 실시 본문

FrontEnd

86. (html/css/javascript/jquery) details , summary 태그 사용해 확장 내용 표시 수행 실시

투케이2K 2022. 8. 19. 11:33

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

 

[요약 설명]

​

<details> 태그는 사용자가 직접 조작하여 보거나 숨길 수 있는 세부사항을 명시할 때 사용합니다

<summary> 태그는 <details> 태그에 의해 생성되는 내용을 대표하기 위해 기본적으로 보이는 제목을 정의합니다
 

[소스 코드]

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
    <title>summary test</title>
</head>
<body>

    <details>
        <summary>지역 구분</summary>
        <ul>
            <li>서울</li>
            <li>경북</li>
            <li>전북</li>
        </ul>
    </details>
	
</body>
</html>
 

[결과 출력]

​

 

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

88. (html/css/javascript/jquery) fieldset 태그 사용해 form 속성 요소 그룹 (group) 묶음 처리 실시  (0) 2022.08.19
87. (html/css/javascript/jquery) embed 태그 사용해 외부 콘텐츠 및 파일 포함 실시  (0) 2022.08.19
85. (html/css/javascript/jquery) barcode 라이브러리 사용해 바코드 생성 실시  (0) 2022.06.25
84. (html/css/javascript/jquery) 카카오 인앱 브라우저 주소 표시줄 및 네비게이션 바 자동 숨김 현상 조치 사항  (0) 2021.10.01
83. (html/css/javascript/jquery) 모바일 웹 브라우저 당김 새로고침 막기 - overscroll-behavior contain 사용  (0) 2021.09.02
'FrontEnd' Related Articles more
Comments