상세 컨텐츠

본문 제목

[HTML5/CSS3] HTML 기본구조와 meta태그

개발공부/HTML CSS

by 임우찬 2019. 9. 12. 20:27

본문

 

1. HTML이란?

​

HTML(Hyper Text Markup Language)

이 약자에서 볼 수 있는 것처럼, html은 프로그래밍 언어가 아니라, 마크업 언어이다.

HTML은 태그를 이용해 웹 문서의 틀을 만드는 언어라고 보면 된다.

HTML로 문서의 뼈대를 만들고, CSS는 HTML로 뼈대를 잡은 웹 문서를 꾸며주는 역할을 한다고 보면 된다.

​

에디터는 어떤 것을 써야할까?

정말 아무거나 써도 된다.

메모장에다 코드를 작성하고 확장자명을 .html로 하여 실행하여도 무관하다.

2. HTML 문서 기본구조

​

<!DOCTYPE HTML>
<HTML>
<HEAD> </HEAD>
<BODY> </BODY>
</HTML>

태그들은 일반적으로 열고 닫는 형태로 사용한다.(전부는 아니다.)

첫 번째 태그를 보겠다.

<!doctype html>부분이 있는데, 이 "doctype"은

Document Type definition의 약자이다.

즉, 문서 형태의 정의가 html로 되어있다는 말이다.

뒤의 html은 html4 등으로 바꿀 수도 있는데, 우리가 일반적으로 사용하는 html은 html5버전이다. 그냥 html이라고 쓰면, html5버전이라고 알아서 인식한다.

​

이후 <html>태그 안에 <head>태그와 <body>태그가 있는데, <head> 태그 안의 정보들은 일반적으로, 그 문서에 대한 정보들을 담고 있다고 생각하면 된다.

<body> 태그 안에 우리 눈으로 보이는 뼈대들이 들어간다.

3. Head태그와 meta태그

​

위에서 <head>태그 안의 정보들은 일반적으로 그 문서에 대한 정보들을 담고 있다고 생각하면 된다고 했다. 그렇다면 어떤 정보들이 들어갈까?

예시를 들겠다.

<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<meta name="Description" content="소개할 내용" />
<meta name="Keywords" content="키워드1번, 키워드2" />
<meta name="author" content="내 이름" />
<meta name="generator" content="페이지 생성 프로그램" />
<meta name="viewport" content="width="1200" />
<title> hello </title>
<link rel = "stylesheet" href = "hello.css" />
.......
</head>

head태그 안에 <meta> 태그 가 있다. 이 태그들은 우선 단일태그이다.

보이는 것처럼 태그가 열고 닫는 형식이 아니라 하나의 태그로만 사용된다.

이 meta태그는 생성한 웹 문서에 대한 정보들이 들어가게 된다.

​

기본적인 형식은 다음과 같다.

< meta 속성 = "속성값"/>

위 예시로 메타 태그들이 여러 개 있었는데, 이를 설명하겠다.

<meta charset = "utf-8" />
<meta name="Description" content="소개할 내용" />
<meta name="Keywords" content="키워드1번, 키워드2" />
<meta name="author" content="내 이름" />
<meta name="generator" content="페이지 생성 프로그램" />
<meta name="viewport" content="width="1200" />

우선, charset속성은 인코딩 방식을 묻는 것이다.

현재 페이지의 문자셋들을 어떤 방식으로 출력할 지를 결정하는 속성으로, 만약 깨져보인다면 이 속성의 속성값과 실제 페이지의 인코딩방식이 달라 깨졌을 가능성이 있다. 일반적으로 'EUC-KR' 이나 'UTF-8'을 주로 사용한다.

​

Description 속성은 검색엔진과 주로 연관이 있다. 현재 페이지를 간략하게 소개하는 내용을 content에 적고, 이는 공유같은 것을 했을 때 활용이 가능하다.

kewords 는 페이지의 키워드에 대한 정보들을 담고 있다. 페이지의 키워드들을 content에 넣어준다. 이는 검색엔진이 검색을 잘 할수 있도록 해준다.

​

author 속성은 페이지의 저자를 나타낸다

메타 정보가 큰 의미는 없지만, 소스코드 상에서 제작자가 누구인지 알 수 있다.

generator 속성은 이 웹페이지를 생성한 프로그램명이 들어간다. 이는 일반적으로 그 프로그램에서 자동으로 들어가기 때문에 굳이 쓸 일은 없다.

​

viewport(뷰포트) 속성은, 모바일 환경을 위해 쓰는 속성이다.

만약, 모바일로 PC버전의 사이트를 접속하면 이 페이지를 축소하는 것을 도와주는 속성이다.

​

<title> hello </title>
<link rel = "stylesheet" href = "hello.css" />

이 태그들 중, title은

이렇게 위에 뜨는 이름이다. 이 값을 바꾸면 저기 뜨는 이름이 바뀐다.

​

link 속성은 다른 정적 파일들을 가져오는 태그이다. rel이 가져올 파일의 종류이고, href가 가져오는 파일의 위치와 이름이다.

댓글 영역

티스토리툴바