03. HTML Tag 이해하기

qpress 2020년 2월 19일 25

앞선 글들에서 HTML 문서의 전반적인 구조와 구성요소에 대해 이해가 되었다는 가정 하에, 태그라는 것에 대해 한걸음 더 들어가 보도록 하겠습니다.

2,000년대 초반 인터넷 커뮤니티 및 게시판이 유행할 때 포토샵 만큼이나 HTML 태그가 대중화 된 적이 있었습니다. 게시물 작성 시 제목을 움직이게 한다든지, 제목의 색깔을 바꾸기 위해 간단한 태그들을 많이 사용 했었습니다. 지금은 그러한 태그 사용을 못하도록 제약이 되고 있지만, 태그를 이해하는 좋은 사례라고 볼 수있습니다.

<strong>제목</strong>

지금은 권장되지 않는 태그이지만 인터넷 초창기에 비 개발자도 이러한 태그 정도는 많이 사용하곤 했습니다.

이렇듯 태그는 텍스트 등의 내용에 대한 Style과 배치 등을 지정하는 역할 을 합니다.

1. 태그의 기본 문법

가장 많이 사용하는 문단 테그인 ‘P’ 태그를 예를 들겠습니다.

<p>
    P 태그는 설명 등 텍스트 문단에 주로 사용 되어 집니다.
</p>

태그는 기본적으로 ‘<>내용</>’ 형태로 영역을 지정하는 방식으로 사용됩니다. 반드시 닫는 태그(</>)가 있어야 합니다.

가끔 닫는 태그가 필요 없는 경우가 있는데 선을 표시하는 ‘<hr>’ 태그가 대표적인 예입니다. 다만, 진화된 웹 표준에서는 이렇게 닫는 형식이 없는 태그는 권하지 않는 요소라는 점은 참고 하시기 바랍니다.

2. 태그의 속성(Attribute)

태그는 단순해 보이지만 다양한 속성을 부여할 수 있고 그 속성에 따라 내용을 다양하게 보이게 할 수 있습니다.

<p style="color:red;font-weight:bold" id="first" onclick="alert('왜 눌렀어?')">
    P 태그는 설명 등 텍스트 문단에 주로 사용 되어 집니다.
</p>

위 예제에서 P 태그에 많은 것이 추가 되어 있습니다. 이렇게 태그에 주가되는 것들을 ‘속성(Attribute)’이라고 합니다.가장 대표적인 속성이 ‘style’ 속성입니다. Style 속성에서 각종 서식을 지정하기 때문입니다. 예제에서는 Style 속성을 이용해서 내용을 굵은 빨간색으로 변경 하였습니다.Style 속성 이외에도 다양한 속성을 추가 할 수 있는데, 다소 어려워질 수 있기 때문에 여기서는 Style 속성의 개념만 잘 이해하는 것이 좋겠습니다.

3. 태그와 표준, 그리고 브라우저

HTML 문서를 보여주는 Tool은 브라우저 입니다. 즉, 브라우저가 HTML 문법을 이해하고 내용을 뿌려 주는 역할을 하는 것입니다.

Explorer, Chrome, Safari, FireFox 등 다양한 브라우저가 있는데 어떤 브라우저로 보든지 동일한 서식과 내용이 보입니다.(물론 미세한 차이가 있거나, 어떤 브라우저는 지원이 안되는 요소도 있지만)
이렇게 다른 회사들이 만든 브라우저가 동일한 해석을 하려면, 동일한 약속이 있어야 합니다. HTML 문서를 만드는 저작자(Publisher,개발자,회사 등)와 브라우저 개발자가 모두 이해하는 동일한 약속, 이것이 바로 표준 입니다.

HTML에 대한 표준을 만드는 것은 특정 회사나 사람이 아니라 일종의 국제 컨소시엄입니다. 바로 ‘W3C’ ( World Wide Web Consortium ) 입니다. W3C는 World Wide Web의 창시자로 불리는 팀 버너스리( Tim Berners-Lee)를 중심으로 설립되어 지금까지 웹 표준과 프로토콜을 제정/관리 하고 있습니다.
W3C에 대한 자세한 내용은 아래 링크된 위키백과를 참고 하기 바랍니다.
https://ko.wikipedia.org/wiki/W3C

그리고, W3C의 표준을 가장 잘 설명하고, 쉽게 체험해 볼 수 있는 대표적인 사이트인 https://www.w3schools.com/ 도 반드시 방문해 보기 바랍니다.
이 사이트는 무엇보다 영문이 이해하기 매우 쉽고 바로 바로 코딩을 해볼 수 있다는 것이 큰 장점입니다.