코딩 스쿨 HTML

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ HTML References
HTML References
HTML Tag List
HTML Attributes Reference
HTML Global Attributes
HTML Browser Support
HTML Events
HTML Doctypes
HTML Character Sets
HTML Lang Codes
HTTP Messages
Keyboard Shortcuts
HTML Interview Prep
HTML Bootcamp
HTML Certificate
HTML Accessibility

HTML Interview Prep

1. HTML 기초 질문

1.1 HTML이란?

질문: HTML이란 무엇인가요?

답변: HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어입니다. HTML은 텍스트, 이미지, 링크, 비디오 등을 웹 페이지에 표시하고, 브라우저가 콘텐츠를 렌더링할 수 있도록 돕습니다. HTML은 웹의 근간을 이루며, 다른 기술들과 함께 웹 페이지를 구축하는 데 사용됩니다.

1.2 HTML5의 주요 기능은 무엇인가요?

질문: HTML5에서 도입된 주요 기능은 무엇인가요?

답변: HTML5는 이전 버전과 비교하여 많은 새로운 기능과 개선 사항을 포함하고 있습니다. 그 중 몇 가지 주요 기능은 다음과 같습니다:

  • 시맨틱 태그: <article>, <section>, <header>, <footer> 등 새로운 시맨틱 태그는 문서의 의미를 명확히 하고 구조를 개선합니다.
  • 멀티미디어 지원: <video>, <audio> 태그를 사용하여 외부 플러그인 없이 미디어 콘텐츠를 웹 페이지에 쉽게 삽입할 수 있습니다.
  • 폼 입력 개선: required, placeholder, email, number 같은 새로운 폼 속성을 통해 입력 검증과 사용자 경험을 개선할 수 있습니다.
  • 웹 스토리지: localStorage와 sessionStorage를 사용하여 브라우저 내에서 데이터를 저장할 수 있습니다.
  • 캔버스: <canvas> 태그는 2D 그래픽과 애니메이션을 HTML 페이지 내에서 그릴 수 있게 해줍니다.

1.3 HTML 문서의 기본 구조는 무엇인가요?

질문: HTML 문서의 기본 구조를 설명해주세요.

답변: HTML 문서는 <!DOCTYPE html> 선언으로 시작하며, 그 아래로 <html>, <head>, <body> 태그로 구성됩니다. 문서의 기본 구조는 다음과 같습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
  • <!DOCTYPE html>: HTML5 문서임을 선언합니다.
  • <html>: 문서의 루트 요소입니다.
  • <head>: 메타데이터, 스타일시트, 외부 파일 링크 등을 포함합니다.
  • <body>: 실제 웹 페이지의 콘텐츠를 포함하는 부분입니다.

2. HTML 고급 질문

2.1 시맨틱 태그란 무엇이며, 왜 중요한가요?

질문: 시맨틱 태그란 무엇이며, 왜 중요한가요?

답변: 시맨틱 태그는 태그 자체만으로 콘텐츠의 의미를 전달하는 HTML 요소를 말합니다. 예를 들어, <header>, <footer>, <article>, <section> 같은 태그는 콘텐츠의 구조와 의미를 보다 명확하게 합니다. 시맨틱 태그는 SEO 최적화에 도움을 주며, 웹 접근성을 높여 보조 기술(예: 스크린 리더)이 문서 구조를 이해하기 쉽게 만듭니다.

2.2 alt 속성은 왜 중요한가요?

질문: 이미지 태그의 alt 속성은 왜 중요한가요?

답변: alt 속성은 이미지가 로드되지 않거나, 시각 장애가 있는 사용자가 스크린 리더를 사용하는 경우 이미지를 설명하는 대체 텍스트를 제공합니다. 이는 웹 접근성을 높이는 데 매우 중요한 역할을 하며, SEO에도 긍정적인 영향을 미칩니다.

<img src="logo.png" alt="Company Logo">

2.3 HTML에서 블록 레벨 요소와 인라인 요소의 차이점은 무엇인가요?

질문: HTML에서 블록 레벨 요소와 인라인 요소의 차이점은 무엇인가요?

답변:

  • 블록 레벨 요소는 문서의 전체 너비를 차지하며, 항상 새로운 줄에서 시작됩니다. 예시로는 <div>, <p>, <h1>, <section> 등이 있습니다.
  • 인라인 요소는 문서의 한 줄 내에 다른 콘텐츠와 함께 표시되며, 자체적으로 너비를 차지하지 않습니다. 예시로는 <span>, <a>, <img> 등이 있습니다.

