2. 태그와 속성

이번 포스팅에서는 HTML을 사용함에 있어 가장 기본이 되는 태그와 속성에 대하여 알아보도록 하겠습니다.

 

1. 태그

태그란 HTML에서 가장 중요하고 기본이 되는 약속된 규칙인데요.

태그는 웹 문서에 표시하려는 내용을 전달하는 언어이기 때문에 확실하게 알고 사용해야 합니다.

 

기본적으로 태그는 여는 태그(<)와 닫는 태그(>)로 구성되어 있으며, 닫는 태그는 태그 이름 앞에 '/' 기호가 붙습니다.

웹 브라우저는 여는 태그와 닫는 태그 사이에 있는 문자를 태그로 인식한다는 것을 기억해 두시면 좋을 것 같습니다.

또한, 태그에 사용하는 속성들은 모두 소문자로 사용할 것을 권장하고 있습니다.

 

<h1>안녕하세요.</h1>

 

사용되는 태그의 종류들에 대해서는 이후에 포스팅할 예정이니 이번 포스팅에서는 태그의 개념에 대해서만 짚고 넘어가면 되겠습니다.

2. 속성

앞서 설명드린 태그에는 속성을 함께 사용할 수 있는데요.

속성은 시작 태그에 사용하며, 이름과 값으로 이루어져 있습니다.

사용하는 방법은 시작 태그의 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"을 작성하시면 됩니다.

 

<h1 class="title">안녕하세요.</h1>

 

그리고 속성은 하나의 태그에 여러 개를 선언할 수 있습니다.

 

<h1 id="home" class="title">안녕하세요.</h1>

 

여러 개의 속성을 선언할 때에는 속성간 공백으로 구분해 주시면 됩니다.

위의 예시에서 id, class가 속성 이름이 되고, home, title이 속성값입니다.

 

3. 태그와 속성 활용

태그는 서로 중첩하여 사용할 수도 있는데요.

태그 안에 다른 태그를 중첩하여 사용이 가능합니다.

다만, 태그를 중첩하여 사용할 시 중첩되는 태그는 부모 태그를 벗어나서는 안 되는 점 유의해 주세요.

 

[올바른 예시]

<h1>안녕하세요.<span>반갑습니다.</span></h1>

 

[잘못된 예시]

<h1>안녕하세요.<span>반갑습니다.</h1><span>

 

태그 중에는 닫는 태그가 없는 태그도 있는데요.

대표적인 예로는 <br>, <img>, <input>이 있으며, 빈 태그라고 부릅니다.

빈 태그는 닫는 태그가 없기 때문에, 태그 안에 내용을 넣지 않고 사용합니다.

각 태그들의 사용에 대해서도 추후에 다루도록 하겠습니다.

 

<div>
	<img src="" alt="">
</div>

 

또한, 태그는 기본적으로 두 칸 이상의 공백을 모두 무시합니다.

따라서, 두 칸 이상의 공백을 원하더라도 한 칸의 공백만 출력되고 이를 제어하는 수단이 추후에 다룰 CSS입니다.

4. 주석

주석은 웹 브라우저에 노출시키지 않고, 메모의 목적으로만 사용하는 것을 의미합니다.

저의 경우에는 대부분 개발자에게 전달할 내용을 기재하고 있습니다.

HTML 파일에서 주석은 <!-- 내용 --> 으로 작성합니다.

 

<!-- 주석 입력 방법입니다. -->
<h1>주석이 아니므로 화면에 노출</h1>
<!-- <h1>주석으로 처리되었으므로 화면에 노출되지 않음</h1> -->

 

참고로, 저는 주석처리를할 때 Ctrl + / 를 자주 사용하고 있습니다.

 

이후 포스팅에서는 본격적으로 태그의 종류들에 대해서 설명하는 시간을 가져보도록 하겠습니다.

오늘도 읽어주셔서 감사합니다! :)