Skip to content

Latest commit

 

History

History
174 lines (111 loc) · 17.2 KB

html-questions.md

File metadata and controls

174 lines (111 loc) · 17.2 KB

HTML 질문

HTML 질문

프론트엔드 면접 질문 - HTML 질문에 대한 해설입니다. Pull Request 를 통한 제안 및 수정 요청을 환영합니다.

DOCTYPE은 무엇을 합니까?

DOCTYPE은 “document type”의 약어입니다. 이것은 HTML 에서 표준모드와 쿼크모드를 구별하기 위해 선언합니다. 이것이 존재함으로써 웹페이지에서 표준모드로 렌더링하도록 브라우저에 지시합니다.

이야기의 교훈 - 당신의 페이지를 시작 부분에 <!DOCTYPE html> 추가하세요.

참고자료

여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?

이 질문은 다소 모호합니다. 여러 언어로 제공된 콘텐츠로 페이지를 게재하는 방법이 가장 일반적인 경우이지만 페이지의 콘텐츠는 하나의 일관된 언어로만 표시해야 한다고 가정합니다.

HTTP 를 서버에 요청하면 대개 요청하는 사용자 에이전트가 Accept-Language 헤더와 같은 언어 기본 설정에 대한 정보를 보냅니다. 그런 다음 서버는 이 정보를 사용하여 해당 언어가 사용 가능한 경우 해당 언어로 된 문서 버전을 반환할 수 있습니다. 반환된 HTML 문서는 <html lang = "en"> ... </ html>과 같이<html> 태그에 lang 속성을 선언해야 합니다.

백엔드에서 HTML 마크업에는 XML 또는 JSON 형식으로 저장된 특정 언어에 대한 i18n placeholder(빠져 있는 다른 것을 대신하는 기호나 텍스트의 일부) 및 내용이 포함됩니다. 그런 다음 서버는 일반적으로 백엔드 프레임워크의 도움을 받아 특정 언어로 된 콘텐츠로 HTML 페이지를 동적으로 생성합니다.

참고자료

다국어 사이트를 디자인하거나 개발할 때 주의해야 할 사항은 무엇입니까?

  • HTML 에서 lang 속성을 사용하세요.
  • 사용자를 모국어로 안내합니다 - 사용자가 번거롭지 않게 국가 / 언어를 쉽게 변경할 수 있도록 합니다.
  • 텍스트를 포함한 이미지를 사용하는 것은 확장가능한 접근이 아닙니다 - 이미지에 텍스트를 배치하는 것은 여전히 컴퓨터에서 보기 좋은 폰트(시스템 이외의)를 표시하는 인기 있는 방법입니다. 그러나 이미지 텍스트를 번역하려면 각 텍스트 문자열에 각 언어에 대해 만들어진 별도의 이미지가 있어야 합니다. 이와 같은 대체 방식이 늘어나면 재빠르게 제어할 수 없습니다
  • 제한적 단어 / 문장 길이 - 일부 언어는 다른 언어로 작성될 때 더 길어질 수도 있습니다. 디자인에 레이아웃이나 오버 플로우 문제 발생에 주의하세요. 디자인에 필요한 텍스트의 양을 정하거나 디자인을 깰 수 있는 디자인은 하지 않도록 하는 것이 가장 좋습니다. 문자 수는 헤드라인, 레이블 및 버튼과 같은 항목에서 사용됩니다. 그것들은 본문의 텍스트나 코멘트와 같이 자유롭게 흐르는 텍스트에 대한 문제가 적습니다.
  • 색상을 이해하는 방법에 유의하세요 - 색상은 언어와 문화에 따라 다르게 인식됩니다. 적절한 색상을 사용하여 디자인해야 합니다.
  • 날짜 및 통화 서식 - 날짜는 때때로 다른 방식으로 제시됩니다. 예) 미국의 "May 31, 2012" vs 유럽의 "31 May 2012".
  • 번역된 문자열을 연결하지 않습니다 - "오늘의 날짜는 " + date + "입니다" 와 같은 작업은 하지 마세요. 단어의 순서가 다른 언어로 인해 깨지게 됩니다. 대신 템플릿 매개 변수를 사용하세요.
  • 언어를 읽는 방향 - 영어는 왼쪽에서 오른쪽으로 그리고 위에서 아래로 읽지만 일본어는 오른쪽에서 왼쪽으로 읽습니다.
