HTML
>Hyper Text Markup Language의 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어다. 즉, 구조를 설계할때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.
구조
크게 세개로 구분할 수 있다.
(0. 선언)
HTML을 작성하기 위해 필요한 문서타입.
정확하게는 구조 중 하나가 아닌 HTML을 작성하기 위한 필수적인 요소.
1. <head> 영역
html 태그 안에서 기본, 부가적인 정보와 제목, 이 페이지를 검색하기 위해서 필요한 키워드 등을 작성한다.
2. <body> 영역
html 태그 안에서 브라우져 안에 출력되는 내용을 작성한다.
<!DOCTYPE html> <!--0. html의 선언-->
<html> <!--html의 *태그로 시작-->
<head> <!-- 1. 기본적인 정보-->
</head>
<body> <!-- 2. 실제 화면에 출력될 것-->
</body>
</html><!--html태그로 종료-->*태그
: 컨텐츠 또는 요소(element)들을 감싸기 위해 존재한다.
일반적으로 open tag(여는 태그)와 close tag(닫는 태그)로 구성되어 있으며
<여는 태그> , </닫는 태그> 처럼 / 로 구분한다. (예외 존재)
1. 선언
HTML 문서 작성을 위한 DTD
HTML을 작성하려면 반드시 문서타입이란 것이 필요하다.
"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이라 쓰인다.문서 타입을 DTD 라고 하며, DTD(DOCTYPE or Document type Definition)는 반드시 HTML 문서의 최상단에 위치해야 한다.
이러한 문서형 정의로 HTML5, HTML4, XHTML 세가지 문서 유형이 존재하며 주로 사용하는 유형은 HTML5이다.
<!DOCTYPE html>
HTML4을 사용하면 현재 사장된 태그들을 사용해도 화면에 출력할 수 있게 된다. (뒤의 loose.dtd 때문에)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
웹 브라우져에서 뒤의 html 없이 <!DOCTYPE>만 쓰면 각 브라우저마다 다른 형태의 결과물을 보여주게 되는데 이것을 방지하기 위해 문서 형식 선언을 하고 그로 인해 HTML 문서를 표준모드로 렌더링 할 수 있게된다.
2. 여러 태그의 속성
입력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML 첫문서</title>
</head>
<body>
<h1><html 첫문서></h1>
안녕하세요
<p style="color:red">문단</p>
</body>
</html>출력
-
lang : 문서에서 사용할 언어 지정.
ko : 한국어 , en : 영어 , zh : 중국어 ... 등등
-
meta : 이 페이지에서 필요한 문자를 지정.(VScode의 언어와 맞춤) 잘못 입력할 시 body태그 안의 내용이 깨지거나 이상하게 보일 수 있음.
<meta charset="utf-8"> //Unicode Transformation Format- 8bit -
title : 문서의 정보를 브라우져에 표시.
-
h(숫자)태그 : 제목을 표시할 때 사용. 1~6까지 있으며 6으로 갈수록 글자가 작아진다. 사용할땐
<h1>부터 차례대로 사용해야함.
Ex)<h1>태그를 사용하기 전에(위에)<h2>를 먼저 사용한다던가 할 수 없음. -
p태그 : 새 문단을 염. 추가 입력으로 그 문단의 글씨 색, 크기, 글꼴 등을 바꿀 수 있지만 직접적으로 매 문단마다 바꾸는 것은 비효율적이라 비추천.
-
코드에서 오해를 부를 수 있는 특수문자들을 작성할땐(ex. 태그를 구분하는
<,>등) 엔티티코드 를 사용, enritycode.com 에서 찾아볼수 있다.
출처 https://webclub.tistory.com/608
https://velog.io/@ts6938/UTF-8%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C
https://abcdqbbq.tistory.com/2
