- http://www.thatjsdude.com/interview/html.html 페이지를 번역한 글입니다.
- Translated by Do Junggeun (도정근)
HTML
HTML에 관련된 인터뷰 질문들
인터뷰어에게 깊은 인상을 주기 위한 HTML 지식을 알고 싶은 자바스크립트 개발자를 위해.
2014년 1월 1일 작성됨.
1. doctype
Question: doctype이 무엇인가요? 왜 이게 필요한가요?
Answer: doctype은 브라우저에게 html 문서의 버전에 대한 정보와 함께 브라우저가 문서를 어떻게 렌더링하면 되는지 알리기 위한 지침입니다.
doctype은 대부분의 브라우저에서 엘리먼트가 페이지에 어떻게 표시될지를 보장합니다. 또한 브라우저의 작업을 더 쉽게 만듭니다. doctype이 없으면 브라우저는 추측하고 quirks mode(비표준 모드)로 전환됩니다. 또 markup을 검증하기 위해서도 doctype이 필수적입니다.
<!DOCTYPE html>
<meta charset="UTF-8">extra: 이것은 html 파일의 첫 번째 태그입니다. 닫는 태그는 필요없고 대소문자도 상관없습니다.
ref: don't forget doctype, Sparse vs Dense Array
2. data-*
Question: data- 속성은 어디에 쓰이나요?
Answer: 추가적인 데이터(정보)를 DOM에 저장할 수 있습니다. 포함된 private data로 유요한 html을 작성할 수 있습니다. 자바스크립트를 이용하여 data 속성에 쉽게 접근할 수 있고 kockout과 같은 많은 라이브러리가 이를 이용합니다.
<div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>ref: MDN: data-*, use data attribute
3. keygen
Question: html에서 어떻게 public key(공개 키)를 생성할 수 있나요?
Answer:html은 form을 통해 키 생성 및 전송을 용이하게 해주는 keygen 엘리먼트를 갖고있습니다.
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">extra: keygen은 form 내에서 사용되어야 합니다.
ref: MDN: keygen
4. bdo
Question: 어떻게 html 텍스트의 방향을 바꿀 수 있나요?
Answer: html의 bdo(bidirectional override) element를 사용하세요.
<!-- Switch text direction -->
<p><bdo dir="rtl">This text will go right to left.</bdo></p>extra: rtl은 right to left를 의미합니다. ltr(left to right)도 사용할 수 있습니다.
5. mark
Question: html 내의 텍스트를 어떻게 highlight 할 수 있나요?
Answer: mark 엘리먼트를 사용하세요.
<p>Some part of this paragraph is <mark>highlighted</mark> by using mark element.</p>6. scoped
Question: CSS를 html 문서의 일부에만 적용할 수 있나요?
Answer: 네. style 태그 안에서 "scopped"를 사용하면 됩니다.
ref MDN: style
7. http request
Question: 아래의 코드는 페이지가 로드될 때 http 요청을 시행하나요?
<img src="mypic.jpg" style="visibility: hidden" alt="My photo">Answer: 네
<div style="display: none;">
<img src="mypic.jpg" alt="My photo">
</div>Answer: 네
ref: David Shariff: quiz
8. download order
Question: style2.css를 가져오려면 style1.css의 다운로드가 완료되어야 하나요?
<head>
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">
</head>Answer: 아니요.
Question: Paragraph 1이 페이지에 렌더링되기 전에 style2.css의 다운로드가 완료되어야 하나요?
<head>
<link href="style1.css" rel="stylesheet">
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<link href="style2.css" rel="stylesheet">
</body>Answer: 네
ref: David Shariff: quiz
9. self closing tag
Question: 닫는 태그가 필수적이지 않은 태그는 무엇이 있나요? 왜 닫는 태그를 생략하나요?
Answer: p, li, td, tr, th, html, body 등. 이런 태그에는 닫는 태그를 작성할 필요가 없습니다. 브라우저가 새 태그를 만나면 자동으로 이전 태그를 닫습니다. 그러나 우리는 이런 상황을 피하기 위해 노력해야 합니다.
reason: HTML 파일에 다운로드 해야하는 byte를 절약할 수 있습니다.
<p>Some text
<p>Some more text
<ul>
<li>A list item
<li>Another list item
</ul>위의 html은 아래와 같이 해석됩니다..
<p>Some text</p>
<p>Some more text</p>
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>ref: W3.org: index of elements
전통적인 질문들 : Old School questions
10. span vs div
Question: span 태그와 div 태그는 어떤 차이가 있나요?
Answer: div는 block element이고 span은 inline element입니다.
Extra: inline elemnet 안에 block element를 작성할 수는 없습니다. div는 p태그를 포함할 수 있고, p 태그는 span 태그를 포함할 수 있습니다.그러나 span 태그는 div나 p 태그를 포함할 수 없습니다.
ref: Stackoverflow: div vs span
11. div, section & article
Question: section, article, div 태그는 각각 언제 사용하나요?
Answer:
<section> section 태그 안에는 하나의 테마로 서로 연관된 컨텐츠 그룹이 위치하며, 페이지의 개요에 표시되어야 합니다. 이 태그는 연관된 컨텐츠들의 묶음(긴 기사의 하위 내용, 홈페이지의 뉴스 섹션과 같은 페이지의 주요한 부분 등)입니다. 일반적으로 section에는 제목(heading)과 footer가 있습니다.
<article>은 문서, 페이지, 애플리케이션, 사이트 등에서 완전하거나 self-contianed된 것을 나타내며 원칙적으로 독립적으로 배포하거나 재사용할 수 있습니다. 포럼 게시물, 잡지나 신문 기사, 블로그, 사용자 제출 의견, 대화형 위젯 또는 기타 독립된 콘텐츠가 될 수 있습니다.
<div> 반면에, div는 그 중요도, 언어, 제목 등의 어떤 의미도 전달하지 않습니다.
Good Summary: div, section & article
Extra: 다른 요소가 적합하지 않은 경우에만 div 엘리먼트를 사용할 것을 강하게 권합니다. div 엘리먼트 대신 더 적절한 엘리먼트를 사용하면 독자들은 더 쉽게 접근할 수 있고 작성자는 더 쉽게 관리할 수 있습니다.
ref: (본문 출처) W3C: section, W3C: div, W3c: article
12. svg vs canvas
Question: svg와 canvas의 차이는 무엇인가요?
Answer: 이 문서를 읽어보세요 (복붙하기 힘들어요)
13. multiple languages
Question: 어떻게 다양한 언어로 페이지를 제공하나요?
Answer: CMS를 사용하여 같은 구조와 스타일을 컨텐츠를 다양한 언어로 제공할 수 있습니다.
ref: john polacek
14. standard & quirks mode
Question: 표준 모드(standard mode)와 비표준 모드(quirks mode)의 차이는 무엇인가요?
Answer: 브라우저는 비표준 모드에서 과거의 브라우저처럼 페이지를 렌더링할 수 있습니다. 이것은 옛 버전과의 호환성을 위한 것입니다.
15. semantic
Question: semantic HTML이란 무엇인가요?
Answer: Semantic HTML, 혹은 "semantically-correct HTML(의미론적인 HTML)"은 컨텐츠의 의미에 맞게 적절한 태그를 사용하여 내용을 구성하는 HTML입니다.
예를 들어, <b></b> (bold)와 <i></i> (italic)은 사용하지 마세요. 왜냐하면 이들은 모양만 바꿀 뿐, 컨텐츠의 구조나 의미를 담지 않습니다. 대신 <strong></strong>과 <em></em>(emphasis)을 사용하세요. 이들은 각각 bold, italic 효과가 있고 모양과 의미 모두 표현할 수 있는 태그입니다.
Question: semantic tag를 사용해야 하는 이유가 무엇인가요?
Answer: 검색 엔진에 최적화되고, 접근성이 좋아지며, 코드가 가볍고 관리하기 쉬워집니다. semantic 태그를 사용하면 브라우저의 텍스트 인식 기능을 이용하는 많은 시각 장애인들이 페이지의 내용을 명확하게 이해할 수 있습니다. 검색 엔진은 순위를 매기기 위해 페이지 내용을 이해해야 하는데, 이 때도 semantic 태그가 도움이 됩니다.
ref: why important, Wiki: semantic HTML
Question: “semantically correct”는 어떤 의미입니까?
Answer: Stackoverflow를 읽어보세요
더 필요하신가요?
More questions: CSS Interview Questions, JavaScript Beginners Algorithm
read: HTML5
