Question 1

Accepted Answer

`<iframe>`은 현재 문서 안에 **다른 HTML 문서를 통째로 임베드**하는 요소입니다.

**장점**
- **격리(isolation)** — 별도 브라우징 컨텍스트라 CSS·JS 전역이 섞이지 않음. 서드파티 위젯(결제, 지도, 유튜브)에 적합
- **크로스 오리진 샌드박싱** — 다른 출처의 콘텐츠를 동일 출처 정책 보호 아래 표시
- **재사용** — 결제창처럼 규제 대상 UI를 제공사가 통째로 책임지고 배포 가능(PG사 결제창이 iframe인 이유)
- **레거시 통합** — 마이크로 프론트엔드에서 기술 스택이 다른 앱을 붙이는 가장 단순한 방법

**단점**
- **성능** — 별도 문서라 자체 렌더링 트리·JS 컨텍스트를 가짐. 메인 스레드·메모리 비용이 크고 LCP를 악화시킴
- **SEO** — iframe 내부 콘텐츠는 부모 문서의 콘텐츠로 취급되지 않음
- **반응형 어려움** — 내부 높이를 부모가 알 수 없어 `postMessage`로 높이를 주고받는 편

Question 2

헤딩 태그란 무엇인가요?

Accepted Answer

`

`~`

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

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

Q: HTML 인코딩이란 무엇인가요?

"HTML 인코딩"은 문맥에 따라 두 가지를 뜻합니다. 면접에서는 **어느 쪽을 묻는지 확인**하고 답하는 게 좋습니다. ## 1. 문자 인코딩(Character Encoding) 바이트 시퀀스를 문자로 해석하는 규칙입니다. 브라우저가 HTML 파일의 바이트를 어떤 문자로 읽을지 결정합니다. ```html ``` - **UTF-8이 사실상 유일한 정답** — 유니코드 전체를 표현하고 ASCII와 하위 호환. HTML Living Standard도 UTF-8을 요구합니다 - **` ` 최상단**(문서 시작 1024바이트 이내)에 둬야 합니다. 늦게 선언되면 브라우저가 파싱을 중단하고 **재시작**합니다 - 선언이 없으면 브라우저가 추측하며, 잘못 추측하면 한글이 깨집니다(모지바케). EUC-KR로 저장된 파일에 UTF-8을 선언해도 깨집니다 — **파일 저장 인코딩과 선언이 일치**해야 합니다 - HTTP 응답 헤더 `Conte

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

Question 3

HTML 엔티티란 무엇인가요?

Accepted Answer

HTML 엔티티는 **마크업으로 해석될 수 있는 문자나 직접 입력하기 어려운 문자**를 안전하게 표기하는 이스케이프 표기법입니다. `&이름;` 또는 `&#숫자;` 형태입니다. **필수 5종** | 문자 | 엔티티 | 왜 필요한가 | | --- | --- | --- | | `<` | `<` | 태그 시작으로 해석됨 | | `>` | `>` | 태그 종료로 해석됨 | | `&` | `&` | 엔티티 시작으로 해석됨 | | `"` | `"` | 속성값 구분자 | | `'` | `'` | 속성값 구분자 (`'`는 HTML5부터 지원) | **자주 쓰는 것** - ` ` — 줄바꿈되지 않는 공백. 연속 공백 유지, 단어 붙임(`10 kg`) - `©` ©, `®` ®, `×` ×, `…` …, `—` — **표기 방식 3가지** ```html <

Question 4

<img> 태그의 srcset 속성은 언제 사용하나요?

Accepted Answer

`srcset`은 브라우저가 **디바이스 환경(화면 밀도·뷰포트 너비)에 맞는 이미지를 스스로 고르게** 하는 반응형 이미지 속성입니다. 레티나 디스플레이에 저해상도 이미지를 주거나, 모바일에 2000px 이미지를 내려받게 하는 낭비를 막습니다.

**1. 밀도 서술자(x) — 같은 크기, 다른 해상도**

```html
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x" alt="로고" width="200" height="50">
```

로고·아이콘처럼 **표시 크기가 고정**된 이미지에 사용합니다.

**2. 너비 서술자(w) + sizes — 표시 크기가 뷰포트에 따라 변할 때**

```html
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-w

Question 5

HTML 인코딩이란 무엇인가요?

Accepted Answer

"HTML 인코딩"은 문맥에 따라 두 가지를 뜻합니다. 면접에서는 **어느 쪽을 묻는지 확인**하고 답하는 게 좋습니다. ## 1. 문자 인코딩(Character Encoding) 바이트 시퀀스를 문자로 해석하는 규칙입니다. 브라우저가 HTML 파일의 바이트를 어떤 문자로 읽을지 결정합니다. ```html ``` - **UTF-8이 사실상 유일한 정답** — 유니코드 전체를 표현하고 ASCII와 하위 호환. HTML Living Standard도 UTF-8을 요구합니다 - **`` 최상단**(문서 시작 1024바이트 이내)에 둬야 합니다. 늦게 선언되면 브라우저가 파싱을 중단하고 **재시작**합니다 - 선언이 없으면 브라우저가 추측하며, 잘못 추측하면 한글이 깨집니다(모지바케). EUC-KR로 저장된 파일에 UTF-8을 선언해도 깨집니다 — **파일 저장 인코딩과 선언이 일치**해야 합니다 - HTTP 응답 헤더 `Conte

HTML

21<iframe> 태그의 장점과 단점은 무엇인가요?보통보안/성능

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

23HTML 엔티티란 무엇인가요?보통HTML 기초

24<img> 태그의 srcset 속성은 언제 사용하나요?보통성능

25HTML 인코딩이란 무엇인가요?보통HTML 기초