2.4 meta 태그의 역할은 무엇인가요?

질문: HTML의 meta 태그는 어떤 역할을 하나요?

답변: meta 태그는 웹 페이지에 대한 메타데이터(정보)를 정의하는 역할을 합니다. 브라우저와 검색 엔진은 이 정보를 사용하여 페이지를 처리합니다. 일반적인 meta 태그의 속성으로는 charset(문자 인코딩), viewport(화면 크기), description(페이지 설명) 등이 있습니다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is an HTML bootcamp.">

2.5 iframe 태그는 무엇에 사용되나요?

질문: iframe 태그는 무엇에 사용되나요?

답변: iframe 태그는 다른 HTML 문서나 외부 콘텐츠(예: 비디오, 광고)를 현재 웹 페이지에 삽입하는 데 사용됩니다. 이를 통해 별도의 웹 페이지나 외부 서비스를 동일한 페이지 내에서 표시할 수 있습니다.

<iframe src="<https://www.example.com>" width="600" height="400"></iframe>

3. HTML 폼 관련 질문

3.1 HTML에서 폼이란 무엇인가요?

질문: HTML 폼이란 무엇이며, 그 목적은 무엇인가요?

답변: HTML 폼은 사용자로부터 입력을 받아 서버에 데이터를 전송하는 데 사용됩니다. 폼은 다양한 입력 필드(텍스트, 비밀번호, 라디오 버튼 등)로 구성되며, 서버로 제출될 때 폼 데이터가 POST 또는 GET 메서드를 통해 전달됩니다.

<form action="/submit" method="POST">
    <input type="text" name="username" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

3.2 action과 method 속성의 차이점은 무엇인가요?

질문: HTML 폼에서 action과 method 속성의 차이점은 무엇인가요?

답변:

  • action 속성은 폼 데이터를 처리할 서버의 URL을 지정합니다.
  • method 속성은 데이터를 제출할 HTTP 메서드를 지정하며, GET과 POST가 일반적으로 사용됩니다.
    • GET: 데이터가 URL에 쿼리 문자열로 포함되어 전송됩니다.
    • POST: 데이터가 요청 본문에 포함되어 전송됩니다.

4. SEO와 HTML 관련 질문

4.1 SEO에 중요한 HTML 요소는 무엇인가요?

질문: SEO(검색 엔진 최적화)에 중요한 HTML 요소는 무엇인가요?

답변: SEO에 중요한 HTML 요소는 다음과 같습니다:

  • <title> 태그: 페이지 제목을 설정하며, 검색 결과에 표시됩니다.
  • <meta> 태그의 description: 페이지의 설명을 제공하여 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 돕습니다.
  • 시맨틱 태그: <header>, <article>, <section>과 같은 시맨틱 태그를 사용하여 콘텐츠 구조를 명확히 하면, 검색 엔진이 페이지를 더 잘 이해합니다.
  • alt 속성: 이미지에 대한 대체 텍스트를 제공하여 이미지 콘텐츠가 검색 엔진에 의해 인덱싱될 수 있게 합니다.

5. 추가 질문 및 답변

5.1 defer와 async 스크립트 로딩의 차이점은?

답변 (계속):

  • async: 스크립트는 비동기적으로 로드되며, 문서 파싱이 끝나기 전에 스크립트가 실행될 수 있습니다. 스크립트 간의 순서는 보장되지 않습니다.
<script src="script.js" async></script>  <!-- 비동기적으로 실행 -->
<script src="script.js" defer></script>  <!-- 문서 파싱 완료 후 실행 -->

5.2 localStorage와 sessionStorage의 차이점은 무엇인가요?

질문: localStorage와 sessionStorage의 차이점은 무엇인가요?

답변:

  • localStorage: 브라우저에 영구적으로 데이터를 저장하며, 브라우저를 닫아도 데이터가 남아 있습니다. 페이지를 새로고침하거나 탭을 닫고 다시 열어도 데이터는 유지됩니다.
  • sessionStorage: 세션이 지속되는 동안(탭이 열려 있는 동안) 데이터를 저장합니다. 브라우저 탭이 닫히면 데이터가 삭제됩니다.
// localStorage 사용 예시
localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name'));  // John

