Question 1

data-* 속성의 용도와 사용법은?

Accepted Answer

`data-*` 속성은 HTML 요소에 사용자 정의 데이터를 저장하는 표준 방법입니다. **HTML에서 사용:** ```html

...

``` **JavaScript에서 접근 — dataset API:** ```js const el = document.querySelector('article'); el.dataset.author; // "Kim" el.dataset.category; // "tech" el.dataset.createdAt; // "2025-01-01" (kebab → camelCase 변환) ``` **CSS에서 활용:** ```css article[data-category="tech"] { border-left: 3px solid blue; } article::before { conten

Question 2

<dialog> 요소를 이용한 네이티브 모달 구현 방법은?

Accepted Answer

`<dialog>`는 HTML5에서 제공하는 네이티브 대화 상자 요소입니다.

**기본 사용법:**
```html
<dialog id="myDialog">
  <h2>제목</h2>
  <p>내용</p>
  <button onclick="this.closest('dialog').close()">닫기</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">열기</button>
```

**주요 메서드:**
- `show()`: 비모달(non-modal)로 열기 — 배경 상호작용 가능
- `showModal()`: 모달로 열기 — `::backdrop` 생성, ESC 키로 닫기 지원
- `close(returnValue)`: 닫기, 반환값 전달 가능

**::backdrop 스타일링:**
```css
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);

Question 3

<canvas>와 SVG의 차이점과 각각의 사용 시점은?

Accepted Answer

둘 다 그래픽을 표현하지만 방식이 근본적으로 다릅니다.

**SVG:** XML 기반 벡터 그래픽. DOM 요소로 존재하여 CSS 스타일링과 이벤트 핸들링 가능. 확대해도 품질 유지. 요소가 많아지면 DOM 부담.

**Canvas:** JavaScript로 픽셀 단위 렌더링. DOM에 단일 요소만 존재. 개별 요소에 이벤트 바인딩 불가. 수만 개 객체도 빠르게 렌더링.

| 기준 | SVG | Canvas |
|------|-----|--------|
| 그래픽 방식 | 벡터 | 래스터 |
| DOM 접근 | O | X |
| 이벤트 핸들링 | 쉬움 | 직접 구현 |
| 성능 (많은 요소) | 느림 | 빠름 |
| 해상도 독립 | O | X |
| 접근성 | 좋음 | 나쁨 |

**사용 시점:**
- SVG: 아이콘, 로고, 차트(D3.js), 인터랙티브 UI
- Canvas: 게임, 이미지 편집, 대용량 데이터 시각화, 애니메이션

Question 4

HTML 네이티브 Lazy Loading(loading 속성)의 동작 방식은?

Accepted Answer

브라우저 네이티브 지연 로딩으로 초기 로딩 성능을 개선합니다. ```html

``` **loading 속성 값:** - `lazy`: 뷰포트 근처에 도달할 때 로드 - `eager`: 즉시 로드 (기본값) **주의사항:** - LCP 요소에는 사용 금지 → `loading="eager"` 또는 속성 생략 - `width`, `height` 속성을 반드시 명시 → CLS 방지 - Above-the-fold(첫 화면) 이미지에는 사용하지 않음 - Next.js `` 컴포넌트는 기본적으로 lazy loading 적용

Question 5

WAI-ARIA의 역할(role), 상태(state), 속성(property)을 설명해주세요.

Accepted Answer

WAI-ARIA는 시맨틱 HTML만으로 표현할 수 없는 접근성 정보를 보완합니다. **Role (역할):** ```html

탭 내용

``` **State (상태 — 동적 변경):** - `aria-expanded`: 접힘/펼침 - `aria-selected`: 선택 상태 - `aria-disabled`: 비활성화 - `aria-hidden`: 스크린 리더에서 숨김 **Property (속성 — 비교적 고정):** - `aria-label`: 요소의 레이블 - `aria-labelledby`: 다른 요소로 레이블 참조 - `aria-describedby`: 추가 설명 참조 - `aria-

HTML

11data-* 속성의 용도와 사용법은?보통HTML5

12<dialog> 요소를 이용한 네이티브 모달 구현 방법은?보통HTML5

13<canvas>와 SVG의 차이점과 각각의 사용 시점은?보통HTML5

14HTML 네이티브 Lazy Loading(loading 속성)의 동작 방식은?쉬움성능

15WAI-ARIA의 역할(role), 상태(state), 속성(property)을 설명해주세요.어려움접근성