HTML 기초적인 문법에 대해 알아보겠습니다.

저번 포스팅에서 HTML 문법을 크게 6가지로 태그, 속성, 중첩, 빈 태그, 공백, 주석으로 나눌 수 있다고 하였습니다. 이번 포스팅에서는 HTML 문법에 대해 알아보겠습니다. 먼저 태그에 대해 알아보겠습니다.

 

태그란?

HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙입니다.

태그는 '무언가를 표시하기 위한 꼬리표, 이름표'라는 의미가 있으며, HTML에서도 이와 비슷한 의미로 해석됩니다.

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

 

태그를 사용하는 방법

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

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

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

태그의 기본적인 예시를 알아보겠습니다.

<h1>안녕하세요 보물창고</h1>

위의 예시는 <h1> 태그를 이용하여 '안녕하세요 보물창고'를  출력하는 코드입니다.

다음으로 속성에 대해 알아보겠습니다. 

 

속성이란?

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

 

속성을 사용하는 방법

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

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

속성 값은 홑 따옴표(')와 큰따옴표(")로 감싸 표현합니다.

<h1 id="example">안녕하세요 보물창고</h1>

위의 예시는 <h1> 태그에 id속성을 선언한 예시입니다.

<h1 id="example" class="test">안녕하세요 보물창고</h1>

위의 예시는 <h1> 태그에 id속성과 class속성을 선언한 예시입니다. 속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.  속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다. 또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다. 위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다. 다음 포스팅에서는 태그 중첩과 빈 태그에 대해 알아보겠습니다.