// sessionStorage 사용 예시
sessionStorage.setItem('sessionName', 'Jane');
console.log(sessionStorage.getItem('sessionName'));  // Jane

5.3 HTML에서 button 요소와 input 요소의 차이점은 무엇인가요?

질문: button 태그와 input 태그의 차이점은 무엇인가요?

답변:

  • <button>: 더 다양한 콘텐츠를 포함할 수 있으며, HTML 요소를 중첩할 수 있습니다. 예를 들어, 텍스트뿐만 아니라 이미지나 아이콘을 추가할 수 있습니다.
<button type="submit">Submit</button>
  • <input>: 주로 단일 입력 요소로 사용되며, type="submit", type="reset" 등의 속성을 사용하여 버튼 역할을 수행할 수 있습니다.
<input type="submit" value="Submit">

5.4 HTML에서 canvas와 svg의 차이점은 무엇인가요?

질문: HTML에서 그래픽을 표현할 때 사용하는 canvas와 svg의 차이점은 무엇인가요?

답변:

  • <canvas>: 픽셀 기반의 비트맵 그래픽을 그리는 데 사용됩니다. 실시간 렌더링에 유리하지만, 해상도에 따라 품질이 떨어질 수 있으며, HTML 구조의 일부로서 직접적으로 접근할 수 없습니다.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 150, 75);
</script>
  • <svg>: 벡터 기반 그래픽으로, 크기를 조정해도 품질이 유지되며 HTML 문서의 일부분으로 DOM에서 직접 접근할 수 있습니다. 애니메이션과 스타일 적용도 가능합니다.
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

5.5 progress 태그는 무엇에 사용되나요?

질문: HTML5에서 progress 태그는 어떤 목적으로 사용되나요?

답변: progress 태그는 작업의 진행 상황을 시각적으로 나타내는 데 사용됩니다. 이 태그는 프로세스의 완료 정도(예: 파일 다운로드, 업로드 진행 상태)를 보여줄 수 있습니다.

<progress value="70" max="100">70%</progress>
  • value: 진행 상황을 나타내는 숫자.
  • max: 진행 상황의 최대 값(기본값은 1).

6. 웹 접근성과 HTML

6.1 웹 접근성이란 무엇이며, 어떻게 구현할 수 있나요?

질문: 웹 접근성이란 무엇인가요? 그리고 HTML을 통해 웹 접근성을 어떻게 구현할 수 있나요?

답변: 웹 접근성은 장애가 있는 사용자도 웹 사이트를 문제없이 사용할 수 있도록 만드는 것을 의미합니다. HTML을 통해 웹 접근성을 개선하려면 다음과 같은 방법이 있습니다:

  • alt 속성: 이미지 태그에서 대체 텍스트를 제공하여 시각 장애가 있는 사용자가 스크린 리더를 통해 이미지를 이해할 수 있도록 합니다.
<img src="image.jpg" alt="Descriptive text for image">
  • 시맨틱 태그 사용: HTML5 시맨틱 태그(<header>, <nav>, <footer>, <section>, <article> 등)를 사용하여 문서 구조를 명확하게 만들어 스크린 리더가 문서 구조를 잘 이해할 수 있게 합니다.
  • aria-* 속성: ARIA(Accessible Rich Internet Applications) 속성을 사용하여 동적 콘텐츠나 복잡한 UI 컴포넌트에 추가적인 설명을 제공합니다.
<button aria-label="Submit form">Submit</button>

6.2 aria-label과 aria-labelledby의 차이점은 무엇인가요?

질문: ARIA 속성에서 aria-label과 aria-labelledby의 차이점은 무엇인가요?

답변:

  • aria-label: 직접 요소의 접근성 이름을 지정합니다. 요소에 대해 스크린 리더가 읽어줄 텍스트를 설정하는 데 사용됩니다.
<button aria-label="Play">Play</button>
  • aria-labelledby: 다른 요소의 ID를 참조하여 그 요소를 레이블로 사용합니다. 여러 요소에 대한 레이블링을 더 정확하게 설정할 수 있습니다.
<label id="label1">Name</label>
<input type="text" aria-labelledby="label1">

7. 성능과 SEO 관련 질문

7.1 defer와 async를 사용하여 스크립트를 로드할 때 성능상의 이점은 무엇인가요?

질문: HTML에서 스크립트를 로드할 때 defer와 async 속성을 사용함으로써 성능을 어떻게 최적화할 수 있나요?

