[웹] HTML/CSS #4 :: HTML 태그란?

컴퓨터를 좀 오래 만져본 사람이라면 HTML과 태그란 말을 뭔진 몰라도 어디서 들어보긴 했을 것이다. 나도 마찬가지다. HTML이 웹페이지 문서의 형식이라면 태그는 실제 그 형식을 이루고 있는 구성 같은 거다. HTML이 '레고'라는 개념이면 태그는 실제 레고로 구조를 만드는 '레고 블럭'이라고 하면 될까. 레고 블럭을 가지고 에펠탑 모양도 만들고, 해리포터 호그와트 성도 만들고 자유롭게 표현하고자 하는 바를 표현할 수 있고, 그걸 레고라 부른다. 마찬가지로 태그로 내가 텍스트든 이미지든 비디오든 내가 표현하고자 하는 내용을 담고, 그러한 형식을 HTML이라고 부르는 것이다. 태그는 다음과 같이 생겼다.

<a href="#">바로 가기 </a>

이게 뭔가 싶겠다. 일단 나머지 부분이 무엇인지는 차근차근 알아가기로 하고, 태그는 굵은 글씨로 색깔을 입힌 <a>와 </a>를 말한다. 이 두 개가 합쳐서 태그인데, 각각 오프닝 태그(Opening Tag)와 클로징 태그(Closing Tag)라고 부른다. 우리말로는 여는 태그 닫는 태그라고 하는데 뭐라 불러도 상관이 없다. 앞으로의 포스팅에서는 사실 특별한 규칙없이 편한 대로 쓸 예정이다. 나는 코드카데미에서 영어로 공부했기 때문에 영어 용어로 많이 쓰지만 최초 언급 시에는 국어 용어도 소개하도록 하겠다.

다시 돌아와서, 기본적으로 이 태그가 HTML의 필수이자 본질적 요소이다. HTML은 마크업 언어다. 마크업이란 내용을 표시하는 언어란 뜻이다. 모든 언어는 근본적으로 약속이다. HTML 역시 마찬가지다. 코더와 웹 브라우저 간의 약속이다. 코더가 말한다.

"야 브라우저야, 내가 너한테 링크를 보여주라고 말할 때는 <a></a>라고 쓸게. 오프닝 태그와 클로징 태그 사이의 이미지든 텍스트든 뭐든 간에 클릭을 하면 알려준 링크로 연결시켜주는 거야. 그리고 링크 주소는 오프닝 태그 다음에 href 속성(attribute) 다음 따옴표 사이에 있어."

이렇게 코더와 웹 브라우저 간의 약속이 이루어졌다. 다음에 브라우저는 코더가 넘긴 HTML 파일을 읽다가 저 네모 박스 안에 있는 코드를 만났다고 하자. 그럼 웹 브라우저는 생각한다.

"아 지금부터 링크가 나오는구나. 링크 주소는 href에 지정된 url 주소로 연결하면 되겠구나. 아 오프닝 태그가 닫혔네. '바로 가기'를 클릭하면 연결되도록 하고, </a> 클로징 태그가 나왔으니 여기서 링크를 마무리하자"

이렇게 순차적으로 해석하고 명령을 수행한다. HTML을 할 줄 안다는 것은 각 태그의 의미와 기능을 안다는 것이다. 이전 글에서도 언급했지만 이건 암기의 영역이다. 이해하고 자시고가 아니라 HTML의 기능에 대해서는 여기서 다 끝났다. 위의 프로세스대로 브라우저는 명령을 해석하고 그대로 실행할 뿐이다. 참 쉽다. 역시 이전 글에서 언급했듯이 요즘의 웹 에디터는 이런 태그와 그에 딸려오는 속성 등마저도 자동으로 추천하거나 완성시켜주기 때문에 대충 이런 태그가 있었다 정도만 기억하면 나머지는 에디터가 알아서 찾아다준다.

웹 표준이 좋은 이유는 여기에서 나온다. 웹 표준이 없다는 것은 코더와 각각의 브라우저 간의 약속이 다 다르다는 것이다. 크롬은 영어를 쓰고, 파이어폭스는 독일어를 쓰고, 익스플로러는 일본어를 쓴다면? 사용자가 어떤 브라우저로 컨텐츠를 볼 지 모르기 때문에 코더는 모든 경우에 대비해 영어, 독일어, 일본어로 이루어진 HTML을 각각 만들어야 한다. 하지만 웹 표준이 있기 때문에 공용어 하나로만 코드를 짜면 된다. 이제 해야될 건 각각의 태그가 무슨 일을 하는지, 그리고 태그에 딸려오는 속성이란 무엇인지, 그 속성에는 무엇이 있는지 정도만 알면 된다. 아직 감이 잘 안 오는 사람도 에디터를 켜고 실습 몇 번만 해보면 금방 이해할 것이다. 우선 정말 간단한 실습으로 오늘 포스팅을 마무리해야겠다.

