HTML
(Hyper Text Markup Language)
developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠
developer.mozilla.org
[특징]
- 프로그래밍 언어이며 웹 페이지를 만드는 언어이다.
웹 사이트들이 모두 HTML을 사용하여 만들어진다. - Hyper Text
단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미합니다. - Markup Language
프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있습니다. - 입문자도 쉽게 배울 수 있을 정도로 문법이 간단하다.
<HTML 문법 목차>
- 태그
- 속성
- 태그 중첩
- 빈 태그
- 공백
- 주석
1. 태그
태크(tag) : 꼬리표, 이름표
<h1> : 태그 이름(시작 태그)
(내용) Hello, HTML
: (종료 태그)
내용을 포함한 태그 전체를 요소(Element)라고 한다.
태그와 요소는 의미가 다르지만 많은 사람이 태그와 요소를 같은 의미로 사용하니 혼동하지 않도록 주의해야 한다.
위의 내용은 h1 태그를 사용하여 Hello, HTML을 출력하는 코드이다.
각 태그에는 의미가 있고, 그 의미에 맞게 사용해야한다.
태그는 XML, XHTML 등에서도 사용한다.
2. 속성
이름과 값으로 이루어져 있다.
시작 태그 안에 선언할 수 있다.
태그 이름 뒤에 한 칸띄운다.
그 후 속성 이름을 쓰고 속성 값 쓴다.
(이때 공백없이 붙여 써야한다!)
EX) <h1 id='title>Hello, HTML</h1>
속성 여러개 사용 가능
EX) <h1 id='title' class='test'>Hello, HTML</h1>
3. 태그 중첩(Nesting Tags)
태그안에 얼마든지 다른 태그르 선언 할 수 있다.
단, 안에 선언 된 태그(i)는 부모 태그(h1)를 벗어나서는 안된다.
4. 빈 태그(Empty Tag)
시작 태그만 존재하고, 종료태그는 존재하지 않는 태그이자 내용이 없는 태그이다.
화면에 표시되지 않더라도 사용되는 태그 or 속성을 통해서 화면을 나타내는 용도이다.
빈 태그를 이용해 웹문서에 text가 아닌 이미지나 동영상같은 외부 리소스를 삽입하는 경우에
브라우저가 우리 대신 내용을 그리게 할 수 있다.
(여기서는 속성src를 통해 이미지의 경로를 제공할 수 있다.)
5. 공백
HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에
위 세가지 모두 같은 텍스트가 화면에 나타나게 된다.
6. 주석
주석은 화면에 노출되지 않고 메모의 목적으로만 사용한다.
화면에 표시되지 않아 실제 서비스를 이용하는 사용자를 위한 것이아닌, 개발자들을 위한 기능이다
주석 사용 방법 : < !-- 내용 -->
만약, 꺽쇠 괄호에서 띄어쓰기가 있다면 이렇게 제대로 주석처리가 되지 않는다.
마무리
웹 페이지를 만들기 위한 가장 기본이 되는 정보는 HTML 문서 구조입니다.
브라우저는 HTML 문서 구조를 통해 HTML 버전, 문서의 제목, 정보, 내용 등을 파악합니다.
그러므로 HTML 문서 구조를 올바르게 사용하는 것이 무엇보다 중요합니다.
문서 구조를 이루는 태그와 기본 구조를 알아보도록 하겠습니다.
doctype을 통해 이 문서가 어떤 버젼으로 작성되었는지 브라우저에게 알려준다. 최상단에 위치해야한다. 꼭 있어야한다.
<!DOCTYPE html> # doctype을 통해 이 문서가 어떤 버젼으로 작성되었는지 브라우저에게 알려준다. 최상단에 위치해야한다. 꼭 있어야한다.
<html lang="ko"> # 한국어(ko)로 작성되었음을 알려줌
<head> # head태그 : meta, title 등 여러가지 태그이다. (기본 정보 or 외부 파일 연결 등)
<meta charset="UTF-8"> # 인코딩 방식(서버에 따라서)
<title>HTML</title> # 타이틀 태그
</head>
<body> # 실제 브라우저 안에 들어가는 내용
<h1>Hello, HTML</h1>
</body>
</html>
title은 오른쪽 위 Tab bar에 표시가 된다.
그리고 body의 내용은 브라우저에서 볼 수 있다.
Quiz 1
'Dev > 🌐 Web' 카테고리의 다른 글
| vitepress를 만들고 빌드하여 AWS S3로 배포해보아요. (0) | 2024.06.25 |
|---|---|
| 서버가 만든 쿠키와 웹 스토리지 (0) | 2023.01.05 |
| [Web] HTML 태그 (feat. 부스트코스 _비전공자를 위한 HTML/CSS ) (0) | 2022.05.04 |
댓글