Question 1

DOCTYPE이란 무엇이며 왜 필요한가요?

Accepted Answer

DOCTYPE은 문서 타입 선언(Document Type Declaration)으로, 브라우저에게 이 문서가 어떤 버전의 HTML로 작성되었는지 알려줍니다. ```html ``` - **쿼크 모드(Quirks Mode) 방지**: DOCTYPE이 없으면 브라우저가 오래된 렌더링 방식(쿼크 모드)으로 페이지를 표시하여 레이아웃이 깨질 수 있습니다. - **표준 모드(Standards Mode) 활성화**: DOCTYPE을 선언하면 브라우저가 W3C 표준에 따라 페이지를 렌더링합니다. - HTML5에서는 ``만 선언하면 되며, 이전 HTML4/XHTML보다 훨씬 간단합니다.

Question 2

시맨틱 HTML이란 무엇이고 왜 중요한가요?

Accepted Answer

시맨틱 HTML은 태그 이름만으로 콘텐츠의 의미와 구조를 전달하는 마크업 방식입니다. ```html

...

``` - **접근성(Accessibility)**: 스크린 리더가 페이지 구조를 올바르게 해석할 수 있습니다. - **SEO**: 검색 엔진이 콘텐츠의 중요도와 관계를 더 잘 이해합니다. - **유지보수성**: 코드만 보고도 페이지 구조를 파악할 수 있어 협업이 용이합니다. - 주요 시맨틱 태그: `

`, `

Question 3

meta 태그의 역할과 주요 속성을 설명해주세요.

Accepted Answer

meta 태그는 HTML 문서의 메타데이터(문서에 대한 정보)를 정의합니다. `` 안에 위치하며 브라우저, 검색 엔진, SNS 등에 정보를 제공합니다. ```html

Question 4

HTML 폼 유효성 검사(Form Validation) 방법은?

Accepted Answer

HTML5는 별도의 JavaScript 없이도 폼 유효성 검사를 지원합니다.

**주요 유효성 검사 속성:**
- `required`: 필수 입력 필드
- `pattern`: 정규식 패턴 매칭 (예: `pattern="[0-9]{3}"`)
- `min` / `max`: 숫자·날짜의 최솟값·최댓값
- `minlength` / `maxlength`: 문자열 길이 제한
- `type`: `email`, `url`, `number` 등 자동 형식 검사

**CSS 가상 클래스로 상태 표시:**
```css
input:valid   { border-color: green; }
input:invalid { border-color: red; }
```

**JavaScript Constraint Validation API:**
```js
const input = document.querySelector('input');
input.checkValidity();          // 유효성 검사

Question 5

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

Accepted Answer

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

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

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

모든 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 9

<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`로 **원본

Question 10

헤딩 태그란 무엇인가요?

Accepted Answer

`

`~`

Q: meta 태그의 역할과 주요 속성을 설명해주세요.

meta 태그는 HTML 문서의 메타데이터(문서에 대한 정보)를 정의합니다. ` ` 안에 위치하며 브라우저, 검색 엔진, SNS 등에 정보를 제공합니다. ```html

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`로 **원본

Q: 헤딩 태그란 무엇인가요?

` `~` `은 문서의 **제목 계층(outline)**을 표현하는 시맨틱 태그입니다. 글자 크기를 키우는 태그가 아닙니다 — 크기는 CSS의 몫이고, 헤딩이 전달하는 것은 **구조적 위계**입니다. **왜 중요한가** - **접근성** — 스크린리더 사용자의 상당수가 헤딩 목록으로 페이지를 훑고 이동합니다. 헤딩이 없거나 순서가 엉키면 페이지 전체 구조를 파악할 수 없습니다 - **SEO** — 검색 엔진이 문서 주제와 섹션 구조를 파악하는 주요 신호 - **유지보수** — 계층이 명확하면 마크업만 봐도 정보 구조가 읽힘 **규칙** 1. **레벨을 건너뛰지 않는다** — `h2` 다음에 `h4`(❌). 순차적으로 내려갑니다 2. **페이지당 `h1`은 1개** — 그 페이지가 무엇에 관한 문서인지. (HTML Living Standard상 복수 `h1`이 불법은 아니지만, 실제 보조기술 지원 상황을 고려하면 1개가 안전합니다) 3. **시각적 크기 때문에 레벨을 고

`은 문서의 제목 계층(outline)을 표현하는 시맨틱 태그입니다. 글자 크기를 키우는 태그가 아닙니다 — 크기는 CSS의 몫이고, 헤딩이 전달하는 것은 구조적 위계입니다. 왜 중요한가 - 접근성 — 스크린리더 사용자의 상당수가 헤딩 목록으로 페이지를 훑고 이동합니다. 헤딩이 없거나 순서가 엉키면 페이지 전체 구조를 파악할 수 없습니다 - SEO — 검색 엔진이 문서 주제와 섹션 구조를 파악하는 주요 신호 - 유지보수 — 계층이 명확하면 마크업만 봐도 정보 구조가 읽힘 규칙 1. 레벨을 건너뛰지 않는다 — `h2` 다음에 `h4`(❌). 순차적으로 내려갑니다 2. 페이지당 `h1`은 1개 — 그 페이지가 무엇에 관한 문서인지. (HTML Living Standard상 복수 `h1`이 불법은 아니지만, 실제 보조기술 지원 상황을 고려하면 1개가 안전합니다) 3. **시각적 크기 때문에 레벨을 고

HTML

01DOCTYPE이란 무엇이며 왜 필요한가요?쉬움HTML 기초

02시맨틱 HTML이란 무엇이고 왜 중요한가요?쉬움시맨틱 HTML

03meta 태그의 역할과 주요 속성을 설명해주세요.쉬움HTML 기초

04HTML 폼 유효성 검사(Form Validation) 방법은?쉬움폼

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

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

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

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

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

10헤딩 태그란 무엇인가요?쉬움시맨틱 HTML