Front-end Roadmap Serise: #1 HTML

이번 글은 프론트엔드 로드맵 시리즈 중 1편 HTML에 대한 글입니다.

6 min readJan 19, 2020

이 글에서는
1. Basic HTML(기본적인 html)
2. Semantic HTML(의미론적인 html 작성)
3. Accessibility(접근성)
4. SEO Basic(기본적인 SEO)
5. Forms and Validations in HTML
6. Conventions and Best Practices는 무엇 인지 각각 설명할 것입니다.

0. HTML이란?

웹 페이지의 기본 구성 요소(HTML, CSS, JS) / Web[www] 3대 요소(URI, HTTP, HTML) 중 하나인 HTML은 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)의 약자로 정보와 정보 사이를 오가기 위한, 웹 페이지를 만들기 위한 마크업 언어입니다. 쉽게 말해 웹 페이지의 HTML을 사람의 인체에 비유한다면 뼈대라고 말할 수 있습니다. HTML은 Elements로 구성 되어있으며 작게는 제목, 소제목, 본문, 목록부터 시작해 링크, 인용 등등을 구조적으로 만들거나 실행 시키는 역할을 가집니다. 이는 개발자가 어떻게 프로그래밍 하느냐에 따라 복잡하게도 간단하게도 구현할 수 있습니다.

1. Basic HTML

1.) Html Basic Document

HTML을 뭉뚱그려 안다면 <!DOCTYPE html> 은 무엇이며 <head> 는 무슨 역할을 하는지 등 구체적으로 잘 모를 것입니다. 그래서 가장 먼저 HTML의 기본적인 구조에 대해 짚고 넘어 가려 합니다.

<!DOCTYPE html>
다른 태그와 다르게 닫는 태그가 없으며 이 선언은 HTML5가 될 해당 문서를 정의 합니다. 버전마다 선언하는 태그가 다르므로 HTML이 어떤 버전으로 작성 되었는지 미리 선언함으로써 Browser가 내용을 올바르게 표시할 수 있도록 하는 역할을 가지고 있습니다.
<html>
이 Element는 HTML Page의 가장 상위의 Element입니다. 그렇기 때문에 이 Tag는 페이지에서 하나만 존재할 수 있습니다. <html> Tag를 중복해서 사용 할 수 없는 이유는 Web은 책처럼 ‘두 페이지’가 아닌 ‘한 페이지’이기 때문이라고 생각하면 쉽게 이해할 수 있습니다.
<head>
<html>의 바로 하위 Elements 중 하나로 쉽게 말해 사람의 두뇌에 비유 할 수 있으며<head> Element는 HTML Document의 Metadata를 포함하고 있습니다. Metadata란, Karen Coyle에 의하면 “어떤 목적을 가지고 만들어진 데이터 (Constructed data with a purpose)”라고도 정의 되며 데이터에 대한 데이터로 상위 데이터에서 하위 데이터에 대한 각종 정보, 속성을 가진 데이터를 말합니다. 즉, 데이터 그 자체가 아닌 데이터의 속성 등을 설명하는 데이터를 Metadata라고 하며 <head>가 말하는 Metadata는 HTML Document의 속성 등을 기재한 데이터를 말합니다.

1. <title>
이 Element는 HTML Document의 title을 말하며 사람의 이름에 비유할 수 있으며 Browser의 Tab을 보면 <title> 의 contents가 명시 되어있는 것을 확인 할 수 있습니다.

2. <meta>
이 Element는 앞서 설명했던 HTML Document에 대한 Metadata를 제공하며 Metadata는 Web Page에 표시되지 않지만 컴퓨터가 분석이 가능합니다. <meta> Element는 일반적으로 Web Page 설명, 키워드, 문서 작성자, 누가 마지막으로 이 문서를 작성했는지 등등 Metadata를 기재하는데 사용됩니다.

ex.) 사람의 MetaData

“난 한국인이야. 한국어를 할 수 있고 영어는…”

2-1. <meta charset="utf-8">
<meta> Tag에 charset Attribute는 HTML5에서 새롭게 추가된 Attribute로 HTML 4.01보다 훨씬 간결하며 이 Attribute는 어떤 언어로 되어 있는지에 대한 지정하여 해당 HTML 문서의 문자 인코딩 방식을 명시합니다.

2-2. 인코딩 방식
만약 인코딩 방식을 명시하지 않을 경우 Web Browser는 자동으로 인코딩을 추정해서 처리를 해주는 데, 정확히 처리가 될 수도 있지만 그렇지 못하는 경우도 많기 때문에 꼭 명시해야 합니다. 정확히 처리되지 않을 경우 HTML Document의 인코딩 방식과 Web Browser가 사용하는 인코딩 방식이 서로 달라서 언어가 깨지는 문제가 발생합니다. 이 문제를 해결하기 위해서는 하나의 인코딩 방식으로 통일해야 합니다. 현재 한국에서 사용 되는 인코딩 방식은 크게 두가지 로 나뉩니다. euc-kr 방식과 utf-8 방식 입니다.

1. euc-kr
'euc-kr 방식'은 영어만을 고려한 ASCII 방식을 확장하여 한글을 사용할 수 있도록 만든 국가 언어 코드 입니다. 즉, 대한민국에서만 사용할 수 있도록 만든 인코딩 방식이며 해외에서는 한글 페이지를 제대로 볼 수 없는 문제가 있어 현재는 거의 사용하지 않고 있습니다.2. utf-8
'euc-kr 방식'의 문제점을 해결하기 위해 나온 인코딩 방식으로 'euc-kr 방식'보다 용량은 크지만 표준화 및 글로벌 환경을 고려해야하므로 HTML5에서는 'utf-8 방식'을 권장하고 있습니다.!주의
DB와 연동해서 결과를 출력할 때에는 해당 DB 인코딩도 맞추지 않으면 DB 출력 결과가 깨지는 등의 문제가 생길 수 있으므로 주의가 필요합니다.

3. <style>

4. <link>

5. <script>

<body>

1.<script>

2.) Element

Element는 ‘여는 태그(opening tag)’부터 ‘내용(contents)’, ‘닫는 태그(closing tag)’ 구조로 이루어져 있습니다. Element가 Browser에 해당 내용을 어떻게 표시해야 할지 방법을 알려주면 Browser는 HTML Tag를 표시하지 않지만 Tag를 사용하여 Web Page에 ‘내용(contents)’을 렌더링 합니다.

<p> : Opening Tag
Front-end Roadmap #1 Basic HTML : Contents
</p> : Closing Tag
<p>Front-end Roadmap #1 Basic HTML</p> : Element

….공부중…. 방대한 HTML….