Q: 태그 안에는 어떤 태그를 사용하나요?

` `는 **화면에 렌더링되지 않는 문서 메타데이터**를 담는 영역입니다. **필수/핵심** - ` ` — 인코딩 선언. **반드시 head 최상단**(바이트 기준 1024바이트 이내)에 둬야 브라우저가 파싱을 재시작하지 않음 - ` ` — 문서 제목. 탭·북마크·검색결과 제목에 사용되며 접근성상 필수 - ` ` — 모바일 반응형의 전제 **메타데이터** - ` ` — 검색결과 스니펫 - ` ` — 오픈그래프(SNS 공유 카드) - ` ` — 중복 URL 정규화 - ` ` — 색인 정책 **리소스 연결** - ` `

Q: 태그는 어떻게 사용하나요?

` `(anchor)는 하이퍼링크를 만드는 요소로, 웹의 근간입니다. **주요 속성** | 속성 | 설명 | | --- | --- | | `href` | 이동 대상. URL, `#id`(페이지 내), `mailto:`, `tel:` | | `target` | `_self`(기본), `_blank`(새 탭) | | `rel` | 관계. `noopener`, `noreferrer`, `nofollow` | | `download` | 이동 대신 다운로드. 값 지정 시 파일명 | | `hreflang`, `type` | 대상 언어·MIME 힌트 | **`target="_blank"`의 보안 이슈 — 반드시 알아야 함** ```html 외부 링크 ``` `noopener` 없이 새 탭을 열면 열린 페이지가 `window.opener`로 **원본

Question 1

프론트엔드에서 SEO를 위한 핵심 HTML 마크업 전략은?

Accepted Answer

검색 엔진 최적화를 위한 HTML 마크업 전략입니다. **필수 메타 태그:** ```html 페이지 제목 (60자 이내) ``` **시맨틱 구조:** - `

`, `

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-

Question 6

HTML이란 무엇인가요?

Accepted Answer

HTML(HyperText Markup Language)은 웹 문서의 **구조와 의미**를 정의하는 마크업 언어입니다. 프로그래밍 언어가 아니라 "이 텍스트가 제목인지 문단인지 목록인지"를 태그로 표시하는 언어입니다.

**핵심 성격**
- **HyperText** — 문서 간 링크(`<a href>`)로 서로 연결되는 비선형 문서
- **Markup** — 콘텐츠를 태그로 감싸 역할을 부여
- **선언적** — "어떻게 그릴지"가 아니라 "무엇인지"를 기술. 렌더링 방법은 브라우저가 결정

**웹 3요소에서의 위치**

| 언어 | 역할 | 비유 |
| --- | --- | --- |
| HTML | 구조·의미 | 뼈대 |
| CSS | 표현 | 살·옷 |
| JavaScript | 동작 | 근육 |

**표준**
현재 표준은 **HTML Living Standard**(WHATWG)입니다. HTML5 이후 버전 번호를 붙이지 않고 지속적으로 갱신되는 방식으로 바뀌었으며, W3C가

Question 7

<head> 태그 안에는 어떤 태그를 사용하나요?

Accepted Answer

``는 **화면에 렌더링되지 않는 문서 메타데이터**를 담는 영역입니다. **필수/핵심** - `` — 인코딩 선언. **반드시 head 최상단**(바이트 기준 1024바이트 이내)에 둬야 브라우저가 파싱을 재시작하지 않음 - `` — 문서 제목. 탭·북마크·검색결과 제목에 사용되며 접근성상 필수 - `<meta name="viewport" content="width=device-width, initial-scale=1">` — 모바일 반응형의 전제 **메타데이터** - `<meta name="description">` — 검색결과 스니펫 - `<meta property="og:*">` — 오픈그래프(SNS 공유 카드) - `<link rel="canonical">` — 중복 URL 정규화 - `<meta name="robots">` — 색인 정책 **리소스 연결** - `<link rel="stylesheet">`

Question 8

웹 표준과 웹 접근성이란 무엇인가요?

Accepted Answer

**웹 표준(Web Standards)**
W3C·WHATWG 등이 정한 웹 기술 규격(HTML·CSS·DOM·ECMAScript 등). 특정 브라우저나 플러그인에 의존하지 않고 **어떤 환경에서도 동일하게 동작**하도록 하는 합의입니다.

지키면 얻는 것:
- 크로스 브라우징 — 브라우저별 분기 코드 감소
- 유지보수성 — 구조(HTML)/표현(CSS)/동작(JS) 분리
- SEO — 검색 엔진이 구조를 해석 가능
- 접근성의 전제 — 표준 마크업이라야 보조기술이 해석함

**웹 접근성(Web Accessibility, a11y)**
장애 유무·기기·환경에 관계없이 누구나 웹 콘텐츠를 인식하고 사용할 수 있게 하는 것. 국내는 **KWCAG**, 국제는 **WCAG**(현행 2.2) 기준을 따릅니다.

WCAG의 4원칙 **POUR**:

| 원칙 | 의미 | 실무 예 |
| --- | --- | --- |
| **P**erceivable(인식의 용이성) | 콘텐츠를 인지할 수 있

Question 9

모든 HTML 태그에는 종료 태그가 있나요?

Accepted Answer

아닙니다. HTML 요소는 종료 태그 유무에 따라 세 가지로 나뉩니다. **1. Void element (빈 요소) — 종료 태그가 없음** 자식 콘텐츠를 가질 수 없는 요소입니다. `area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr` ```html

``` **2. 종료 태그 생략 가능 (Optional tag)** 브라우저가 다음 요소를 만나면 암묵적으로 닫습니다. ```html

하나
둘

문단 하나

문단 둘 ``` `html`, `head`, `body`, `p`, `li`, `tr`, `td`,

Question 10

<a> 태그는 어떻게 사용하나요?

Accepted Answer

``(anchor)는 하이퍼링크를 만드는 요소로, 웹의 근간입니다. **주요 속성** | 속성 | 설명 | | --- | --- | | `href` | 이동 대상. URL, `#id`(페이지 내), `mailto:`, `tel:` | | `target` | `_self`(기본), `_blank`(새 탭) | | `rel` | 관계. `noopener`, `noreferrer`, `nofollow` | | `download` | 이동 대신 다운로드. 값 지정 시 파일명 | | `hreflang`, `type` | 대상 언어·MIME 힌트 | **`target="_blank"`의 보안 이슈 — 반드시 알아야 함** ```html 외부 링크 ``` `noopener` 없이 새 탭을 열면 열린 페이지가 `window.opener`로 **원본

HTML

11프론트엔드에서 SEO를 위한 핵심 HTML 마크업 전략은?보통SEO

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

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

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

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

16HTML이란 무엇인가요?쉬움HTML 기초

17<head> 태그 안에는 어떤 태그를 사용하나요?쉬움HTML 기초

18웹 표준과 웹 접근성이란 무엇인가요?보통접근성

19모든 HTML 태그에는 종료 태그가 있나요?쉬움HTML 기초

20<a> 태그는 어떻게 사용하나요?쉬움HTML 기초