1. 에디터를 켠다.

에디터는 아무거나 켜도 된다. 지난 글에서 언급한 Brackets, Sublime Text 3, Visual Studio Code, Notepad ++, 그리고 유료지만 Dreamweaver 아무거나 써도 된다. 내가 언급 안 한 Atom이나 기타 등등등 편하신 대로 쓰십시오. 나는 Brackets을 쓴다. 웹용으로는 제일 편한 것 같다. 플러그인이랑 테마가 다양하고 찾기 편하다. 우선은 웹 언어인 HTML, CSS, JavaScript 정도 밖에 지원 안 되는 것 같긴 하다. 하지만 웹 프론트엔드용으로는 아주 훌륭하다.

2. 새 파일을 열고, 저장한다.

Ctrl + N을 누른다. 또는 위에 파일 탭을 누르고 새 파일 만들기를 누른다. 아무 것도 없는 빈 파일이 뜨면 Ctrl + S를 누르거나 파일 탭을 누르고 저장 버튼을 누른다. 다른 이름으로 저장 창이 뜨면 파일 이름에 "아무이름.html"을 치고 아무 데나 저장한다. 에디터에 따라서 파일 이름 아래 파일 형식에 html을 고르고 저장할 수도 있다.

3. 코드를 적는다.

그러면 넓은 화면에는 당연히 아무 것도 적혀있지 않다. 파일 이름을 나타내는 탭에만 내가 지정한 "아무이름.html"의 파일명이 뜰 것이다. 참고로 나는 "실습1.html"로 저장했다. 그럼 아래 박스 안에 내용을 똑같이 친다.

<h1>HTML 실습</h1> <h3>정말 쉬운 실습</h3> <p>이건 진짜 시작이 반이다</p> <a href="#" target="_blank">네이버로 가자</a>

사실 각각의 오프닝 태그와 클로징 태그 사이의 말들은 아무거나 쳐도 된다. # 자리에는 네이버 메인의 url을 적으면 된다. 'HTML 실습' 대신 자기 이름을 써도 되고 편한 대로.. 다 적었으면 다시 Ctrl+S를 누르거나 저장을 누른다. 저 각각의 태그가 무슨 의미인지는 다음 포스팅에서 차근차근 배우도록 하겠다.

혹시나 해서 언급한다. 에디터에 색깔은 별 의미없다. 가독성을 좋게 하기 위해 태그, 속성 등 성질에 따라 색깔을 달리 해주는 것 뿐이다. 위의 박스의 태그 색깔도 그냥 내가 보기 좋으라고 지정해둔 거다. 저 스크린샷이랑 색깔이 달라도 아무 상관없다. 메모장이면 색깔 기능이 아예 없다. 하지만 에디터인데, html로 저장을 했는데 아무 색깔이 없다면 html 형식으로 정확히 저장이 됐는지 확인해보자. 대게 모든 에디터는 기본 테마에도 색깔별 구분이 되어있기에 저장이 잘못 됐을 확률이 높다.

4. 파일을 열어보자.

Bracket을 쓴다면 오른쪽에 레고 블럭 모양 위에 번개 아이콘을 누르면 바로 라이브 미리보기가 뜬다. 저장만 하면 굳이 브라우저를 새로고침할 필요없이 변경된 내용을 보여주는 기능이다. 아니면 저장된 HTML 파일이 있는 곳으로 가서 파일을 열어도 된다. 에디터로 열지 말고 웹 브라우저로 열어야 한다. 이미 브라우저랑 연결이 되어있다면 더블클릭만 하면 된다. 아니면 마우스 오른쪽 - 연결 프로그램 중에서 크롬, 파이어폭스, 익스플로러 등 아무거나 자신이 쓰는 브라우저를 선택하면 된다. 여기선 크롬을 썼다. 화면이 정상적으로 보이지 않는다면 코드를 적은 HTML 파일을 저장했나 다시 확인한다. 아니면 오타가 있지 않은지 꼼꼼히 비교해본다. 정상적으로 위와 같은 화면이 뜬다면 '네이버로 가자'를 클릭한다.

5. 네이버 화면을 확인한다.

새 탭이 뜨면서 네이버 메인 화면이 뜬다. 티스토리 블로그인데 다음으로 해야 했으려나. 별로 중요하지 않다. 여기까지 했으면 오늘 실습 끝. 다음 시간에는 위의 태그를 포함해서 몇몇 주요 태그의 의미와 사용법을 알아보겠다.