HTML Tags

HTML 태그란 무엇일까요?

앞 전 설명에서 HTML 은 사람의 장기들을 받쳐 주는 뼈/골격과 비슷하다고 얘기드렸었습니다

웹사이트 내용물들의 골격을 떠 받쳐주는 역할을 하죠.

HTML 태그는 이러한 구조물을 편리하게 그리기 위한 최소 단위입니다.

자연스럽게 자라나는 뼈와는 다르게, 웹사이트는 여러분들이 직접 구조를 처음부터 만들어 주어야 합니다.

즉 웹사이트의 뼈대를 그려줄 때 반복적인 부분들을 효율적으로 그려줌으로써, 생산성 있는 작업을 도모하는 것이 필수적이란 의미지요

사람의 뼈도 잘 보시면 일정한 패턴을 가지고 있음을 확인할 수 있습니다 갈비뼈들의 생김새나, 골반뼈들의 생김새들은 각각 비슷하죠. 그리고 팔과 다리의 뼈들도 비슷한 생김새를 가졌습니다.

웹사이트 콘텐츠들도 비슷한 생김새를 가질 때가 많습니다

제목(Heading)을 나타내는 부분들이 있으며,

링크나, 본문(Paragraph)을 나타내는 부분들도 있죠

이미지가 들어갈 때도 있으며, 비디오가 들어갈 때도 있습니다

이러한 반복되는 패턴들을 효율적으로 그려주기 위해 사람들은 HTML 태그들을 만들었습니다

제목은 {'<'}h1{'>'}, {'<'}/h1{'>'} 두 꺾쇠 안에 넣어 표기하여 제목 다운 폰트 크기와 굵기 등을 갖게 만들었죠

링크는 {'<'}a{'>'}, {'<'}/a{'>'} 꺾쇠 안에 넣어 표기하여 여러분들이 익히 보셨던 파란색 글자의 밑줄이 있는 링크들의 스타일을 만들었습니다

이처럼 HTML 태그들은 반복되는 패턴들을 쉽게 재사용하고, 웹사이트의 콘텐츠의 골격을 균형적이고 통일감 있게 보여주기 위한 기초 요소들입니다.

실제 HTML 태그의 쓰임

HTML 에는 위에서 언급한 것처럼 기본적으로 태그마다 특정 스타일이 들어가 있습니다. 하지만 이 스타일을 그대로 쓰는 경우는 흔하지 않습니다. 모두가 기본값으로 지정된 스타일을 쓰길 원하지는 않기 때문이지요.

그래서 웹사이트를 만들 때, 자신이 표현하고자 하는 스타일을 정확하게 표현하기 위해서는 기본적으로 브라우저에 HTML 마다 표현해주는 스타일을 파악하여 제거하거나, 병합하여 사용해야 합니다.

또한 HTML 태그는 스타일만을 표현하는 것이 아니라, div, span 태그처럼 HTML 작성자에게 콘텐츠 구분을 도와주는 태그들이 있습니다

HTML 종류와 관련해서는 좀 더 자세하게 다음 튜토리얼에서 같이 알아보도록 하겠습니다

HTML 태그의 확장

HTML 태그가 만들어졌을 때와 지금은 웹사이트의 표현 방식이 많이 달라지고, 또 다양화되었습니다

웹사이트가 일반적인 뉴스 콘텐츠나 블로그 콘텐츠만 전달하기만 한다면 HTML 기본 태그들만으로도 충분 했을것 입니다.

하지만 점점 더 웹사이트는 복잡해졌으며, 기본적인 HTML 태그의 스타일은 충분하지 않았습니다. 또 사람들은 다양한 패턴들을 효율적으로 사용하길 원했습니다. 이에 사람들은 JavaScript를 이용해 자신만의 HTML 태그를 사용하기 시작했고 이것이 추후 다룰 '컴포넌트'입니다.

즉 컴포넌트는 HTML 태그들을 확장시킨 개념이라고 보시면 됩니다. 누구든지 원하는 패턴이나 스타일이 있는 컨텐츠 구조를 하나의 태그로 지정하여 효율적으로 사용할 수 있는 것이지요.

컴포넌트와 관해서는 다음 React 코스에서 자세히 다루도록 하겠습니다