doctype이 무엇을 하는 것인가요?

HTML의 버전을 명시하는 태그 입니다.

표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?

브라우저가 출력하고자 하는 문서가 최신이라고 판단하면 표준모드(standard mode)로 렌더링 합니다.
반면 브라우저가 예전문서라고 판단을 하면 쿼크 모드(quirks mode)로 렌더링을 하게 되며 이 모드에서는 이전 세대의 브라우저에 맞는 비표준적 방법의 CSS를 적용합니다.
즉 쿼크모드의 목적은 오래된 웹페이지들이 최신 버전의 브라우저에서 깨져 보이지 않으려는 것에 있습니다.

XML과 XHTML의 다른 점은 무엇인가요

XML은 드라이버 하드웨어, 운영 체제 및 다양한 응용 프로그램 간에 데이터를 전송하도록 설계 된 마크업언어지만 XHTML은 XML의 강점을 HTML과 결함한 언어입니다.

application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?

ie11 하위 버전에서는 XHTML을 제대로 지원하지 않습니다.
XHTML의 XML 기능을 사용하기 위한 필수 요구 조건인 application/xhtml+xml MIME 타입을 인식하지 못합니다.

다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.

지원하는 방법은 크게 3가지 입니다.
첫 번째는 템플릿 페이지를 언어별로 작성하여 보여주는 방법, 두 번째는 data-* 속성을 이용하여 언어별 텍스트를 배열로 만들고 처리하는 방법,
마지막으로 i18n 라이브러리를 사용 하는 방법입니다.

data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?

HTML5에서 새로 추가된 data- 속성은 커스텀 데이터 속성으로, 개발자가 임의로 이름을 붙일 수 있는 속성입니다. data- 속성은 html 태그 상에서 별다른 작용을 하지 않습니다. 자바스크립트가 DOM의 데이터에 접근하거나 서버에서 받아온 데이터를 활용해야 할 때 사용됩니다.

HTML5를 오픈 웹 플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?

시멘틱 마크업, 미디어 핸들링을 위한 내장 플렛폼, application API, 오프라인 핸들러

쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.

쿠키(Cookie), 세션 저장소(sessionStorage), 로컬 저장소(localStorage)는 브라우저에 데이터를 저장하기 위한 공간들입니다.
HTML5 이전에는 쿠키를 주로 사용했습니다. 하지만 쿠키는 많은 양의 데이터를 저장할 수 없고, 동일한 도메인에 페이지를 요청할 때마다 서버로 함께 전송되며, 변조가 쉬워 보안이 취약합니다.
그래서 HTML5부터는 저장소 객체(Storage object)를 정의하고 있습니다.
저장소 객체는 세션 저장소(sesssionStorage)와 로컬 저장소(localStorage) 두 가지가 있습니다.
두 가지 모두 키-값의 형태로 보존되며 string 값으로 저장되기 때문에 실제 Javascript에서 사용하려면 파싱 과정을 거쳐야 합니다.
localStroage에 데이터를 자장하면 창이나 탭을 닫아서 세션이 종료돼도 데이터가 보존됩니다.
반면에 sessionStorage는 페이지 세션이 만료되면 데이터도 파기됩니다.

<script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.

일반적으로 브라우저는 <script> 태그를 만나면 웹 페이지 렌더링을 잠시 중단하고 script를 해석한 후 실행합니다.
따라서 사이즈가 크거나 복잡한 script을 가져올 경우 브라우저가 느려지는 단점이 있습니다.
하지만 async와 defer 키워드를 사용하게 되면 브라우저 렌더링과 동시에 스크립트를 내려받습니다.
여기서 async와 defer의 차이점은 async의 경우 script를 내려받는 즉시 실행하며 defer는 렌더링이 완료된 후 실행합니다.

CSS를 <head></head> 사이에 쓰는 것과 JS<script> 를 <body></body> 뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?

이전 포스트에서 설명했듯이 css 는 head태그 안에, JS는 body 하단에 표시해야합니다. 그 이유는 브라우저가 DOM해석하고 렌더링 하면서 CSS명세를 적용하여 렌더링합니다.
이때 JS를 만나게 되면 렌더링을 잠시 멈추고 JS를 다운 받아실행하게 됩니다. 이러한 성능저하 현상을 줄이기 위해 body 최 하단에 JS를 배치하면 렌더링이 대부분 완료되고
JS를 다운받아 실행하기 때문에 사용자 입장에서 성능 저하를 느낄 수 없게 됩니다.

Progressive rendering이란 무엇인가요?

Progressive rendering은 이름 그대로 가능한 빨리 웹의 컨텐츠를 그리기 위한 기술입니다.
대표적으로 이미지 Lazy-loading과 같은 기술이 있습니다.

이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.

  • html
1
2
3
4
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf">

화면 해상도에 따라서 이미지를 제공하기 위한 속성입니다.
위 코드에서와 같이 1024w는 이미지의 실제사이즈를 의미하며 화면의 width에 따라 브라우저가 각기 다른 이미지를 보여주게 됩니다.