[HTML] HTML 기본 문법 태그(tag)

태그

먼저 <h1> 태그를 예로 태그에 대해서 알아보도록 하겠습니다.  

<h1> 태그 </h1>

HTML 문서에서 대부분의 요소는 위와 마찬가지로 시작 태그(<h1>)와 종료 태그(</h1>)로 작성이 되고 그 사이에 내용이 들어갑니다. 여기서 종료 태그는 꺾쇠(<>) 안쪽 앞부분에 슬래시(/) 기호를 넣어줍니다. 시작 태그는 여는 태그라고도 하고 종료 태그는 닫는 태그라고 부르기도 합니다.

 

그래서 대개 '시작태그-내용-종료태그' 순으로 배치되는 각각의 요소들은 태그의 종류에 따라 다른 쓰임과 의미를 갖게 됩니다. 여기서 쓰임은 디자인적인 기능을 말할 수도 있고 링크를 걸어 다른 페이지와 연결해주는 등 다양한 역할을 말합니다. 의미는 겉으로 드러나는 것과 별개로 내적으로 가지게 되는 값들을 말합니다. 

 

빈 태그

덧붙여서 태그 중에는 종료 태그가 없는 태그도 존재합니다. 빈 태그(empty tag)라고 불리는데 모든 요소에 종료 태그가 필수는 아니라는 겁니다. 그러면 내용이 들어갈 자리가 없기 때문에 종료 태그와 함께 내용도 없다는 이야기가 됩니다. 떄문에 이런 빈 태그들은 추가적인 정보를 요구할 때(예: <img>)도 있지만 그 자체로 특정 역할(예: <br>)을 담당하기도 합니다.

 

<h1> 태그 외에 다양한 태그들이 존재하는데, 각각의 태그들이 어떤 역할을 하는지 직접 소스창에 입력해보면서 따로 보도록 하겠습니다. 

 

태그 중첩

태그는 중첩해서 사용하는 것도 가능합니다. 다만 주의해야 할 것은 안에 열린 건 안에서 닫아주어야 한다는 것입니다. [{()}] 괄호를 칠 때 대괄호가 가장 바깥쪽에 있고 소괄호가 가장 안쪽에서 쌍을 짓고 있는 것처럼 말입니다. 

---

속성

앞서 빈 태그에서 살짝 언급하기는 했는데 태그에 추가적으로 정보를 주어야 할 때가 있습니다. 이때 사용하게 되는 문법이 HTML 속성이라는 것입니다. 속성은 여는 태그 안에 들어가게 됩니다. 

<h1 id="title"> 태그 <h1>

아까랑 다르게 시작 태그 안에 'id="title"'이라는 부분이 추가되어 있습니다. id값으로 "title"을 주었다는 의미인데 속성은 이처럼 '속성="값"' 이라는 형태로 시작 태그에서 태그에 공백을 한 칸 주고 들어가게 됩니다. 어떤 속성인지 명시해주고 그 속성에서 어떤 값을 갖는지를 지정해주는 것입니다. 값에는 보통 큰따옴표(" ")를 많이 사용하지만 작은따옴표(' ')를 사용하는 것도 가능합니다. 경우에 따라서 여러 가지 속성을 선언하는 것도 가능합니다. 공백을 통해서 구분해 속성을 나열하면 되고 선언 순서는 딱히 의미가 없습니다. 

 

태그 안에 쓰이다 보니까 태그와 어느 정도의 상관관계는 가지게 됩니다. 그래서 태그의 종류에 따라서 사용할 수 없는 속성도 있습니다.