계속해서 질문에 대한 답변을 공부하자.
이번에는 html에 관련된 질문들이다!
HTML Questions:
말그대로 Document Type을 말한다. 문서의 종류를 말하는 것이다. HTML 4.01 HTML5 XHTML 등 여러가지 문서타입이 존재하는데, 문서가 다르면 브라우저가 표현하는 내용도 확연히 달라지기 때문이다. Document Type Definition (DTD) 라는 것은 문서타입을 선언한다는 의미이다.
- What's the difference between full standards mode, almost standards mode and quirks mode?
과거의 잔존물이라고 봐도 될까? 과거 W3C가 웹표준을 만들었을 때, 기존에 쓰고 있던 브라우저들이 새로운표준을 따르지 않았다고 한다. 그래서 기존 브라우저들을 위한 quirks mode 가 있고, 새로운 표준인 full standards mode가 있다고한다. almost standards mode는 단어 그대로 몇몇 부분만 기존브라우저와 호환되는 형식이라고 보면 된다.
W3C가 1994년 10월에 창립된 것을 미루어볼때, 이미 20년이 넘는 세월이 흘렀다. 손에들고다니는 컴퓨터가 만연한 이 시대에 과연 의미가 있는 것인지 생각해본다.
- What's the difference between HTML and XHTML?
XHTML은 XML을 기반으로 한 마크업 언어이다. 일반 HTML보다 XHTML이 훨씬더 엄격하고 정교한 문법을 갖는다고 한다.
어떤면에서 더 정교할까
첫째, Doctype이 명시되어야 할것
둘째, html 태그에 xmls 속성도 필수!
셋째, html head title body 태그도 필수!
넷째, 요소에 내용이 없더라도 꼭 닫힘이 명시될것!
이런식으로 되어있기때문에 좀더 느슨한 HTML 과는 차이가 있다.
문제는 MIME 타입과 함께 둘을 혼용해서 쓸 때이다. XHTML의 경우 MIME 타입은 application/xhtml+xml 형식이다. 이 MIME 타입이 http 헤더에 존재하면 브라우저는 완전 표준모드로 해석을 한다. 그런데 IE8 버전에서는 저 MIME 타입을 렌더링 하지 못해 문제가 된다.
혹은 XHTML의 MIME 타입을 text/html 형식으로 보내게되면 HTML로 인식하므로 문제가 발생할 수가 있다.
- What are
data- attributes good for?
html5에서 새롭게 나온 data-* 에 대한 이야기다. 사실 웹을 개발하다보면 html 엘리먼트에 명시할만한 데이터를 저장할 필요가 있긴 있었다. 하지만 id name 만으로 부족하기때문에 개인적으로 규정할 수 있는 속성값을 만들었다고 본다. 지금까지는 많이 안썼었는데 충분히 활용가치가 높아보인다.
- Consider HTML5 as an open web platform. What are the building blocks of HTML5?
오픈웹 플랫폼으로서 HTML5가 작동한다고 한다. 웹개발자들이 비용없이 다양한 크로스 플랫폼으로 활용한다는 의미이다. 그것을 구성하는 품목들에 대해 물어보고 있다.
- more semantic text markup
- new form elements
- vedio and audio
- new javascript API
- canvas and SVG
- new communication API
- geolocation API
- web worker API
- new data storage
요런것들이 있다고 하는데 알아봐야겠다... ㅠㅠ
- How do you serve a page with content in multiple languages?
다국어 지원은 i18n 라이브러리를 사용하라고 권고한다. 확인해보자
- Describe the difference between a
cookie, sessionStorage and localStorage.
cookie는 기존에 쓰이고 있던 방법으로 웹 사용자와 서버간에 특정데이터 저장을 의미하는 것이다.
sessionStorage와 localStorage는 webStorage라는 기술에서 지속성의 차이를 두고 있는 개념이다. session은 브라우징 되고 있는 컨텍스트에서만 존재하는 데이터고 local은 영구히 저장이 된다. 하지만 cookie보다 특장점이 있다고 여겨지진 않는다고 한다.
- Describe the difference between
<script>, <script async> and <script defer>.
일반적인 스크립트 태그는 문서 파싱을 중단하고 스크립트를 다운받고 실행한다음 다시 파싱을 진행했다. 이는 정체현상을 만들기때문에 사용자에게 굉장히 불편함을 전달해주었다.
그에 따라 개발된 것이 async 속성과 defer 속성이다. 둘다 파싱작업을 중단하지 않는다는 것에는 동일한점이 있다. 이로인해 병렬적인 작업을 통해 작업속도가 개선됨은 물론이다.
차이점은 실행시점이다. 먼저 defer 속성의 경우 실행시점은 문서가 다 파싱되었을때이다. 흔히썼던 onload 함수같은 것이라고 봐도 되겠다. async 속성의 경우 실행시점은 해당 스크립트 다운로드가 다 완료되었을 때이다. 사용자에게 더 빨리 느껴질 수 있는 것은 async일 수도 있겠으나, 스크립트가 문서를 직접만지고 서로간 로딩 순서가 중요할때는 async보다는 defer가 더 유리하다고 한다.
- Why is it generally a good idea to position CSS
<link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
만약 css가 body쪽에 있다면 엘리먼트가 스타일링되지 않은채 사용자에게 보여질 수가 있다.
js는 문서파싱을 멈추는 특성이 있다. 크기가 무거워지면 화면 로딩에 시간이 오래걸리기때문에 가급적 화면을 다 표시한다음에 적용시키는 것이 사용자경험측면에서 매우 유리하다고 본다.
- What is progressive rendering?
점진적인 렌더링이라는 말인데, 쉽게 접할수 있는 것으로는 유튜브가 있다. 만약 인터넷 환경이 고르지 않은 경우에 유튜브는 먼저 화질이 낮은 영상을 볼 수 있도록 데이터를 보낸다. 뒤편에서는 계속해서 보다 나은 화질의 이미지를 전송하게해서 사용자가 조금이라도 경험하면서 지루한 시간을 보내지 않도록 해주는 것이다 .
css는 잘 모르니까 생략하고 곧바로 js로....
댓글
댓글 쓰기