웹 개발을 위한 HTML 가이드 2편 - 기본적인 문법
분류포스트
작성일2021-05-07 18:02
웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. 가이드 전체의 흐름은 가이드 모음 글을 참고하시면 됩니다.
웹 개발을 위한 HTML 가이드 2편 시작하겠습니다. 저번 글에서 HTML에는 태그라는 요소가 있다고 언급했습니다. 영어로는 Tag라고 합니다. 이 태그라고 하는 것은 사람을 구성하는 작은 단위가 세포인 것처럼 HTML을 구성하는 단위는 태그입니다. 쉽게 말해 HTML은 이 태그로 이루어져 있다고 볼 수 있는 것이죠. 이번 글에서는 이 태그의 기본적인 문법에 대해서 알아보도록 하겠습니다.
기본적인 문법
하나의 태그는 여는 태그와 닫는 태그로 이루어집니다. 이 두가지는 보통의 경우 항상 세트입니다. 당연히 예외의 경우도 있습니다! 그 예외의 경우는 조금 후에 알아보도록 하고, 일단은 아래의 태그에서 여는 태그와 닫는 태그를 살펴보도록 합시다.
<div>Hello World!!</div>
그 전에, 태그 하나 하나를 부를 때에는 무슨 무슨 태그라고 하기도 하지만 영어권에선 요소(Element)라고 부릅니다. 위의 코드를 보자면 우리나라 같은 곳에선 div 태그라고 부르지만 영어권에선 div 요소, div 엘리먼트라고 부를 수 있다는 것이죠.
여는 태그
위의 코드에서 여는 태그는 <div> 부분 입니다. 브라우저는 HTML 코드를 위에서 아래로 읽어들이면서 태그를 발견할 때에 여는 태그부터 찾습니다. 그리고 닫는 태그를 만날 때까지 해당 요소를 그려냅니다. 렌더링을 한다는 것이죠. 여는 태그는 영어로 Opening Tag라고 부릅니다.
닫는 태그
닫는 태그는 </div> 부분 입니다. 여는 태그와 다른 점은 슬래시가 있죠? 이게 닫는다는 의미입니다. 여는 태그 다음에 닫는 태그가 오면 해당 요소가 끝났다는 것을 감지하고 그리는 것을 멈춘다. 닫는 태그는 영어로 Closing Tag라고 부릅니다.
태그의 내용
여는 태그와 닫는 태그가 있으면 그 사이에는 태그의 내용물이 들어가게 됩니다. 위의 코드에 있는 div 라는 태그는 공간을 할당하는 태그입니다. 지금은 몰라도 됩니다. 아무튼 그 안에 Hello world!!라는 문장을 적어 넣었습니다. 브라우저는 자연스럽게 div태그의 안에 내용물을 반영해서 화면을 그려줍니다.
혼자서 닫는 태그
혼자서 닫는 태그도 있습니다. 여는 태그와 닫는 태그의 기능을 하나로 끝내는 태그들입니다. 혼자서 닫는 태그들은 내용물이 들어갈 필요가 없을 때에 적용되는 이야기 입니다. 일반적으로는 닫는 태그가 없다면 혼자서 닫는 태그라고 생각하시면 됩니다.
<img src="" alt="" />
위의 태그는 img태그입니다. 화면에 이미지를 그려주는 태그입니다. 나중에 배울 거니까 지금 몰라도 됩니다. 그냥 이런 게 있구나 라고만 생각해두시면 됩니다.
딱 봐도 img태그를 보면 위에서 본 div태그와는 다른 모습을 하고 있죠. 닫는 태그가 없고 여는 태그만 있는 것 같은데 오른쪽 꺽쇄의 앞에 /(슬래시)가 위치하고 있죠. 혼자서 닫겠다는 의미입니다. 결과적으로 <이름 /> 형태가 됩니다. 혼자서 닫는 태그는 input태그 혹은 meta태그 같은 종류가 있습니다.
일반적인 HTML 문서에서는 혼자서 닫는 태그는 없어도 아무런 문제를 만들지 않지만, 혼자서 닫는 태그들은 슬래시를 넣어주는 습관을 먼저 들여주는 것이 좋습니다. 나중에 웹 개발을 본격적으로 할 때에 리액트나 뷰와 같은 자바스크립트 라이브러리, 프레임워크를 사용할 때에 편할 겁니다.
태그의 속성
태그에는 속성(Attribute)이라는 것도 있습니다. 속성들은 태그에 특정 기능을 추가하거나 어떤 특징을 갖게 해줍니다. 이는 태그에 따라, 속성에 따라 다르게 나타나게 됩니다.
<html lang="ko">
<!-- 중략 -->
</html>
속성은 이름="값"의 형태로 이루어져 있습니다. 태그의 이름과 한 칸을 띄어줘야 합니다. 그렇지 않으면 오류가 납니다. 속성들은 다양하고, 정해져 있습니다. 그렇기 때문에 적재적소에 잘 활용해야 웹 사이트의 뼈대를 효과적으로 구축할 수 있습니다.
속성은 다른 속성과 함께 사용할 수 있습니다. 이 역시 띄어쓰기로 구분합니다. 개발자가 임의로 만들 수 있는 커스텀 속성도 있습니다. 하지만 그것들은 훗날에 알아보기로 합시다. 속성 중에는 id 속성, class 속성, style 속성 등등의 모든 태그가 사용할 수 있는 공통적인 속성이 존재합니다. 이것들에 대해서는 나중에 따로 정리해서 다루도록 하겠습니다.
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.