HTML Quiz - doctype, 다국어, dataAttribute, Cookie&Storage, async/deferAttribute, Progressive Rendering, srcset
0
Interview Questions
목록 보기
65/67
1. doctype이 무엇을 하는 것인가요?
- 브라우저는 doctype을 사용하여 페이지에서 quirks 모드를 사용할지 standard 모드를 사용할지 결정합니다.
- quirks 모드의 레이아웃은 W3C에서 만든 웹 표준이 적용되기 전 Netscape Navigator와 Internet Explorer 4의 동작을 흉내냅니다.
- stanard 모드의 레이아웃 현대 HTML과 CSS 명세에서 원하는 동작을 준수합니다.
- 현재 모든 기존 브라우저는
<!DOCTYPE html>에 대한 전체 standard 모드를 사용하고 있습니다.
2. 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
- 언어 버전별로 다른 URL을 사용하고, header 태그 내의 link 태그 내에 hreflang 속성을 사용하여 해당 페이지의 언어를 명시합니다.
2.1 다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.
- 언어 버전별로 다른 URL을 사용하고, HTML 태그의 hreflang 속성을 사용하여 해당 페이지의 언어를 명시합니다.
- 국제화(i18n)을 통해 각 언어별 json파일을 만들고, 하나의 테이블로 만들어 구글 스프레드 시트에 업로드하여 관리, 사용합니다.
3. data-속성은 무엇을 하는 것인가요?
- data-속성를 사용하면, 비 표준 속성이나 DOM의 추가 속성 없이 표준 시맨틱 HTML 요소에 추가 정보를 저장할 수 있습니다.
- HTMLElement.dataset 속성을 통해 커스텀 데이터 속성에 접근할 수 있습니다.
3.1 data-속성을 사용했을 때 이점은 무엇인가요?
- 비표준 속성을 사용해서 코드를 작성했는데 나중에 그 속성이 표준으로 등록되게 되면 문제가 발생합니다.
- 반면에 data- 속성을 사용하면 개발자가 용도에 맞게 사용하도록 별도로 예약되서 충돌이 발생하지 않습니다.
4. 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
- 쿠키와 웹 스토리지는 클라이언트인 브라우저에 저장되고 세션은 서버에 저장됩니다. 쿠키는 최대 4KB까지 저장 가능합니다. 웹 스토리지는 대부분의 브라우저에서 2MB까지 저장 가능합니다. 반면에 세션은 서버에 저장하고 싶은 만큼 저장할 수 있습니다.
- 쿠키는 HTTP 헤더를 통해 조작하고, 웹 스토리지는javaScript를 사용하여 조작합니다. 세션은 세션 관련 함수를 사용하여 조작합니다.
- 쿠키는 설정된 생명주기에 따라 삭제됩니다. 웹 스토리지 중 세션 스토리지는 브라우저 창이 닫히면 삭제되고, 로컬 스토리지는 브라우저 창이 닫혀도 유지됩니다. 세션은 브라우저가 닫힐 때 삭제됩니다.
5. <script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.
- HTML을 파싱할 때 script 태그를 만나면, HTML 파싱을 멈추고 script 태그를 읽어서 JavaScript 로드가 실행됩니다.
- scrtipt 태그에 async나 defer 속성을 설정하면, HTML 파싱과 외부 JavaScript 로드가 비동기적으로 동시에 실행됩니다.
- async와 defer 속성의 차이점은 script 태그에 async 속성을 주면 JavaScript 파일 로드가 완료된 직후 JavaScript 파일이 실행되고, defer 속성을 주면 HTML 파싱이 끝나고 DOM 생성이 완료된 이후에 JavaScrip 파일이 실행된다는 것입니다.
6. CSS<link>를 <head></head>사이에 쓰는 것과 JS<script>를 <body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?
- CSS lint 태그를 head 태그 안에 넣고, JavaScript script 태그를 body 태그 내 최하단에 넣는 것은 HTML의 파싱을 막지 않기 때문에 좋은 방법입니다.
7. Progressive rendering이란 무엇인가요?
- progressive rendering은 서버에서 웹 페이지의 일부를 순차적으로 렌더링하면서 전체 페이지가 렌더링될 때까지 기다리지 않고 웹 페이지를 클라이언트에 스트리밍하는 기술을 말합니다.
7.1 Progressive rendering의 장단점에 대해 설명해보세요.
- Progressive rendering의 장점은 서버에서 중요한 콘텐츠들을 언저 스트리밍해서 페이지 로드 시간이 빠르다는 것입니다.
- Progressive rendering의 단점은 콘텐츠가 빠르게 표시되더라도 나머지 중요하지 않은 콘텐츠가 모두 로드된 후 JavaScript 관련 상호 작용이 활성화된다는 것과 Progressive rendering이 확립된 프레임워크가 아직 없다는 것입니다.
8. 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요?
- 반응형 이미지를 구현할 때 브라우저가 올바른 크기의 이미지를 선택할 수 있도록 도와주기 위해 srcset과 sizes 속성을 사용합니다.
- srcset 속성은 브라우저가 선택할 수 있도록 허용될 이미지 세트와 각 이미지의 크기를 정의합니다. 각 이미지 정보는 콤마로 구분되고, 이미지 파일과 공백, 그리고 이미지의 내부 넓이로 구성됩니다.
8.1 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.
- 브라우저는 장치의 넓이를 확인합니다.
- sizes 속성의 목록에서 어떤 미디어 조건에 해당하는지 찾습니다.
- 미디어 쿼리에서 주어진 slot 넓이를 확인합니다.
- srcset 속성의 목록에서 주어진 slot과 같은 크기의 이미지를 로드하거나 같은 크기의 이미지가 목록에 없다면 그 다음으로 큰 이미지를 로드합니다.