참고자료

data- 속성은 무엇에 좋은가요?

JavaScript 프레임워크가 인기를 끌기 전에 전에 프런트엔드 개발자는 비표준 속성, DOM 의 추가 프로퍼티 등의 조작없이 DOM 자체 내에 추가 데이터를 저장하기 위해 data-속성을 사용했습니다. 이는 더 이상 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자 정의 데이터를 비공개로 저장하기 위한 것입니다.

요즘에는 data-속성을 사용하는 것을 권장하지 않습니다. 그 이유 중 하나는 사용자가 브라우저의 검사 요소를 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것입니다. 데이터 모델은 JavaScript 자체에 더 잘 저장되며 라이브러리 또는 프레임워크의 데이터 바인딩을 통한 DOM 으로 업데이트된 상태를 유지합니다.

참고자료

HTML5 를 개방형 웹 플랫폼으로 간주합니다 HTML5 의 구성 요소는 무엇입니까?

  • 의미론 - 콘텐츠를 보다 더 정확하게 설명할 수 있습니다.
  • 연결 - 새롭고 혁신적인 방법으로 서버와 통신할 수 있습니다.
  • 오프라인과 저장소(storage) - 웹 페이지가 데이터를 클라이언트 측에 로컬로 저장하여 오프라인에서보다 효율적으로 작동하도록 허용합니다.
  • 멀티미디어 - 개방형 웹에서 비디오와 오디오 분야를 최고급으로 만들기
  • 2D/3D 그래픽 및 효과 - 훨씬 다양한 프레젠테이션 옵션을 허용합니다.
  • 성능 및 통합 - 속도 최적화 및 컴퓨터 하드웨어 개선으로 더 나은 사용을 제공합니다.
  • 장치 접근 - 다양한 입출력 장치의 사용을 허용합니다.
  • 스타일링 - 더 정교한 테마를 사용하게 합니다.
참고자료

cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

세 가지 기술은 모두 클라이언트 측에서 중요한 값을 저장하는 매커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다.

cookie localStorage sessionStorage
생성자 클라이언트나 서버. 서버는 Set-Cookie 헤더를 사용할 수 있습니다 클라이언트 클라이언트
만료 수동으로 설정 영구적 탭을 닫을 때
브라우저 세션 전체에서 지속 만료 설정 여부에 따라 다름 O X
모든 HTTP 요청과 함께 서버로 보냄 쿠키는 Cookie 헤더를 통해 자동 전송됨 X X
용량 (도메인당) 4kb 5MB 5MB
접근성 모든 윈도우 모든 윈도우 같은 탭
참고자료

<script>, <script async>, <script defer> 사이의 차이점을 설명하세요.

  • <script> - HTML 파싱이 중단되고 스크립트가 즉시 실행되며 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.
  • <script async> - 이 스크립트는 HTML 파싱과 병행되어 사용 가능한 즉시 (HTML 파싱이 완료되기 전에) 실행됩니다. 스크립트가 페이지의 다른 스크립트(예: 분석)와 독립적인 경우 async를 사용하세요.
  • <script defer> - 이 스크립트는 HTML 파싱과 병행되지만 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 스크립트가 완전히 파싱된 DOM 에 의존하는 경우 defer 속성은 실행하기 전에 HTML 전부 파싱되도록 하는데 유용합니다. <body>의 끝부분에 평범한 <script>를 두는 것과 별 차이가 없습니다. defer 스크립트는 document.write를 포함하면 안됩니다.

주의: src 속성이 없는 스크립트에서는 async 와 defer 속성이 무시됩니다.

참고자료

