https://steemit.com/front-end/@caesium133/4dkun
https://docs.junojunho.com/interview/html
HTML 관련 질문:
doctype이 무엇을 하는 것인가요?
http://webdir.tistory.com/40
HTML이 어떤 버전으로 작성되었는지 미리 선언하여, 웹 브라우저가 내용을 올바르게 표시하게끔 한다.
문서형 정의는 XHTML, HTML5, HTML 세가지가 존재하는데, 마크업 문서의 요소와 속성들을 처리하는 기준이 되고 유효성 검사에 이용됨.
이전 버전의 HTML은 SGML에 기반을 두고 만들어졌기 때문에 DTD가 필요하며 이 때문에 DOCTYPE 선언 시 긴 문자열을 작성한다.
HTML5는 SGML에 기반을 두고 있지 않아 간단하게 최상단에 설정한다.
HTML5는 이것을 설정하지 않아도 되지만 하위 호환을 위해 설정한다.
- 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
웹 브라우저가 문서를 다룰때 doctype이 있다면 표준문서로 다루고 그렇지 않으면 쿽스 모드로 다룬다. 표준모드는 어떤 웹브라우저든 공통된 레이아웃을 이용해서 렌더링한다.
- XML과 XHTML의 다른 점은 무엇인가요
모두 웹 문서 규격이다. XML은 W3C에서 여러 특수 목적의 마크업 언어를 만드는 용도에서 권장되는 다목적 마크업 언어이다. 이것을 기반으로 만든것이 XHTML이다.
- XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?
- 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
정적인 페이지라면 서버에서 언어코드로 HTML의 해당 언어와 대체해서 처리함.
- 다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.
data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?
커스텀 데이터 속성. HTML에 지정되어 있지 않은 새로운 속성을 만들어서 추가할 수 있다.
어떤 태그에도 추가할 수 있으며, data-로 시작하는 뒤에 문자열을 추가해서 만든다.
예 ) data-user-name, data-city-name
자바스크립트에서 dataset.userName 같이 이 속성에 접근할 수 있고 값을 변경할 수 있다.
서버측에서 불러온 데이터를 이용해서 렌더링 할 수 있다.
- HTML5를 오픈 웹 플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
쿠키(Cookies)와세션저장소(sessionStorage)와로컬저장소(localStorage)의 차이점을 설명해주세요.
쿠키: 키-밸류 저장소. 만료 기간도 함께 있다. 매 HTTP 요청마다 서버로 전송된다. 별도의 암호화 없이 전송된다. 브라우저 상관없이 적용 가능
로컬 스토리지: 키와 밸류가 쌍으로 저장되는 스토리지. HTML5 에서 추가됨.
사용자가 지우지 않는 이상 계속 브라우저에 남아 있음. 서버로 전송될 필요가 없는 데이터를 전송할 때 사용할 수 있다.
세션 스토리지: 브라우저 탭을 닫을 경우 사라짐. 이 외의 특징은 로컬 스토리지와 동일.
<script>,<script async>와<script defer>의 차이점에 관해 설명해주세요.
브라우저는 서버로부터 HTML, CSS, JS를 요청하고 응답받는다.
HTML,CSS 파일은 각각 파서에 의해 파싱되고, DOM 트리로 변환 후 렌더 트리로 결합된다.
HTML 파서는 script 구문을 만나면 자바스크립트 파일을 로드한 후, 파싱하고 실행한다.그리고 자바스크립트의 실행이 완료된 후 다시 중단된 부분부터 HTML 파서를 DOM 생성을 재개한다.
async와 defer는 HTML 파싱과 JS 외부 파일을 다운로드를 동시에 진행하는 공통점이 있다. src 속성을 지정해야 사용할 수 있다.
차이점은 async는 스크립트 파일 다운 직후 바로 실행되고, defer는 HTML 파싱 이후, DOMContentload 이전에 실행된다는 점이다.
- CSS
<link>를<head></head>사이에 쓰는 것과 JS<script>를<body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?
link를 head 사이에 넣는 것은 페이지가 점진적으로 렌더링 되기 때문에, 스타일이 적용되지 않은 DOM이 잠깐 보이는 것을 방지한다.
JS위치 - </body> 직전에 위치할 경우 HTML과 CSS 로딩이 끝난 직후에 JS파일을 로딩하기 때문에 사용자로 하여금 로딩이 좀 더 빠르다고 느낄 수 있다.
- Progressive rendering이란 무엇인가요?
콘텐츠를 빠르게 화면에 렌더링하기 위한 방법.
예 ) 모든 이미지를 로드하는 대신 일부 자바스크립트가 이미지를 로드함.
사용자 브라우저에 렌더링 될 최소 요소만 보이도록 우선순위를 지정함. (lazy load 이용)
- 이미지 태그에
srcset속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.
이유: 기기의 디스플레이에 따라 다른 이미지를 사용하려 할때 사용
과정:
srcset 속성에 각각 가로폭이 다른 이미지를 쉼표로 구분하여 넣는다. 이럴 경우 브라우저는 가로폭을 읽어서 해당하는 이미지를 읽어온다.
- HTML templating language를 사용해 본 경험이 있나요?
없다.
'유용한 정보' 카테고리의 다른 글
| 자바스크립트 표준 입력이란 뭘까? (0) | 2018.10.04 |
|---|---|
| React-icons 이용 방법 변경 (0) | 2018.09.27 |
| 자바스크립트 클로저란? (0) | 2018.08.13 |
| [패스트캠퍼스 후기] DevOps BootCamp 1기 수강 후기 (0) | 2018.08.11 |
| moment 한글 설정 (0) | 2018.07.20 |
