HTML 심화 | 면접 질문 모음

👩🏻‍💻 Dev/Front-End

HTML 심화 | 면접 질문 모음

yesolz 2024. 8. 21. 00:05

728x90

DOCTYPE

<!-- HTML5 -->
<!DOCTYPE html>

Document Type의 약자.

HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.

이를 선언해주지 않으면, 호환 모드(quirks mode)로 동작하며, 이 경우 크로스 브라우징 이슈가 심해지게 된다.

표준 모드와 호환 모드

W3C가 웹 표준을 만들면서, 렌더링을 할 때 표준 모드(Standards mode)와 호환 모드(Quirks mode)로 렌더링할 수 있는 옵션이 생겼다.
호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 버전의 브라우저에서도 깨지지 않기 때문에 각 브라우저마다 다르게 보일 수 있다.
따라서 특별한 경우가 아니라면 DOCTYPE을 명시하여 브라우저가 표준 모드로 렌더링하게 하는 게 좋다.

https://developer.mozilla.org/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

웹 표준

웹 상에서 표준적으로 사용되는 기술.

웹사이트를 어떠한 운영체제나 어떠한 브라우저에서 보더라도 동일하게 보여지도록 W3C의 표준에 맞추는 것이다.

다양한 브라우저에서 대응할 수 있어 접근성이 향상된다.

최신 웹 표준 버전은 HTML5와 CSS3이다.

HTML5에 추가된 내용

<canvas> 태그: HTML5에서 새롭게 도입된 기능으로, 2D 그래픽을 자바스크립트를 통해 그릴 수 있음. 비트맵 방식으로, 해상도 의존적(Resolution-dependent)이다.
모든 디바이스 호환성: HTML5는 다양한 디바이스에서의 웹페이지 호환성을 크게 향상시킴.
시맨틱 웹 기술: HTML5에서 처음으로 시맨틱 태그가 도입되어, 문서 구조를 명확하게 표현할 수 있게 됨.

meta 태그와 meta 태그의 요소

meta태그 : HTML 문서가 어떤 내용을 담고 있고, 키워드는 무엇이며, 누가 만들었는지에 대한 정보 (웹 페이지의 메타데이터)를 담는 태그

<head>
  <meta charset="UTF-8" />
  <meta name="keywords" content="Travel, Adventure, Destinations, Vacation, Guide" />
  <meta name="description" content="Explore top travel destinations and tips for your next adventure." />
  <meta name="author" content="GlobalExplorer" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Top Travel Destinations</title>
</head>

charset: 문서에서 허용하는 문자 집합
- utf-8: 전세계적인 character 집합
name: 메타 요소가 어떤 정보의 형태를 가지고 있는지
content: 실제 메타 데이터의 컨텐츠keywords와 description 같은 태그는 검색엔진이 페이지를 특정 검색어와 연관 짓고, 검색 결과에 표시될 요약 내용을 결정하는 데 사용된다. 올바르게 설정된 meta 태그는 검색엔진 최적화(SEO)에 긍정적인 영향을 줄 수 있다.

keywords와 description 같은 태그는 검색엔진이 페이지를 특정 검색어와 연관 짓고, 검색 결과에 표시될 요약 내용을 결정하는 데 사용된다. 올바르게 설정된 meta 태그는 검색엔진 최적화(SEO)에 긍정적인 영향을 줄 수 있다.

시맨틱 마크업

시맨틱(Semantic): "의미론적인"
마크업(Markup): HTML 태그로 문서를 작성하는 것

-> 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것.

시멘틱 마크업의 장점

검색엔진 최적화(SEO): 검색엔진이 페이지 구조를 더 잘 이해하고, 콘텐츠를 정확하게 색인할 수 있다.
웹 접근성: 스크린 리더와 같은 보조 기술이 페이지 구조를 이해하는 데 도움이 된다.
가독성: 요소 자체가 의미를 가지기 때문에, 코드만 봐도 의미를 빠르게 파악할 수 있다.

작성 방법

1. 각 태그를 용도에 맞게 사용하여야 한다.

https://www.w3schools.com/html/html5_semantic_elements.asp

헤더/푸터 <header><footer>
내비게이션 <nav>
독립적인 콘텐츠 <article>
사이드 공간 <aside>
여러 중심 내용 감싸는 공간 <section>
최상위 제목으로 <h1>
순서 없는 목록 <ul> <li>

2. CSS 스타일을 명시하는 태그를 사용하지 않는다.

태그가 가지는 의미 자체가 스타일이라면, 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다!

예를 들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 "bold" 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다" 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/html/semantic.md

SEO (Search Engine Optimization)

검색 엔진 최적화(SEO: Search Engine Optimization)는 검색 엔진이 웹페이지의 자료를 수집하고 순위를 매길 때, 웹페이지가 검색 결과에서 상위에 노출될 수 있도록 구성하는 행위를 말한다.

SEO를 위해서는 적절한 검색어(키워드)를 페이지에 전략적으로 배치하는 것이 중요하다.

검색 엔진은 웹페이지를 분석할 때 HTML 태그와 그 구조를 평가하며, 이 과정에서 시맨틱한 마크업을 사용한 문서는 검색 엔진이 페이지의 내용을 더 잘 이해하고, 더 의미 있는 결과를 보여줄 수 있게 한다.

웹 접근성

웹 접근성: 모든 사람 (비장애인, 장애인, 노인 등)이 차별 없이 웹 사이트를 자유롭게 이용할 수 있게 하는 권리

웹 접근성에 맞는 마크업 예시
- 이미지에 alt 속성 추가하여 텍스트 대체 설명 제공
- 동영상에 자막 및 대본 제공, 자동재생 금지
- input 태그에 label 제공
- table에 caption을 사용해 테이블의 목적을 명확히 하고, thead, tbody, th 를 사용해 구조를 명확히 함.
- 컨텐츠는 위에서 아래로 선형 구조 유지

data- 속성

업데이트 예정

local storage vs session storage vs cookie

업데이트 예정

script vs script async vs script defer

업데이트 예정

SVG

업데이트 예정

참고 레포지토리

https://github.com/junh0328/prepare_frontend_interview/blob/main/html_css.md

prepare_frontend_interview/html_css.md at main · junh0328/prepare_frontend_interview

📚 프론트엔드 기술 면접을 위한 핸드북 만들기. Contribute to junh0328/prepare_frontend_interview development by creating an account on GitHub.

github.com

https://github.com/baeharam/Must-Know-About-Frontend?tab=readme-ov-file

GitHub - baeharam/Must-Know-About-Frontend: :mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.

github.com

728x90

저작자표시 비영리 동일조건