HTML & CSS

HTML 기술 면접 예상 질문 📑

yunieyunie 2023. 11. 20. 22:31

1-0. HTML이란?

HTML : Hypertext Markup Language

hypertext : 링크를 포함하는 텍스트

markup language : 구조를 명시하는 언어

HTML : 페이지 내용을 구조화하기 위한 마크업 언어


1-1. <DOCTYPE />의 역할?

DOCTYPE : Document type

HTML의 첫 번째 줄에 위치하며 웹 브라우저에게 문서의 HTML 버전을 알려주는 역할을 한다.

만약 선언하지 않으면 웹 브라우저는 표준 모드(Standards mode) 대신 호환성 모드(Quirks mode)로 전환될 수 있다.

호환성 모드에서는 오래된 브라우저를 위한 호환성을 고려하여 렌더링 과정에서 최신 CSS 레이아웃과 JavaScript 기능 등이 제대로 작동하지 않을 수 있다.


1-2. <meta />의 역할?

meta : '~에 대해서'

메타데이터 : 데이터를 설명하는 데이터

meta태그 : 문서에 대한 정보를 설명하는 태그

e.g. <meta name="author" content="web">


1-3. 시맨틱 태그(Semantic Tag)란?

semantic : 의미론적

semantic tag : 의미가 담긴 태그

e.g. header, footer, main, section

 

시맨틱 태그의 장점

1. 가독성과 접근성이 좋다.

시맨틱 태그를 사용하면 원하는 부분을 빠르게 찾을 수 있기 때문에 여러 사람과 같이 코드를 공유해야 할 때 편리하다.

또한 신체적 장애가 있는 사람들도 원활한 웹 페이지 사용성을 보장할 수 있다.

2. SEO 향상

시맨틱 태그는 웹 페이지 최적화에 도움이 되기 때문에 검색 엔진에게 더 쉽게 눈에 띄게 된다.

이를 통해 웹 사이트의 노출 순위를 높이고 트래픽을 높이는데 도움이 된다.


1-4. DTD(Document Type Definition)란?

DTD : Document Type Definition, 문서 타입 정의

DTD는 문서의 구조를 명확하게 정의함으로써 데이터의 일관성과 정확성을 보장해준다.

HTML5의 DTD는 <!DOCTYPE html> 이다.


1-5. 다국어를 지원하는 사이트 개발 시 고려할 점?

1. UTF-8 사용

euc-kr는 한글, 영어를 제외한 나머지 언어는 깨져서 보일 수 있다.

2. 일관된 사용자 경험

각 언어별로 SEO를 수행하여 일관된 사용자 경험을 제공할 수 있어야 한다.


1-6. HTML4 vs HTML5 차이

1. Semantic Element

기존에는 페이지 구조를 블록 엘리먼트(div)와 인라인 엘리먼트(span)로 표현했다.

주로 다음과 같이 div를 이용해 마크업을 하고 id로 의미를 부여했다.

<div id="header">
    <h1>header</h1>
  </div>

  <div id="menu">
    <ul>
      <li>content</li>
      <li>gallery</li>
      <li>sns</li>
    </ul>
  </div>

 

HTML5에서는 다음과 같이 시맨틱 태그가 들어간 엘리먼트가 사용된다.

이를 통해 좀 더 체계적이고 의미론적인 웹 페이지 구조를 만들 수 있다.

이 때, 페이지를 마크업할 때 요소별로 비슷한 것끼리 그룹화 한 것을 Contents Model이라고 한다.

<header>
    <h1>header</h1>
  </header>

  <nav>
    <ul>
      <li>content</li>
      <li>gallery</li>
      <li>sns</li>
    </ul>
  </nav>

 

2. API

HTML5에는 새로운 API가 포함되어 있고 예를 들면 <audio>, <video>, <canvas> 등이 있다.


1-7. data-로 시작하는 attribute란?

 data-로 시작하는 속성은 사용자 정의 데이터 속성(Custom Data Attribute)이다.

엘리먼트에 추가 정보를 저장할 수 있으며, JavaScript를 통해 쉽게 접근하고 활용할 수 있게 한다.

사용자 정의 데이터 속성을 사용하면 복잡한 JavaScript 코드를 짜지 않고도 HTML 요소에 추가 정보를 저장할 수 있어 유용하다.

<div id="mydiv" data-test="test">Hello World!</div>

 

1-8. SEO(Search Engine Optimization)란?

웹사이트가 검색 엔진의 결과 페이지에서 가능한 높은 순위를 얻을 수 있도록 웹사이트를 최적화하는 과정이다.

웹사이트의 가시성을 높이고 트래픽을 증가시키는데 도움이 된다.

 

SEO는 크게 두 가지 요소로 구분된다.

1. On-page SEO : 웹사이트 내부에서 진행되는 SEO 작업으로 키워드 최적화, 메타 태그 사용, 콘텐츠 품질 향상, URL 구조 개선, 사이트 속도 최적화 등이 포함된다.
2. Off-page SEO : 웹사이트 외부에서 진행되는 SEO 작업으로 백링크 구축, 소셜 미디어 마케팅, 인플루언서 마케팅 등이 포함됩니다.

 

 

저작자표시 비영리 변경금지