답변:

  • defer: 스크립트를 비동기적으로 로드하되, HTML 문서의 파싱이 완료된 후에 스크립트가 실행됩니다. 여러 스크립트가 있을 경우, 스크립트는 문서에 나타나는 순서대로 실행됩니다. 이렇게 하면 스크립트 로드가 페이지 로딩 속도를 저해하지 않으면서도 순서대로 실행됩니다.
  • async: 스크립트는 비동기적으로 로드되며, 문서 파싱이 끝나기 전에 스크립트가 로드될 수 있습니다. 다만 스크립트 간의 실행 순서는 보장되지 않습니다. 이 방법은 페이지 로드 속도를 최적화하지만, 스크립트 간 의존성이 없는 경우에 적합합니다.

7.2 메타 태그에서 viewport 설정은 무엇을 의미하나요?

질문: 메타 태그에서 viewport 설정은 어떤 역할을 하나요?

답변: viewport 메타 태그는 웹 페이지가 모바일 기기에서 어떻게 표시될지 제어합니다. 주로 반응형 웹 디자인을 구현하기 위해 사용됩니다. 가장 일반적인 설정은 다음과 같습니다:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: 디바이스 화면의 너비에 맞춰 페이지를 조정합니다.
  • initial-scale=1.0: 페이지의 초기 확대/축소 비율을 설정합니다.

이 설정을 통해 웹 페이지가 모바일 장치에서 올바르게 표시되고, 가독성을 높일 수 있습니다.

7.3 SEO를 위한 meta description 태그의 역할은 무엇인가요?

답변 :

meta description 태그는 검색 엔진에서 페이지의 요약본으로 사용되며, 사용자들이 검색 결과 페이지에서 클릭할지를 결정하는 중요한 역할을 합니다. 따라서 키워드를 포함한 명확하고 매력적인 설명을 작성하는 것이 중요합니다.

<meta name="description" content="Learn the fundamentals of HTML, CSS, and JavaScript in this comprehensive bootcamp.">
  • 이 태그는 검색 엔진이 페이지의 내용을 더 잘 이해하고, 검색 순위를 결정하는 데 도움을 줍니다.

8. HTML5 API 관련 질문

8.1 HTML5에서 localStorage와 sessionStorage의 주요 차이점은 무엇인가요?

질문: HTML5에서 localStorage와 sessionStorage의 주요 차이점은 무엇인가요?

답변:

  • localStorage: 데이터를 영구적으로 저장하며, 브라우저가 닫힌 후에도 데이터가 유지됩니다. 페이지 새로고침이나 브라우저를 종료해도 데이터는 남아 있습니다.
  • sessionStorage: 브라우저 세션 동안만 데이터를 저장하며, 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다. 탭을 닫거나 새로 열면 데이터는 더 이상 유효하지 않습니다.
// localStorage 예시
localStorage.setItem('name', 'John Doe');
console.log(localStorage.getItem('name'));  // "John Doe"

// sessionStorage 예시
sessionStorage.setItem('name', 'Jane Doe');
console.log(sessionStorage.getItem('name'));  // "Jane Doe"

8.2 geolocation API는 무엇에 사용되나요?

질문: HTML5의 geolocation API는 무엇에 사용되며, 간단한 사용 예를 보여주세요.

답변:

HTML5의 geolocation API는 사용자의 위치 정보를 수집하는 데 사용됩니다. 웹 페이지에서 이 API를 사용하여 사용자 위치 기반 서비스를 제공할 수 있습니다. 사용자의 동의를 받아 GPS 좌표(위도, 경도)를 제공하며, 이를 통해 지도에 위치를 표시하거나 사용자 위치를 기반으로 한 콘텐츠를 제공합니다.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log("Latitude: " + position.coords.latitude);
        console.log("Longitude: " + position.coords.longitude);
    });
} else {
    console.log("Geolocation is not supported by this browser.");
}

8.3 HTML5의 drag and drop API란 무엇이며, 사용 예시는 무엇인가요?

질문: HTML5의 drag and drop API란 무엇이며, 간단한 예시를 보여주세요.

답변:

HTML5의 drag and drop API는 사용자가 요소를 드래그하여 다른 위치로 드롭할 수 있게 해주는 기능을 제공합니다. 주로 파일 업로드 인터페이스나 사용자 인터페이스에서 요소를 이동할 때 사용됩니다.

