Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- css
- 인접리스트
- 탐욕법
- JWT
- 변수
- nestjs
- html
- typescript
- queue
- 알고리즘
- 인접행렬
- winston
- node.js
- 자료구조
- javascript
- GraphQL
- 코딩테스트
- LifeCycle
- TIL
- Spring
- logger
- OOP
- 프로그래머스
- dfs
- MySQL
- Interceptor
- bean
- java
- REST API
- Deep Dive
Archives
- Today
- Total
처음부터 차근차근
[HTML] HTML이란? 본문
728x90
HTML?
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다.
- Hyper Text : 웹 페이지를 다른 페이지로 연결하는 링크를 의미한다. 즉 웹에서 자유롭게 오갈 수 있는 링크입니다.
- Mark Up : 태그 등을 이용하여 텍스트뿐만 아니라 이미지, 영상 등의 데이터 구조를 명시하는 언어의 한가지입니다.
MDN의 인용을 참고하면
문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어
즉, HTML은 콘텐츠의 구조를 정의하는 마크업 언어입니다.
HTML 기본 구조
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>
- <!DOCTYPE html> : 필수 서문으로써, 현재 문서가 HTML 언어로 작성된 웹 문서라는 의미입니다.
- <html> ~ </html> : 페이지 전체의 콘텐츠를 감싸며, 웹 문서의 시작과 끝을 나타내는 태그입니다.
lang="ko"는 문서의 고유 언어를 의미합니다. - <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요하는 정보를 입력하는 부분입니다.
HTML 페이지에 포함되고 싶어하는 모든 재료들을 위한 컨테이너 역할을 합니다.
페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등이 포함됩니다. - <meta> : 문서에 대한 메타데이터를 나타냅니다.
여기서는 charSet="UTF-8"로 나타내었는데, 이는 대부분의 문자가 포함되어 있는 UTF-8로 설정한 것입니다.
이외에도 Keyword, description, author, 다양한 메타데이터가 들어갑니다. - <title> : 페이지의 제목을 설정합니다. 로드 된 페이지 브라우저의 탭에 나타나는 제목을 의미합니다.
- <body>~<body> : 실제로 웹 브라우저 화면에 나타나는 내용입니다.
HTML 요소 분석
예제를 통해 HTML 요소를 확인해봅시다.
- 여는 태그 (Opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다. 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
- 닫는 태그 (Closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다. 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
- 콘텐츠 (Content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
- 요소 (Element): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어집니다.
요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다.
속성은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다.
클래스 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.
속성이 항상 가져야 하는 것은 다음과 같습니다.
- 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
- 속성 이름 뒤에는 등호(=)가 와야 합니다.
- 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
요소 중첩
요소를 다른 요소의 안에 놓을 수 있으며, 이것을 중첩이라고 합니다.
예시로 어떠한 내용을 강조하기 위해 글꼴을 굵게 한다면
<p>My cat is <strong>very</strong> grumpy.</p>Strong 태그를 이용해 해당 부분을 강조할 수 있습니다.
그러나 요소를 중첩할 때 정확히 중첩해야 합니다. 아래의 예시와 같이 되면 안됩니다.
<p>My cat is <strong>very grumpy.</p></strong>빈 요소
어떤 요소들은 내용을 갖지 않습니다. 이것을 빈 요소라고 합니다.
간단한 예시로 Img 태그가 있습니다.
<img src="images/firefox-icon.png" alt="My test image" />이 요소는 두 개의 속성을 포함하고 있으나, 닫는 태그가 없습니다. 이미지 요소는 효과를 주기 위해 콘텐츠를 감싸지 않기 때문입니다.
참조
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
'Mark Up > HTML' 카테고리의 다른 글
| [HTML] 자주 쓰는 HTML 태그</> 종류 (1) | 2023.11.25 |
|---|
'Mark Up/HTML' Related Articles
more
