.jpg)
Q. 일반적으로 CSS link 태그를 head 태그 사이에 위치시키고, JS script 태그를 body 태그가 끝나기 직전에 위치시키는 이유가 무엇인가요?
A1: CSS 링크 태그를 head 사이에 두어야 하는 이유는 최적화된 웹사이트를 만들기 위해서이다. 웹 페이지가 처음으로 로드될 때, HTML과 CSS는 동시에 파싱되기 시작한다. 웹사이트의 시각적 요소를 만들기 위해서는 두 가지가 모두 필요한데 HTML은 DOM을 만들고, CSS는 CSSOM(CSS Object Model)을 만든다.
CSS를 문서의 아래쪽에 두는 것은 페이지가 프로그레시브 렌더링을 진행하는 것을 방해한다. 몇몇 브라우저들은 만일 스타일이 변경되면, 엘리먼트들을 다시 페인트 해야 하기 때문에 그것을 막기 위해 렌더링을 블록하는 경우도 있다. 그 때 사용자는 하얀색 빈 페이지를 보고 있게 될 수도 있어 스타일링되지 않은 웹페이지가 잠시 보여질 수도 있다.
A2: script는 다운로드되고 실행되는 동안 HTML 파싱을 블록한다. HTML 아래에 script 태그를 입력하면 당장 사용자에게 보여져야 하는 HTML이 먼저 파싱되어 좋은 사용자 경험을 이끌어낼 수 있다.
Q. script, script async, script defer 태그들의 차이점은 무엇인가요?
-
script: HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작된다.
-
script async: HTML 파싱과 병렬적으로 가져오며, 가능할 때 즉시 실행된다(아마 HTML 파싱이 끝나기 전). 스크립트가 페이지의 다른 스크립트들과 독립적인 경우 async를 사용하는 것이 좋다.
-
script defer: HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행된다. 이것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행된다. 스크립트가 완전히 파싱된 DOM에 의존되는 경우 defer 속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용하다. defer 스크립트는 document.write를 포함하면 안된다.
Q. 시맨틱 태그(sementic tag) 에 대해 설명하세요.
- semantic의 뜻: 의미의, 의미론의
시맨틱 태그들은 검색엔진에게 의미론적 구조(그 영역이 문서 구조에서 어떤 의미인지)를 알려준다. 이름만 듣고도 그 영역이 어떤 역할을 하는 곳인지 알 수 있게 한다. 개발자로 하여금 코드의 전체적인 구조를 파악하는 것을 더욱 수월하게 한다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
- 왜 시맨틱 태그를 사용해야 하는가?
기존에는 div 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에,검색엔진이 html 파일을 분석할 때 정확하게 컨텐츠를 식별하기가 힘들었다. HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정한 거라고 보면 될 것 같다.
