본문 바로가기
생활코딩 HTML + CSS + 자바스크립트/HTML 이론

13 문서의 구조와 슈퍼스타들

by Hwanii_ 2023. 7. 1.
728x90

1.

정보가 많아지면, 정보를 잘 정리 정돈하기 위해서 무엇이 필요할까 ?

>> 체계와 구조가 필요 하다.

 

2.

<title> 태그를 이용한 제목 설정 하기.

 

 

<title> 태그를 사용 하지 않으면, 위와 같이, 웹 페이지의 제목이 파일 이름으로 나오게 된다.

 

원하는 제목으로 변경 하고 싶으면, <title> 태그를 사용 하자.

 

 

 

제목이 잘 변경된 것을 확인 할 수 있다.

 

3.

<title> 태그의 특징은 다음과 같다.

 

1) 사용자에게 웹 페이지의 제목을 명시적으로 알려줄 수 있다.

 

2) 검색 엔진과 같은 기계들이 바로 <title> 태그 이다.

책으로 치면, 책 표지의 제목과 같은 정보 로서 사용 된다.

 

3) 따라서, 웹 페이지를 만들 때, <title> 태그를 사용 하지 않는것은 손해를 보는 것이다.

 

4.

UTF-8 이란 ?

컴퓨터는 모든 정보를 0 아니면 1로 저장 한다.

0과 1을 어떤 방식으로 저장할 것인지를 선택을 할 수 있고,

그 선택 방식 중 하나가 UTF-8 방식 이다.

 

한국어가 깨져서 출력 된다면, 아래와 같이 <meta> 태그를 작성 한다.

 

 

charset 은, char.

character 에서 나온 단어 이다.

== 문자.

 

set은 집합 이라는 뜻 이다.

 

즉, 문자 집합 이라는 단어 이다.

 

웹 브라우저야 문자를 UTF-8 방식으로 읽어줘 ~

 

5.

 

 

빨간색 영역과, 파란색 영역은 차이가 존재 한다.

 

본문을 설명 하는 영역

/

본문 그 자체의 영역

 

이다.

 

<title> 태그는 본문의 제목이 무엇인지를 설명 하고,

<meta charset = "utf-8"> 은 이 본문이 UTF-8 방식으로 저장돼 있다는 것을 설명 한다.

 

HTML을 만든 사람들은, 본문은 <body> 태그로 묶기로 약속 했다.

 

앞으로는, 본문을 <body> 태그로 묶으면 된다.

 

또한,

본문을 설명하는 영역 == <body> 영역을 설명하는 영역

<head> 태그로 묶기로 약속 했다.

 

6.

 

 

즉, HTML 에 있는 모든 태그는 <head> 태그 또는 <body> 태그 중 하나의

내부에 위치하게 된다.

 

이 태그들은 다른 태그들을 감싸고 있기 때문에 고위직 태그 라고 말할 수 있는데,

이 둘을 감싸는 단 하나의 최고위층 태그가 있다.

 

바로, <html> 이라는 태그 이다.

 

7.

<html> 태그 상단에는 관용적으로, 아래와 같이 표현 한다.

 

<!DOCTYPE HTML>

 

이 문서에는 HTML 태그 언어가 담겨 있어요 ~

라는 뜻을 가지는 표현 이라고 보면 된다.

 

8.

 

 

9.

 

실제로 티스토리 웹 페이지의 소스를 보면 아래와 같이 구성 되어 있음을 볼 수 있다.

 

 

<!DOCTYPE HTML>

 

<html> 태그

 

<head> 태그

 

<body> 태그

 

..

반응형