inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자를 위한 HTML 기초

HTML details, summary 요소

details 엘리먼트의 이점에 대해

251

윤슬기

작성한 질문수 2

0

<details> 엘리먼트에 대해 질문이 있습니다.

아코디언식 UI부분에 details 엘리먼트를 사용해보려고 합니다. 그래서 div 엘리먼트를 사용해 구현할 때와 비교하여, details 엘리먼트의 이점을 생각해보았습니다.

1. details가 상세정보를 포함하는 영역이며, 내부의 내용이 상세 정보임을 명확하게 나타낸다.

2. summery 부분을 클릭하면 자동으로 상세정보 영역이 토글되므로, 별도로 click event를 설정할 필요가 없다.

이 외에 또 다른 이점이 있을까요?

HTML/CSS

답변 1

1

조은

안녕하세요. 말씀 주신 이점 외에 추가로 기대해볼만한 이점은 없습니다.

2번 이점에 대해 추가로 공유드리자면, JavaScript로 유저가 제작한 컴포넌트가 아니라 브라우저에서 지원하는 컴포넌트이기 때문에, 별도로 접근성 대응 작업을 하지 않아도 접근성을 지원한다는 이점이 있습니다.

고맙습니다.

섹션5 노션링크 는 따로 없나요?

0

8

1

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

14

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

13

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

16

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

37

2

claude plugin 방법 자세히 부탁드려요

0

39

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

34

2

최근 코테, 과제 테스트 트렌드

0

55

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

36

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

36

2

Gemini로 진행가능 여부 궁금합니다.

0

58

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

25

2

프롬프트 11 진행 완료

0

41

2

파트3 수급 부분

0

39

2

input 과 label 의 작성 순서

0

698

1

a 링크의 href 속성

0

817

2

리액트에서 picture 사용법

0

226

0

section 내에서 여러요소를 그룹핑해야 되는 상황에 대해 질문드립니다.

0

472

2

dialog 미지원 브라우저를 위한 fallback 관련 질문입니다

0

470

4

React의 컴포넌트 개발과 시맨틱 구조 작성의 연관성에 대해 궁금한 점이 있어 질문드립니다.

0

276

1

tr 요소 내에 th, td 혼용 관련 질문입니다

0

321

1

시맨틱 구조 관련해서 질문있습니다.

0

244

1

address 요소 설명 중 궁금한 것이 있어서 질문드립니다.

0

383

3

자바스크립트를 이용할 때 button type 지정에 관한 궁금증

1

193

1