HTML

doctype이 무엇을 하는 것인가요?
표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
XML과 XHTML의 다른 점은 무엇인가요
XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?
다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.
data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?
HTML5를 오픈 웹 플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
<script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.
CSS<link>를 <head></head>사이에 쓰는 것과 JS<script>를 <body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?
Progressive rendering이란 무엇인가요?
이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.
HTML templating language를 사용해 본 경험이 있나요?

쿠키와 세션 스토리지, 로컬 스토리지의 차이
모두 브라우저에서 데이터 저장소의 역할을 하는 것들이다.
반복되는 작업을 계속 하게 되는 것이 비효율적이고, 이를 보완하기 위해 쿠키를 서버와 클라이언트에 생성해서 토큰 발급 없이 쿠키만 가지고 서버에 요청을 할 수 있게 된다. 쿠키는 저장 공간이 4KB로 작은 편인데 이러한 단점을 보완하여 만든 것이 웹 스토리지이다.
웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있는데 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면 데이터가 사라진다. 웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다.
웹 스토리지는 반면 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.

자동 로그인 -> 로컬스토리지
입력 폼 정보 -> 세션스토리지
비로그인 장바구니 -> 세션스토리지
다시 보지 않음 팝업 창 -> 쿠키

프로그레시브 렌더링(Progressive Rendering)
- 컨텐츠를 가능한 빨리 표시하기 위해 성능을 향상시키는 기술이다. 인터넷 속도가 느리거나 불안정한 모바일 환경이 아직 많이 남아있기 때문에 이럴 때 유용하게 사용한다.
- 대표적으로 레이지 로딩이 있다. 이미지를 한 번에 로드하는 것이 아니라, 자바스크립트를 통해 사용자가 표시하려는 부분만 스크롤 시에 이미지를 로드하는 것이다.

다국어 페이지는 어떤 방식으로 제공하나요?
SSR의 경우 HTTP 요청 시 클라이언트에서 Accept-Language 헤더와 같이 기본 언어 설정에 대한 정보를 보낸다. 서버는 이 정보를 사용해 해당 언어로 된 문서 버전을 반환한다. 반환된 문서는 lang 속성을 선언한다. CSR 시 클라이언트 사이드에서 해당 언어 팩(JSON등)을 가져와 출력한다.

SEO(검색 엔진 최적화)는 무엇인가요?
- 검색 엔진 최적화란 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 작업을 말한다.
- SPA를 개발하는 경우 여러 가지 이점이 있음에도 불구하고 SEO가 잘 되지 않는다는 약점이 있다. 따라서 정보 제공을 목적으로하는 웹 페이지는 SPA 방식이 불리할 수 있으며, React나 Angular 같은 프레임워크는 서버 렌더링을 통해 SEO에 대응할 수 있는 기술을 지원하므로 선별적으로 사용하면 된다.

<section>과 <article>의 차이
section은 보통 비슷한 특성의 컨텐츠를 담는 구역을 설정할 때 사용한다. 예를 들어, header, footer 사이에 sidebar나 content를 담는 식이다.

article은 관련성이 없고 독립적인 내용들을 담을 때 사용한다. 예를 들어, section 안에서 서로 다른 기사들을 나열해야 할 때 각각의 기사를 article로 담는 식이다.

HTML5 tag
모든 HTML 문서는 <!DOCTYPE> 선언으로 시작한다. HTML5의 경우 <!DOCTYPE html> 이런 식으로 말이다. 이 선언은 태그는 아니지만 브라우저가 어떤 타입을 받아들여야 할지를 알려주는 정보이다.
여러가지 태그가 있는데 주요한 것들 위주로 살펴보면, HTML5의 필수 태그는 html, head, body 등이 있다. html 태그는 HTML문서의 가장 최상단에 위치하는 태그이며, head 태그에는 style, script, title, link, meta 태그 등이 들어다. body 태그는 HTML 문서의 내용이 들어간다.

meta 태그
meta 태그는 head 부분에서 다른 태그들(script, style, link, title 등)로 나타낼 수 없는 메타데이터를 나타내는 태그를 의미한다. <meta name="keywords" content="ABC"> 와 같이 검색 엔진을 위한 키워드나 <meta name="description" content="OWEN">과 같이 문서에 대한 설명 등에 사용된다. 화면에는 별다르게 표시되는 내용이 없지만, 검색 엔진이나
브라우저에서 읽힌다.

Sementic tag
개발자와 브라우저에게 의미있는 태그를 제공하는 것을 의미한다. 예를 들어 <div> 태그는 non-sementic 태그이고, <table>, <article>은 sementic 태그에 속한다. 시멘틱 태그는 태그만 보고 대략적으로 들어갈 내용을 유추할 수 있다는 장점이 있다. 헤더와 푸터를 설정할 때 <div id="header"></div> 와 같이 했던 것을 <header> 하나로 깔끔
하게 정리할 수 있다.

저작자표시 비영리 변경금지 (새창열림)

'📰 CS 준비 > HTML, CSS' 카테고리의 다른 글

CSS (0)	2021.10.30

winnih_B

LINKS

CATEGORY

HTML

'📰 CS 준비 > HTML, CSS' 카테고리의 다른 글

티스토리툴바

HTML

'📰 CS 준비 > HTML, CSS' 카테고리의 다른 글

'📰 CS 준비/HTML, CSS' Related Articles

티스토리툴바