왜 일반적으로 CSS <link> 태그를 <head></head> 태그 사이에 위치시키고, JS <script> 태그를 </body> 직전에 위치시키는 것이 좋은 방법입니까? 다른 예외적인 상황을 알고있습니까?

<head> 안에 <link>를 넣는 이유

<link>를 <head> 안에 넣는 것은 명세의 일부입니다. 그 외에도 상단에 배치하면 페이지가 점진적으로 렌더링되기 때문에 UX 가 향상됩니다. 문서 맨 아래에 CSS 를 두는 것은 Internet Explorer 를 비롯한 많은 브라우저에서 점진적 렌더링을 금지시키는 것입니다. 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리지 않아도 되도록 렌더링을 차단합니다. 사용자는 빈 하얀 페이지에서 멈추게 됩니다. 또한 스타일이 없는 내용이 잠깐 보이는 것을 방지합니다.

</body> 직전에 <script>를 넣는 이유

<script>는 다운로드되고 실행되는 동안 HTML 파싱을 차단합니다. 스크립트를 맨 아래에서 다운로드하면 HTML 을 먼저 파싱하여 사용자에게 표시할 수 있습니다.

스크립트가 document.write() 를 포함할 때에는 <script> 를 아래쪽에 두는 것이 예외적일 수 있습니다만, 요즘은 document.write() 를 사용하지 않는 것이 좋습니다. 또한, <script>를 맨 아래에 두면 브라우저가 전체 문서가 파싱될 때까지 스크립트 다운로드를 시작할 수 없다는 것을 의미합니다. 유일한 해결책은 <head> 에 <script>를 넣고 defer 속성을 사용하는 것입니다.

참고자료

프로그레시브 렌더링이 무엇입니까?

프로그레시브 렌더링이란 콘텐츠를 가능한 한 빨리 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술입니다. (특히 인식되는 로딩 시간을 향상시킵니다)

예전에는 광대역 인터넷을 사용하기도 했지만 불안정한 모바일 데이터 연결이 점점 인기를 끌면서 최근 개발에 있어서도 여전히 유용합니다.

관련 기술 예:

  • 이미지 레이지 로딩 - 페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript 를 사용하면 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드 할 수 있습니다.
  • 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링 될 페이지의 양에 필요한 최소한의 CSS / 콘텐츠 / 스크립트 만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded / load 이벤트를 수신하여 다른 리소스와 내용을 로드 할 수 있습니다.
  • 비동기 HTML 프래그먼트 - 페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옵니다. 이 기술에 대한 자세한 내용은 여기에서 찾을 수 있습니다.

이미지 태그에 srcset 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.

기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 srcset 속성을 사용합니다 - 레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄입니다. (왜냐하면 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문). 예를 들면: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> 클라이언트의 해상도에 따라 브라우저에 small, medium 또는 large .jpg 그래픽을 표시하도록 지시합니다. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px의 장치 너비의 경우 다음 계산이 수행됩니다:

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 small.jpg에 해당하는 500w가 브라우저에 의해 선택됩니다.

해상도가 레티나 (2x)인 경우 브라우저는 최소 이상의 해상도를 사용합니다. 500w (1.5625)는 1보다 크고 이미지가 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미합니다. 그러면 브라우저는 결과 비율이 2에 가까울 때 1000w (3.125)인 이미지를 선택합니다.

srcset는 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 좁은 화면 장치에 제공하려는 문제를 해결합니다 — 또한 선택적으로 고해상도/저밀도 화면에 다른 해상도 이미지를 제공할 수도 있습니다.

참고자료

다른 HTML 템플릿 언어를 사용해본 적이 있습니까?

네, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로 그것들은 어느 정도 동일하고, 보여 줄 데이터를 조작하는 데 유용한 필터와 컨텐츠를 유출하는 유사한 기능을 제공한다. 대부분의 템플릿 엔진을 사용하면 표시 전에 맞춤 처리가 필요한 이벤트에 자신의 필터를 삽입 할 수도 있습니다.

기타 답변