HTML은 기본적으로 어떤 것들로 이루어져 있을까?
기본 틀
--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> 나의 첫 번째 웹 페이지 </p>
</body>
</html>--
태그
--
태그는
웹 페이지를 구성하는 요소를 정의하는 역할로
HTML 문법을 이루는 가장 작은 단위다.
기본 형식
<태그명>홑화살괄호(<>) 사이에 태그명을 넣는 형태로 이루어져 있다.
예시
<body><html>--
속성
--
속성은
"태그"에 어떤 의미나 기능을 보충하는 역할로 사용한다.
즉, 기존 태그에 대해 보충하는 의미로
사용을 해도 되고, 안 해도 되고, 여러 개를 사용해도 된다.
단, 태그 없이 단독으로는 사용이 불가능하다.
기본 형식
<태그명 속성명 = "속성값">
<태그명 속성명 = "속성값" 속성명 = "속성값">보충할 태그의 홑화살괄호(<>) 안에 작성하며, 여러 개를 작성할 때 콤마(,) 구분 없이 띄어쓰기로 구분한다.
예시
<html lang = "en">만약 <html> 태그만 사용한다면 그저 "HTML 문서의 시작"이라는 의미지만
lang = "en" 속성을 추가하여 "영어로 된 HTML 문서의 시작"이라는 구체적인 의미를 가지게 된다.
--
문법
--
HTML은 "태그"와 "속성"으로 문법을 구성하고
문법은 크게 "콘텐츠가 있는 문법"과 "콘텐츠가 없는 문법"으로 나뉜다.
여기서 "콘텐츠"는 내용을 의미한다.
- 콘텐츠가 있는 문법 : 콘텐츠 앞/뒤를 태그로 감싼다.
- 콘텐츠가 없는 문법 : 시작 태그만 사용한다. (내용이 없다는 의미로 "빈 태그"라고도 부른다.)
콘텐츠가 있는 문법 예시
<title> 나의 시작 페이지 </title>
콘텐츠 앞/뒤를 태그로 감싸고
이때 앞에 넣는 태그를 "시작 태그", 뒤에 넣는 태그를 "종료 태그"라고 부른다.
(종료 태그는 태그명 앞에 슬래시(/)가 추가로 존재한다.)
그리고 "시작 태그", "종료 태그", "콘텐츠" 이 3개를 합쳐서 "요소라고 부른다.
콘텐츠를 태그로 감싸는 것은
해당 콘텐츠가 감싼 태그에 속한다는 것을 의미한다.
- <title> : 시작 태그
- 나의 시작 페이지 : 콘텐츠
- </title> : 종료 태그
- <title> 나의 시작 페이지 </title> : 요소
콘텐츠가 없는 문법 예시
<br>
감싸야하는 콘텐츠가 없으므로 "시작 태그"만 사용된다.
--
주석
--
주석은
실행할 때 해당 프로그램에 영향을 주지 않는 것으로
그저 코드에 참고용으로 메모하는 용으로 사용된다.
기본 형식
<!-- 주석 내용~~ -->--
HTML의 기본 구조
--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> 나의 첫 번째 웹 페이지 </p>
</body>
</html>
- <!DOCTYPE html> : DTD (문서형 정의)
- <html> 태그 : HTML 문서의 시작과 끝을 의미
- <head> 태그 : 문서의 정보를 정의
- <body> 태그 : 웹 브라우저에 표시할 내용 정의
--
DTD (Document Type Declaration)
--
DTD는
"문서 유형 선언"으로
해당 문서는 html 문서 유형으로 정의한다는 것을 의미한다.
즉, 문서형 정의를 통해
웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주게 된다.
(HTML5 버전 이후로 이전 버전의 문서 형식을 정의할 필요 없이 <!DOCTYPE html>만 작성하면 알아서 된다.)
DTD 선언이 없다면
브라우저가 "비표준 모드(Quirks Mode)"로 동작할 수 있기 때문에
HTML 문서를 작성할 때 항상 처음 부분에 해당 DTD 선언을 넣어줘야 한다.
--
html 태그
--
html 태그는 HTML 문서의 최상위(root) 요소로
HTML 문서의 시작과 끝을 의미한다.
즉, 모든 태그는 html 태그 안에 작성되어야 한다.
--
head 태그
--
head 태그는
"메타데이터"를 포함하여 해당 HTML 문서에 대한 여러 정보를 정의하는 영역이다.
일반적으로 "meta", "title", "link", "style", "script" 등의 태그를 사용하여 해당 HTML 문서의 여러 정보를 정의한다.
메타데이터는
HTML 문서에 대한 정보로, 웹 브라우저에는 직접적으로 노출되지 않는다.
meta 태그
메타 데이터를 정의하는 데 사용한다.
예시 코드
<meta charset="UTF-8">HTML 문서에서 허용하는 문자 집합을 정의하는 메타데이터로 (문자 인코딩 설정)
과거에는 EUC-KR를 주로 사용했지만 최근에는 더 많은 언어를 허용하기 위해 UTF-8만 사용한다.
예시 코드
<meta http-equiv="X-UA-Compatible" content="IE=edge">인터넷 익스플로러(이하 IE)의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터로
구 버전의 렌더링 엔진을 사용하는 실험적 프로젝트가 아니라면 해당 태그를 정의하는 편이 좋다.
예시 코드
<meta name="viewport" content="width=device-width, initial-scale=1.0">기기의 화면 너비에 맞추기 위해 사용하는 메타데이터로 (반응형 웹을 위한 설정)
("viewport"는 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미)
title 태그
HTML 문서의 제목을 지정하는 데 사용한다.
(웹 페이지에서 실제로 보이는 콘텐츠 영역)
예시 코드
<title>My First Web Page!</title>
모든 HTML 문서는 반드시 1개의 title 태그를 사용하여 해당 웹 페이지의 제목을 지정해야 한다.
이때 제목은 HTML 문서마다 중복되지 않도록 주의한다. (안 되는 것은 아니다.)
--
body 태그
--
body 태그는
웹 브라우저에 노출되는 내용을 작성하는 영역으로
웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성해야 한다.
즉, 웹 페이지에서 실제로 보이는 콘텐츠 영역으로 사용자에게 보여질 "텍스트", "이미지", "링크", "버튼" 등 포함된다.
--
블록 요소와 인라인 요소
--
- 블록 요소 : 웹 브라우저의 공간 유무와 상관없이 사용할 때마다 줄 바꿈이 되는 태그
- 인라인 요소 : 웹 브라우저의 공간이 부족할 때만 줄 바꿈이 되는 태그
body태그에서 사용하는 태그 중에서
"hn태그"나 "p태그"처럼 사용할 때마다 줄 바꿈이 되는 태그를 "블록 요소"라고 부르고,
"a태그"나 "span태그"처럼 공간이 부족할 때만 줄 바꿈이 되는 태그를 "인라인 요소"라고 부른다.
--
부모, 자식, 형제 관계
--
HTML은
태그를 사용할 때 "부모", "자식", "형제"라고 하는 관계가 성립한다.
"html태그" 안에 "head태그"와 "body태그"가 존재한다.
여기서 "html태그"는 "head태그"와 "body태그"의 부모가 되고,
반대로 "head태그"와 "body태그"는 "html태그"의 자식이 된다.
그리고 "head태그"와 "body태그"는 같은 위치에 있으므로 형제가 된다.
--
'Language > HTML' 카테고리의 다른 글
| 상호작용(form) 관련 태그 (1) | 2025.02.19 |
|---|---|
| 텍스트 관련 태그 (0) | 2025.02.18 |
| 링크 및 이미지 관련 태그 (0) | 2025.02.17 |
| 목록 관련 태그 (1) | 2025.02.15 |
| 그룹 관련 태그 (0) | 2025.02.14 |
