Question 1

block 요소와 inline 요소의 차이점은 무엇인가요?

Accepted Answer

HTML 요소는 크게 블록(block) 레벨과 인라인(inline) 레벨로 나뉩니다. **Block 요소:** - 항상 새로운 줄에서 시작하며 가능한 최대 너비를 차지합니다. - width, height, margin, padding을 모두 설정할 수 있습니다. - 예: `

`, `

`~`

`, `
`, `
` Inline 요소: - 줄바꿈 없이 콘텐츠 흐름 내에 배치됩니다. - width, height 설정이 불가능하며, 상하 margin은 적용되지 않습니다. - 예: ``, ``, ``, ``, `` ```css /* inline 요소를 block처럼 사용하려면 / span { display: block; } / 또는 둘의 특성을 합친 */ span { display: inline-block; } ``` **대체 인라인 요소 (Replaced Inline E

Question 2

localStorage, sessionStorage, Cookie의 차이점을 설명해주세요.

Accepted Answer

세 가지 모두 클라이언트 측 데이터 저장 방식이지만, 용도와 특성이 다릅니다.

| 특성 | Cookie | localStorage | sessionStorage |
|------|--------|-------------|----------------|
| 용량 | ~4KB | ~5-10MB | ~5-10MB |
| 만료 | 설정 가능 | 영구 | 탭/창 닫으면 삭제 |
| 서버 전송 | 매 요청마다 | X | X |
| 범위 | 도메인 전체 | 도메인 전체 | 탭/창별 |

```javascript
// Cookie
document.cookie = "name=value; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/";

// localStorage
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');

// sessionStorage
sessionStor

Question 3

웹 접근성(Web Accessibility)이란 무엇이며 어떻게 개선할 수 있나요?

Accepted Answer

웹 접근성은 장애가 있는 사용자를 포함한 모든 사람이 웹 콘텐츠를 이용할 수 있도록 하는 것입니다. WCAG(Web Content Accessibility Guidelines)가 국제 표준입니다. **주요 개선 방법:** ```html

이메일

클릭 가능한 요소

``` - 시맨틱

Question 4

iframe의 보안 문제와 sandbox 속성을 설명해주세요.

Accepted Answer

iframe은 외부 콘텐츠를 임베드하지만 보안 위험이 있습니다. **보안 위험:** - 클릭재킹(Clickjacking): 투명 iframe으로 사용자 클릭 가로채기 - 악성 스크립트 실행: 외부 페이지의 JS가 부모 페이지에 영향 - 피싱: 신뢰할 수 없는 콘텐츠 표시 **sandbox 속성:** ```html ``` - `sandbox` (값 없이): 모든 기능 차단 - `allow-scripts`: JS 실행 허용 - `allow-same-origin`: 동일 출처 정책 유지 - `allow-forms`: 폼 제출 허용 - `allow-popups`: 팝업 허용 **추가 방어:** - `X-Frame-Options: DENY` 헤더로 자신의 페이지가 iframe에 로드되는 것 방지 - CSP의 `frame-ancest

Question 5

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 6

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

Accepted Answer

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

`, `

Question 7

<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 8

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

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

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 10

Accepted Answer

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

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

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

HTML

01block 요소와 inline 요소의 차이점은 무엇인가요?보통HTML 기초

02localStorage, sessionStorage, Cookie의 차이점을 설명해주세요.보통HTML5

03웹 접근성(Web Accessibility)이란 무엇이며 어떻게 개선할 수 있나요?보통접근성

04iframe의 보안 문제와 sandbox 속성을 설명해주세요.보통보안/성능

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

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

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

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

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

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