웹 개발/HTML & CSS

HTML 관련 알아야할 내용 (면접 질문) 정리하기

쫑인스 2022. 2. 12. 05:13

포스팅 목적

HTML 과 관련된 면접 질문들을 알아보고 이해한 만큼의 답안을 작성합니다. 계속해서 업데이트 됩니다.

 

질문 목록

HTML 버전을 확인하는 방법 / DOCTYPE 의 역할
더보기

한줄 요약

<!DOCTYPE html> 일 경우 HTML5 이며  HTML 을 랜더링하는 방식을 지정하기 위해 사용합니다.

 

내용

doctype 은 html 문서의 형식을 구분하여 어떻게 랜더링을 할지 명시하기 위해 사용합니다. 표준이 제정되기 이전에 개발된 오래된 웹 페이지들도 랜더링이 필요합니다.

HTML4, XHTML 등을 지원하는 호환 모드 (quirks mode) 와 HTML5 를 지원하는 표준 모드 (standard mode) 가 있습니다. <!DOCTYPE html> 으로 사용할 경우 표준모드의 HTML5 로 랜더링 됩니다.

 

참고 자료

 

사용자 선호 언어를 아는 방법과 제공하는 방법 / 다국어 사이트 개발시 주의점
더보기

한줄 요약

HTTP 헤더에 포함되어 있는 Accept-Language 속성에 클라이언트 선호 언어가 표시됩니다. 언어를 제공할 때는 HTML 의 lang 속성을 사용합니다.

 

내용

다국어 사이트 개발시 주의점

  • 텍스트를 포함한 이미지 지양
  • 단어/문장 길이가 다른 것에 대한 디자인 고려
  • 문화별 색상 차이
  • 날짜와 통화 형식
  • 번역된 문자열 연결 지양 ( ex. “오늘의 날짜는” + date + “입니다.” )
  • 언어를 읽는 방향

관련 용어

  • i18n : internationalization 국제화
  • l10n : localization 현지화

 

참고 자료

 

data-속성의 특징
더보기

한줄 요약

사용자에게 보이지 않게 DOM 자체에 데이터를 저장할 수 있습니다.

 

내용

장점

  • 사용자에게 보이지 않게 DOM 자체에 데이터를 저장할 수 있습니다.
  • dataset 객체를 통해 자동으로 변환되어 JavaScript 나 CSS 에서 접근하기 편리합니다.

단점

  • 검색 크롤러가 속성의 값을 찾지 못합니다.
  • IE 10 이하의 버전은 지원하지 않습니다.
  • JavaScript 저장소와 비교하여 성능이 낮습니다.
  • 사용자가 쉽게 변경할 수 있습니다.

 

참고 자료

 

HTML5 의 변경사항
더보기

한줄 요약

명확한 의미를 전달할 수 있는 시멘틱 태그와 멀티미디어, 그래픽 요소가 추가되었습니다.

 

내용

HTML5에서 추가된 요소 및 타입

  • 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • 멀티미디어 요소 : <video>, <audio>
  • 그래픽 요소 : <canvas>, <svg>
  • input 요소의 타입 : number, date, time, calendar, range

 

HTML5에서 추가된 자바스크립트 API

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events

 

참고 자료

 

<script>, <script async>, <script defer> 의 차이점
더보기

한줄 요약

script 를 다운로드하고 실행할 때는 HTML 을 파싱을 멈춥니다. script 의 특징에 따라 다른 방식으로 호출하여 사용자가 기다리는 시간을 최소화할 수 있습니다.

 

내용

<script> 를 <body> 맨 아래에서 호출하는 이유

  • 브라우저는 script 태그를 만났을 때 DOM 생성을 멈추기 때문에 script 아래에 있는 DOM 요소에 접근할 수 없습니다.
  • script 를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없습니다.
  • HTML 문서가 클 경우 script 를 다운로드하고 실행하는데까지 시간이 너무 오래 걸린다는 단점이 있습니다.

 

<script defer>

  • HTML 파싱과 병렬적으로 script 를 다운로드 하고 HTML 파싱이 끝난 후에 실행됩니다.
  • defer 을 사용하지 않을 때에 비해서 script 를 다운로드하는 시간을 줄일 수 있습니다.

 

<script async>

  • HTML 파싱과 병렬적으로 script 를 다운로드하고 즉시 실행됩니다. ( load-first order )
  • 다른 스크립트를 기다리지 않고 실행되기 때문에 실행 순서를 특정할 수 없습니다.
  • 스크립트가 페이지의 다른 스크립트들과 독립적인 경우 사용합니다. ( ex. 광고, 방문자 수 카운트, Google Analytics 등 )
  • 동적으로 추가하는 script 들도 async 와 같이 동작합니다.

 

참고 자료

 

CSS <link> 태그를 <head></head> 태그 사이에 위치시키는 이유
더보기

한줄 요약

CSS 를 head 안에 위치 시킬 경우 점진적으로 렌더링되기 때문에 문서 맨 아래 두었을 때에 비해 UX 가 향상됩니다.

 

내용

<head> 안에 <link>를 넣는 이유

페이지가 처음 로드되면 HTML과 CSS가 동시에 파싱됩니다. HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM (CSS Object Model)을 만듭니다. 두 가지 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 "first meaningful paint"를 가능하게 합니다. 

 

CSS 를 하단에서 로드할 경우

  • 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리지 않아도 되도록 렌더링을 차단합니다.
  • 스타일링되지 않은 페이지가 잠깐 보일 수 있습니다.

 

FOUC ( Flash Of Unstyled Content ) 란?

  • CSS가 적용되지 않은내용이 잠깐 보이는 현상입니다.

 

참고 자료

 

이미지 태그에 srcset 속성을 사용하는 이유
더보기

한줄 요약

화면 크기에 따라 선택적으로 다른 크기나 해상도를 가진 이미지를 제공할 수 있습니다.

 

참고 자료

 

참고 자료

 

추가 예정 자료

 

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

'웹 개발 > HTML & CSS' 카테고리의 다른 글

[HTML] 시맨틱 태그의 장점과 태그별 사용 방법  (0) 2022.02.27

'웹 개발/HTML & CSS'의 다른글

  • 현재글HTML 관련 알아야할 내용 (면접 질문) 정리하기

관련글

댓글

티스토리툴바