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