안녕하세요, 김당쿽입니다! 🥕
프론트엔드 개발자 면접에서 자주 받을 수 있는 질문들 중 HTML과 관련된 자료들을 정리한 포스트입니다.
HTML이란 Hypertext Markup Language의 약자로 우리가 보는 웹 페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
HTML의 Element(요소)
<h1>Hello World</h1>
에서 <h1>
은 Start Tag, </h1>
은 End Tag, Hello World
는 Content라고 할 수 있으며, 전체를 Element라고 합니다.
outline = 개요, 윤곽 = 간결하게 추려낸 주요 내용.
HTML5 마크업이 문서의 아웃라인을 사용자에게 전달하기 위해 어떤 방법을 사용하는지 이해함으로써 낡은 브라우저와 최신 브라우저, 스크린 리더기에 적절하게 대응할 수 있다.
outline의 세 가지 요소
section
, article
, nav
, aside
)을 써야 한다.<b>
굵은 글씨, <i>
이탤릭체, <tt>
타이프체, <small>
작은 글씨, <blink>
깜빡임 등.<strong>
강한 강조, <p>
문단, <q>
짧은 인용, <samp>
시스템 출력, <cite>
작품 제목 등.DOCTYPE이란? document type의 약어, 웹 문서가 어떤 형식으로 작성되었는지 최상단에 문서의 형식을 선언하는 것을 의미한다. HTML 태그는 아니지만, HTML 문서의 버전을 웹 브라우저에 알리며, 대소문자를 구분하지 않지만 대부분 대문자를 사용하며, 일반적으로 HTML 태그보다 먼저 선언된다.
DOCTYPE을 선언하지 않으면 같은 내용의 HTML 문서라 할지라도 각 브라우저의 환경에 따라 전혀 다른 결과물을 출력할 수 있다. 각 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 하고, 문서간의 호환성을 높이기 위해 선언한다.
과거 웹 자료의 보존을 위해 구 버전을 폐지하지 않는다. 그리고 웹 문서에 과거 버전 기준으로 이미 작성된 요소들을 전부 수정하는 것은 불가능에 가깝다. 현재 버전 선언 이외에 구 버전의 선언을 오류로 간주한다면 수 많은 웹 페이지의 과거 자료를 잃어버리게 된다.
시맨틱 태그는 Semantic Tag로 의미가 있는 태그라는 뜻이다. div
나 span
과 같은 의미가 없는 태그가 아닌 form
, table
, header
와 같은 명확한 의미를 가진 태그들을 말한다.