✔ [콘텐츠설계] 조영광의 부스트코스 웹 UI 개발 을 수강하면서 작성하였습니다
📍 HTML 문법 - 태그
태그란?
HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다. 태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.
태그를 사용하는 방법
태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어갑니다. 대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙습니다. 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치하게 됩니다.
<h1>Hello, HTML</h1> 위는 태그의 가장 기본적인 예로, <h1>을 사용해 'Hello, HTML'을 출력하는 코드입니다.
📍 HTML 문법 - 속성
속성이란?
속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다.
속성을 사용하는 방법
속성은 이름과 값으로 이루어져 있습니다. 시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다. 속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.
<h1 id="title">Hello, HTML</h1>위는 <h1>에 id 속성을 추가해 title 값을 선언한 코드입니다.
여러 속성을 사용하는 방법
의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다. 여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.
<h1 id="title" class="main">Hello, HTML</h1>위는 <h1>에 id와 class 2개의 속성을 선언한 코드입니다.
속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.
속성의 종류
속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다.
또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다. 위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다.
📍 HTML 문법 - 태그 중첩
태그 안에 다른 태그를 선언할 수 있습니다.
태그를 중첩해서 사용 시 중첩되는 태그는 부모 태그를 벗어나서는 안 됩니다.
[잘못된 태그 선언]
<h1>Hello, <i>HTML</h1></i><h1>안에서 <i>가 시작되었으나, <i>보다 부모인 <h1>의 종료 태그가 먼저 선언되었습니다.
이렇게 엇갈리게 태그를 선언하는 것은 올바르지 않습니다.
[올바른 태그 선언]
<h1>Hello, <i>HTML</i></h1><i>의 종료 태그를 먼저 선언해준 후 <h1>의 종료 태그를 선언해야 합니다.
## 📍 HTML 문법 - 빈 태그
태그는 기본적으로 시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있으며,그 사이에 내용이 들어가게 됩니다. 하지만 태그 중에는 그렇지 않은 태그가 존재하기도 합니다. 이러한 태그를 내용이 없는 빈 태그라고 합니다.
<br>
<img src="">
<input type="">
위는 빈 태그의 예시입니다.
빈 태그는 내용이 없어서 종료 태그가 필요하지 않습니다.
빈 태그의 특징
빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그입니다. 빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우입니다. 이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 합니다. 빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재합니다.
📍 HTML 문법 - 공백
기본적으로 HTML은 두 칸 이상의 공백을 모두 무시합니다.
<h1>Hello, HTML</h1> <h1>Hello, HTML</h1> <h1> Hello, HTML </h1>
HTML은 두 칸 이상의 공백과 개행을 모두 무시하기 때문에 위 세가지 모두 같은 텍스트가 화면에 나타나게 됩니다.
📍 HTML 문법 - 주석
주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미합니다.
HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않습니다.
<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
`<!-- 주석은 여러 줄로 작성할 수도 있습니다.<h1>Hello, HTML</h1> 위 <h1>태그는 브라우저가 해석하지 않습니다.-->`
주석의 시작은 <!-- 로 표시하고, --> 표시로 종료합니다.
📍 HTML 문법 - 문서의 기본 구조
HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>Hello, HTML</h1> </body> </html>
문서 타입 정의
문서 타입 정의는 보통 DTD(doctype)라고 부릅니다.
이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 합니다.
<html>요소
문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있습니다.
<html> 태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미합니다.
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않습니다.
대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 합니다.
<meta> 태그의 charset 속성은 문자의 인코딩 방식을 지정합니다.
<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어가며, 앞으로 우리가 다루는 태그들 대부분이 모두 여기에 해당이 됩니다.
