1. 마크업을 통한 데이터의 구성
웹 페이지는 Head와 Body로 데이터를 구성하고 있다.
각 항목에 데이터를 기입하여 시각화할 데이터를 제공할 수 있다.
<!DOCTYPE html>
<html lang=”ko”>
<head>
<meta charset="utf-8">
<title>머리부분</title>
</head>
<body>
몸통부분
<p>문단을 분리할 수 있습니다.</p>
</body>
</html>
위의 코드를 TXT로 작성하여 확장자를 HTML으로 변경하면, 웹 페이지로 연결하여 정보를 확인할 수 있다.
웹 페이지의 헤더는 해당 페이지의 이름, 바디는 출력되는 페이지 안의 데이터를 말한다.
2. HTML의 문서 (HTML Documents) 구조
HTML은 컴퓨터와 소통하기 위한 하나의 언어이다.
때문에 컴퓨터가 잘 이해할 수 있도록 문서를 만들 때 일종의 법칙이 존재한다.
형식을 정확하게 맞춰주어야 의도한 대로 모양이 나온다.
Notice: Tag (정식명칭: 브라켓)의 개념: <> 기호를 이용하여 표시하는 데이터 저장방식의 일종이다.
태그를 기준으로 컴퓨터가 해당 데이터를 어떻게 이해할 것인지를 결정한다.
데이터의 앞과 뒤에 표기한다.
<> 와 </>가 한 쌍으로 이루어져 있으며 이 쌍을 통하여 데이터의 포함관계를 표현한다.
예) <형식> 데이터 </형식>
3. HTML 기본 구성
<HTML></html>이라는 커다란 구조 내부에 정보를 표현할 <head></head>, 내용을 표현할 <body></body>를 넣어서 기본 형태를 구성한다.
그 후 해당 형태에서 자신이 원하는 곳에 데이터를 기입한다.
3.1. 선언구 <!DOCTYPE html>
html은 웹을 통해 구현된다. 때문에 선언구를 통해 해당 페이지가 html을 지원하고 있음을 표시할 필요가 있다.
해당 선언구는 일반적으로 html5를 지원한다는 의미로 사용한다.
3.2. html
html은 해당 구조가 어떠한 데이터의 규칙으로 구성되어 있는지 말한다.
인터넷은 다양한 국가와 언어권의 사람들이 사용한다.
때문에 사용자에 맞춰 해당 페이지가 어떠한 언어를 기준으로 작성되었는지 제시할 필요가 있다.
이는 html에서 lang을 통해 지정하며, 각 나라 언어를 표현하는 일부 축약 정보를 기입하여 표시한다.
예) <html lang=”ko”>
3.3. head
head는 해당 페이지가 가지는 큰 규격을 규정한다. 해
당 페이지가 어떠한 언어로 작성되었는지, 탭에 표시될 글자(title)가 무엇인지를 정할 수 있다. 즉 브라우저가 가지는 속성을 정하는 영역이다.
예) head에서 UTF-8이라고 작성된다면, 이는 해당 로직이 어떤 언어를 지원하는지 표현하고 규정하는 것이다.
<meta charset = “utf-8”>
Notice: meta data는 무엇일까?
많은 학문은 특정 정보를 이해할 때, 다른 데이터를 기초로 하여 이해한다.
메타데이터는 데이터를 해석하기 위한 데이터를 말한다.
html은 다양한 사용자를 바탕으로 한다.
때문에 개발자가 사용자에게 표현한 언어에 따라 이를 해석하기 위한 데이터를 지정해줘야 하는 것이다.
3.4. body
body는 해당 html에서 표현하는 페이지(탭을 제외한 아래)를 말한다.
3.5. 기본 실습 (html)
웹 페이지에서 F12를 눌러서 구조와 정보 파악해보기
4. 시맨틱 (Semantic) 태그
눈에 보이지는 않지만 특정 분류를 묶는 역할을 한다.
body 내부에서 영역을 세분화 하여 Developer 들이 개발 및 보수를 용이하게 하는 영역 분류 방법을 말한다.
통상적으로 <header></header>, <main></main>, <footer></footer>로 나누지만 회사마다 사용법이 다르다.
최신(2021년 기준) 트렌드는 <div id=”header”></div>로 사용하는 것이다.
다만 해당 시맨틱 태그의 분류를 반드시 사용하여야 하는 것은 아니며, 사용법도 개개인이 다르기 때문이 이 점을 염두하여 ‘이러한 기능’이 있다는 정보만 기억하자.
4.1. 메인 콘텐츠를 분류하는 Tag: <main></main>
웹 페이지의 주요 컨텐츠를 표현하는 영역이다.
4.2. 독립된 콘텐츠를 분류하는 Tag: <article></article>
기사나 독립된 일부 컨텐츠를 표현하는 영역으로 main 외의 콘텐츠를 담는 영역이다.
4.3. 콘텐츠 영역을 지정하는 Tag: <section></section>
main이나 영역 내에서 ‘영역’을 세분화 하는 것을 말한다.
'HTML > 기본 이론' 카테고리의 다른 글
| [HTML] Chapter 06. 멀티미디어 삽입과 경로 지정 (0) | 2021.05.07 |
|---|---|
| [HTML] Chapter 05. 표만들기 (0) | 2021.05.06 |
| [HTML] Chapter 04. 목록 형성 (0) | 2021.05.05 |
| [HTML] Chapter 03. HTML의 문자 표시 (0) | 2021.05.04 |
| [HTML] Chapter 01. HTML 기본 개념 (0) | 2021.05.02 |
