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

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

Accepted Answer

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

`, `

`~`

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

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

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

Question 4

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 5

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

Accepted Answer

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

Question 6

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

Accepted Answer

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

이메일

클릭 가능한 요소

``` - 시맨틱

Question 7

Web Components란 무엇인가요?

Accepted Answer

Web Components는 재사용 가능한 커스텀 HTML 요소를 만들기 위한 웹 표준 기술의 모음입니다. **3가지 핵심 기술:** 1. **Custom Elements**: 새로운 HTML 태그를 정의 2. **Shadow DOM**: 캡슐화된 DOM 트리를 생성 3. **HTML Templates**: 재사용 가능한 마크업 템플릿 ```javascript class MyCard extends HTMLElement { constructor() { super(); // Shadow DOM 생성 const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = \`

Question 8

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 9

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 10

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

HTML

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

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

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

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

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

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

07Web Components란 무엇인가요?어려움HTML5

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

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

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