HTML #4 -주요범위 및 메타데이터-

Seung min, Yoo·2021년 3월 9일

안녕하세요 이번에는 원래 태그별로 정리를 하려고 했었는데요.
태그별로 정리하기 이전에 크게 HTML의 틀을 알아보는 것이 맞는것 같아요.
그래서 이번에는 HTML의 큰 틀과 세부사항을 알아보도록 할게요.

HTML의 기본구조

<!doctype html> -----1.
<html lang="ko">-----2.
<head>(head태그:문서의 정보를 입력)
- HTML문서의 제목(title태그/브라우저 탭 부분에 노출됨.)
- 기타정보(메타데이터)
- 스타일을 직접입력
- 스타일을 외부에서 가져와 연결
</head>
<body>(body태그:문서의 구조를 입력)
</body>
</html>

"!doctype html"을 입력함으로써 이 이하의 내용은 html5버전으로 해석해서 브라우저에 출력해달라는 명령어에요.

html lang="ko"라는 것을 보면 html문서가 갖을 기본적인 언어를 적게 되는 것인데요.
ISO 639-1을 보면을 위키백과에 검색해보면 알 수 있습니다!
위키백과 ISO 639-1

메타데이터(메타태그)

1. charset 태그

<meta charset="utf-8">
<meta charset="EUC-KR">

charset="utf-8"은 문자가 코딩되는 방식을 설정하는 것이다.

charset="EUC-KR"이라는 설정법도 있지만 EUC-KR은 완성형
ex) 완 성 형

charset="utf-8"은 조합형이다.
ex) ㅈ ㅗ ㅎ ㅏ ㅂ ㅎ ㅕ ㅇ

완성형은 오류가 나는 경우가 많기 때문에 주로 조합형을 사용한다.

2. content

name의 값을 작성할때 사용한다.

http=equiv의 값을 작성할때 사용한다.

3. http-equiv

이 속성의 값으로 서버나 사용자 에이전트의 작동방식을 변경할 수 있는 지시를 정의할 수 있다.

4. name

author이나 description의 값을 명시할 때 사용한다.
즉, 문서레벨의 메타데이터의 이름을 정의할 때 사용한다.

ex)

<meta name="author" content="Seung Min Yoo">
<meta name="description" content="Seung Min Yoo의 사이트 입니다."
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="~"

💡 1. 여기서 meta http-equiv="X-UA-Compatible" content="ie=edge"의 뜻은 인터넷에 최신의 인터넷 익스플로러로 렌더링 방식으로 출력되게 하는 명령어.

💡 2. 반응형 웹사이트를 제공하기 위해서 필요한 코드이다. 뷰포트는 화면의 정보를 렌더링하기 위해 화면의 영역을 설정할때 사용하는 도구이다.

link태그

외부 리소스의 연결 및 현재 문서와의 관계를 명시하는 태그다.

<link rel="stylesheet" href="./main.css">

위와 같이 쓸 수 있고, 위에서 stylesheet의경우 css파일임을 의미하고
href="./css"에서 href으로 참조를," ./ "는 주변에 있는 문서를 의미하게 된다.

style태그

<head>
div{ color:red; background:blue;}
</head>

이렇게 쓸 수 있으며 무조건 head태그가 아닌 body태그 안에도 쓰일 수 있지만
기본적으로 head태그 안에 쓰는 것이 html이 브라우저에서 일으키는 동작의 프로세스에 있어서
효율적인 방식은 아니다. 그러므로 head태그 안에 쓰는 것이 낫다.

type태그

mime type은 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
즉, 가져오는 문서의 해당하는 타입의 종류를 명시해야 서버부분이나 클라이언트 쪽에서 정확하게
인지를 하고 오류를 방지하기 위한 방식을 설정해야한다는 것이다.

base태그

<!doctype html>
<html>
<head>
<meta name="author" content="Seung Min Yoo">
<meta name="description" content="Seung Min Yoo의 사이트 입니다."
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="~"
<base href="./css/"
<link rel="stylesheet" href="./css/main.css">
</head>
</html>

만약 폴더안에 또 다른 css파일을 만든다고 하면 link태그로 폴더 안을 들어갈 수도 있다.
하지만 base태그로 기준을 삼아버린다면 상대경로는 위와 같이 설정한다면 ./css/가 기본으로 설정된다.
💡주의할점은 base태그는 html문서에서 단 한번밖에 삼지 못한다.

추가

<!doctype html>
<html>
<head>
<meta name="author" content="Seung Min Yoo">
<meta name="description" content="Seung Min Yoo의 사이트 입니다."
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="~"
<base href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Hubble_ultra_deep_field.jpg/">
</head>
<body>
<img src="400px-Hubble_ultra_deep_field.jpg">
</body>
</html>