HTML | Hyper Text Markup Language
웹 페이지를 만들 때 사용하는 언어 ➲ Markup Language
Markup Language: 자료의 구조를 표현하기 위한 언어
1. 개발 환경 세팅
개별적으로 설치할 것은 따로 없다.
0️⃣ VS code 사용(에디터는 자유)
1️⃣ Project 파일 생성(Github Repository와 연결)
2️⃣ VS code에서 Project 파일 열기
3️⃣ (파일 이름).html 파일 생성
2. HTML 기본 코드 구조
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title> Document </title>
</head>
<body> </body>
</html>3. DOCTYPE
문서 형식 선언 | Document Type Delaration
DOCTYPE 태그를 이용해 HTML 문서의 버전을 지정할 수 있다.
➥ 표준은 html5
📍 TAG | 태그
💬 HTML 태그를 사용해야 하는 이유
HTML은 Markup Language 언어이다.
즉, 자료가 어디에 어떻게 배치되어있는지 구조를 표현하기 위한 언어이다.
글자의 존재와 존재 목적을 명확하고 빠르게 알 수 있어야 한다.
<!--ex. 제목을 위한 태그-->
<h1>제목입니다.</h1>태그를 통해 웹 표준을 잘 지키는 언어임을 표현할 수 있다.
<!--ex. -->
<p> HTML에서는 p 태그 안에 글을 적어주어야 한다.</p>1. 여러가지 HTML 태그들
<p>글 본문</p>
<h1>글 제목</h1>
<img src="이미지 경로">
<a href="">링크</a>
<button>버튼</button>
<ul><li>리스트</li></ul>
<ol><li>리스트</li></ol>p: Paragraphh: Headul: Unordered Listol: Ordered Listli: List Item
2. 부모 태그, 자식 태그
- p: 부모 태그
- a: 자식 태그
<p><a> hi </a><p>
<!-- or(위 아래 모두 동일한 기능을 하는 코드) -->
<p>
<a> hi </a>
</p>📢 정리
1️⃣ 웹 페이지를 만들 때 모든 요소는 태그 안에 넣어주어야 한다.
➥ 웹 표준을 맞추기 위함
➥ 한 눈에 어떤 자료인지 파악할 수 있음
2️⃣ 일부 태그는 속성을 사용할 수 있다.
3️⃣ 태그 안에 태그를 넣어서 사용할 수 있다.
마치며
🏷 참고 자료
☑︎ 코딩 애플: HTML/CSS All-in-one 강의
여길봐까꿍