<div id="drag1" draggable="true" ondragstart="drag(event)" style="width:100px; height:100px; background-color:blue;"></div>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:200px; height:200px; background-color:lightgray;"></div>

<script>
function allowDrop(event) {
    event.preventDefault();
}

function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    event.target.appendChild(document.getElementById(data));
}
</script>
  • draggable: 요소가 드래그 가능한 상태임을 지정합니다.
  • ondragstart: 드래그가 시작될 때 호출되는 이벤트입니다.
  • ondrop: 드롭 위치에서 요소가 놓여질 때 호출됩니다.

9. HTML 폼 및 유효성 검사

9.1 HTML5의 폼 유효성 검사는 어떻게 이루어지나요?

질문: HTML5에서 제공하는 폼 유효성 검사는 어떻게 작동하나요?

답변:

HTML5는 기본적으로 폼 유효성 검사를 지원합니다. <input> 태그에 특정 속성을 추가하여 입력 값을 제한하거나 검증할 수 있습니다. 자주 사용되는 유효성 검사 속성으로는 required, pattern, min, max, maxlength 등이 있습니다.

<form>
  <input type="text" required placeholder="Required field">
  <input type="email" placeholder="Enter a valid email">
  <input type="number" min="10" max="100" placeholder="Enter a number between 10 and 100">
  <button type="submit">Submit</button>
</form>
  • required: 필수 입력 필드로 설정하며, 값이 없으면 폼 제출이 불가능합니다.
  • pattern: 정규 표현식을 사용하여 입력 형식을 검증합니다.
  • min 및 max: 숫자 입력의 최소값과 최대값을 설정합니다.

9.2 HTML에서 input 요소의 pattern 속성은 무엇을 하는가요?

질문: input 요소에서 pattern 속성은 무엇에 사용되며, 예시는 무엇인가요?

답변:

HTML5의 pattern 속성은 정규 표현식을 사용하여 사용자가 입력한 값이 특정 형식을 따르는지 검증합니다. 예를 들어, 전화번호나 우편번호와 같은 고유한 패턴을 가진 데이터를 입력할 때 사용됩니다.

<form>
  <label for="phone">Phone Number:</label>
  <input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
  <button type="submit">Submit</button>
</form>
  • 위 예시에서 pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"는 3자리 숫자, 하이픈, 3자리 숫자, 하이픈, 그리고 4자리 숫자의 형식을 요구하는 패턴입니다. 사용자가 이 형식에 맞게 입력하지 않으면 브라우저에서 유효성 검사 오류 메시지를 표시합니다.

10. HTML SEO 관련 추가 질문

10.1 canonical 링크 태그는 무엇이며, SEO에 어떻게 도움을 주나요?

질문: rel="canonical" 태그는 무엇이며, SEO에 어떻게 도움이 되나요?

답변:

<link rel="canonical"> 태그는 검색 엔진에 특정 페이지가 "원본" 콘텐츠임을 알려줍니다. 이는 동일한 콘텐츠가 여러 URL에서 제공될 때, 검색 엔진이 어느 페이지를 인덱싱해야 하는지 결정하는 데 도움을 줍니다. 중복 콘텐츠 문제를 해결하고 SEO 순위를 높이는 데 유용합니다.

<link rel="canonical" href="<https://www.example.com/original-page>">
  • 이를 통해 검색 엔진은 다른 URL이 아닌 "canonical"로 설정된 페이지를 우선적으로 검색 결과에 표시하게 됩니다.

10.2 HTML에서 hreflang 속성의 역할은 무엇인가요?

질문: HTML의 링크 태그에서 hreflang 속성은 어떤 역할을 하나요?

답변:

hreflang 속성은 페이지의 언어와 해당 지역을 검색 엔진에 알려줍니다. 다국어 사이트에서 각 페이지의 언어를 명확히 지정하여 사용자가 적절한 언어로 된 페이지를 볼 수 있게 도와줍니다.

<link rel="alternate" href="<https://www.example.com/en-us>" hreflang="en-us">
<link rel="alternate" href="<https://www.example.com/ko>" hreflang="ko">
  • hreflang="en-us": 이 속성은 해당 페이지가 미국 영어 버전임을 나타냅니다.
  • hreflang="ko": 이 속성은 해당 페이지가 한국어 버전임을 나타냅니다.
copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com