[HTML 이해하기] HTML 문법

목차

 

1. 태그

2. 속성

3. 태그 중첩

4. 빈 태그

5. 공백

6. 주석

 

※ 실제 HTML 문법이 목차대로 구분되어 있지는 않음.

---

태그

 

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 기본이 되는 규칙이다.

태그는 '무언가를 표시하기 위한 꼬리표, 이름표' 라는 뜻이 있으며, HTML에서도 비슷한 의미로 사용된다.

우리가 다양한 태그들을 이용해 코드를 작성하면, 브라우저가 이를 인식해 내용을 표현하게 된다.

 

 

 

태그를 사용하는 방법

태그는 <, > 기호로 표현하며 <, > 기호 사이에 태그 이름이 들어간다.

대부분 태그는 시작 태그와 종료 태그로 이루어지며 종료 태그는 태그 이름 앞에 '/' 기호가 붙는다.

시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용이 위치한다.

 

<h1>Hello, HTML</h1>

위는 태그의 가장 기본적인 예로, <h1>을 이용해 'Hello, HTML'을 출력하는 코드이다.

꺾쇠괄호 안에 있는 'h1'이 태그 이름이다.

앞의 태그(<h1>)가 시작 태그이고 뒤에 있는 태그(</h1>)가 종료 태그이다.

태그로 감싸진 'Hello, HTML'이 내용이다.

 

 

 

요소란?

내용을 포함한 태그 전체를 요소(Element)라고 한다.

태그와 요소는 의미가 다르지만 많은 사람들이 태그와 요소를 혼용해서 사용하는 경우가 있다.

---

속성

 

속성이란?

속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.

 

 

 

속성을 사용하는 방법

속성은 이름과 값으로 이루어져 있다.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름='속성값'으로 표현한다.

속성값은 홑따옴표나 쌍따옴표 모두 사용할 수 있다.

 

<h1 id='title'>Hello, HTML</h1>

 위 코드는 <h1>태그에 id 속성을 추가해 title 값을 선언한 코드이다.

이 때, id='title'은 id = 'title'처럼 공백을 사용하면 안된다.

 

 

 

여러 속성을 사용하는 방법

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 개의 속성을 선언할 수 있다.

여러 속성을 선언할 때는 공백으로 속성들을 구분하여 사용한다.

 

<h1 id='title' class='test'>Hello, HTML</h1>

위 코드는 <h1>태그에 id와 class 2개의 속성을 선언한 코드이다.

속성의 선언 순서는 태그에 영향을 미치지 않는다.

 

 

 

속성의 종류

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에만 사용할 수 있는 속성으로 구분된다.

또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다.

---

태그 중첩

 

태그의 중첩

태그 안에 다른 태그를 선언할 수 있다.

태그를 중첩해서 사용할 때 중첩되는 태그는 부모 태그를 벗어나서는 안된다.

부모 태그는 가장 바깥의 태그라고 이해하면 된다.

 

<h1>Hello, <i>HTML</h1></i>

위 코드는 잘못된 코드이다.

시작 태그인 <h1> 안에서 <i>가 시작되었으나, 부모 태그인 <h1>이 <i>보다 먼저 종료되었기 때문이다.

 

<h1>Hello, <i>HTML</i></h1>

올바른 코드로 수정하려면 <h1>태그가 종료되기 전에 <i>태그를 종료해야한다.

 

태그 안에서는 중첩이 얼마나 되는지, 어떤 태그를 쓰는지는 중요하지 않다.

다만, 때에 따라 정해진 태그만 중첩할 수 있기도 하다.

---

빈 태그

 

빈 태그란?

태그는 기본적으로 시작 태그와 종료 태그 2개가 쌍으로 이루어져 있으며, 그 사이에 내용이 들어가게 된다.

그런데 태그 중에는 그렇지 않은 태그도 존재한다.

이런 태그들을 빈 태그라고 부른다.

 

<br>
<img src=''>
<input type=''>

위 코드는 빈 태그의 예시이다.

빈 태그는 내용이 없어 종료 태그가 필요하지 않다.

 

 

 

빈 태그의 특징

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나 화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다.

빈 태그의 대표적인 경우는 웹 브라우저가 직접 화면에 내용을 그려줘야 하는 경우이다.

이런 태그는 브라우저가 내용을 대체한다고 하여 대체 태그, replacement 태그, 대체되는 태그라고 한다.

이미지나 동영상처럼 외부 리소스를 가져와야할 때 사용하는 <img src=''>태그가 대체 태그의 예이다.

 

빈 태그에 대체 태그만 있는 것은 아니며, 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그들도 존재한다.

<br>태그가 이런 태그의 예이다.

---

공백

 

HTML에서의 공백

기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.

 

<h1>Hello, HTML</h1>
<h1>Hello,    HTML</h1>
<h1>
Hello,
HTML
</h1>

위 코드에서 두번째, 세번째 코드는 공백과 개행을 섞어 작성했다.

 

Hello, HTML

Hello, HTML

Hello, HTML

하지만 실행 결과를 보면 모두 똑같은 텍스트가 화면에 출력되는 것을 볼 수 있다.

 

HTML에서의 공백 처리에 관해서는 이후에 알아보도록 한다.

---

주석

 

HTML에서의 주석

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미한다.

대부분의 프로그래밍 언어와 역할은 같다.

 

주석의 시작은 <!-- 로 표시하고 --> 표시로 종료한다.

<!-- Hello, HTML -->
<h1>Hello, HTML</h1>

---

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS