HTML(Hyper Text Markup Language)이란 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 간단하게 말하자면 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어이고 집을 짓는 일에 비유한다면, HTML은 집의 전체적인 구조를 담당한다고 할 수 있다.
마크업 (Markup)
HTML 마크업은 HTML 요소(Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다.
- HTML 요소 (Elements)란 HTML 언어로 작성된 문서의 구성 요소를 말하며 태그(Tags), 값(Values), 속성명(Attribute Names), 속성값(Attribute Values)로 분류된다.
- 태그는 부등호(< >)모양의 특수문자가 태그 알파벳 양 옆에 감싸는 형태로, 문서의 특정 영역이 정보로써 어떤 가치가 있음을 검색 엔진에 알려준다.
- 속성이란 태그를 보조하는 명령어이다. 태그 안쪽에서 작동하며 이미지의 주소를 입력하거나, 제목이나 문단의 글씨 크기, 배경색 등을 바꾸는 CSS 효과를 담당하는 것도 속성에서 발생한다.
- 구조적 마크업은 본문의 목적을 표현한다.
- 표현적 마크업은 기능에 관계없이 본문의 외관을 표현한다.
- 하이퍼텍스트 마크업은 다른 문서와 연결시켜주는 문서의 부분이다.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Hello World!</h1>
<div>Cpntents here
<span>Here too!</span>
</div>
</body>
</html>
// DOCTYPE html 이란 웹문서가 HTML 문서임을 명시한다.
// html 태그는 시작 태그로, 문서 전체의 틀을 구성한다.
// head 태그는 눈에 보이지 않지만 웹 페이지를 표현하기 위해 필요한 헤더 정보를 담고있다.
// title 태그는 웹 브라우저의 페이지 제목을 정의한다.
// body 태그는 표시되는 페이지의 내용이다.
// h1 태그는 heading을 의미하며, 크기에 따라 h1부터 h6까지 있다.
// div 태그는 content division을 의미하며, 줄바꿈된다.
// span 태그는 줄바꿈이 없고 인라인 요소(Inline Element)들을 하나로 묶을 때 사용한다.
// </태그이름>은 해당 태그가 끝났음을 의미한다.
// 이외의 주요 요소들
// <br> 줄바꾸기
// <p> 단락바꾸기(한줄 떨어짐)
// <hr> 가로줄 만들기
// <center>...</center> ...을 가운데 정렬
// <font>...</font> ...의 폰트를 바꿈
// <ul><li>..<li>..</ul> ..을 순서없는 목록으로 만들기
// <ol><li>..<li>..</ul> ..을 순서있는 목록으로 만들기
'개발 일지 > etc' 카테고리의 다른 글
Port 8080 was already in use (0) | 2023.03.27 |
---|---|
정규 표현식(정규식) (0) | 2023.02.14 |
[CSS] CSS란? (1) | 2022.12.16 |
메타인지 (0) | 2022.12.15 |
성장형 마인드셋 (0) | 2022.12.06 |