HTML 공부 - 태그(tag)

Posted Jul 16, 2020

By hleecaster

10 min read

HTML 공부하면서 아주 기초적인 내용만 복습차 남겨보기로 했다.

우선 기본적인 태그들의 목적과 기능, 사용법을 통해 HTML 문서를 읽고 이해하는 게 목표다.

HTML 문서 선언 및 필수 구조

흔히 사용하는 VS Code 에디터에서 index.html이라는 파일을 생성한 후 !를 치고 탭을 누르면 emmet 단축키가 HTML의 기본 구조를 아래와 같이 자동으로 생성해준다.

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

문서 맨 첫 줄에는 <!DOCTYPE html> 라고 적어줘서 브라우저에게 이 문서가 HTML 문서임을 전달한다. 그리고 HTML 문서는 <html>태그로 전체를 감싸고 이후에 <head>, <title>, <body>태그를 사용한다.

다음은 <html> 요소인데, 최상위 레벨이기 때문에 루트 요소라고도 부르기도 한다. 여기에는 lang이라는 언어 지정 속성이 들어갈 수 있다. 검색엔진이나 브라우저가 참고할 수 있도록 해당 문서의 언어를 나타내는 것. 한국어로 작성된 사이트를 만든다면 ko로 적어주자.

<head> 요소 안을 보면 일단 <meta charset="UTF-8">이라고 써 있다. 문자 인코딩을 나타내는데, UTF-8이 무난하다. 이걸 지정하지 않으면, 브라우저가 지원하는 언어가 다를 경우 깨질 우려가 있다. <meta name="viewport" content="width=device-width, initial-scale=1.0">는 반응형 웹사이트를 만드는 경우에 선언하는 내용으로, 브라우저 너비를 디바이스 너비에 맞춰서 표시하라는 의미이며, 초기 화면 배율은 1배율(100%)로 표현하라는 뜻이다.

<title>요소는 문서의 제목이며, 검색 결과 혹은 브라우저 탭에도 나타나는 내용이다. 검색 엔진이 페이지를 잘 확인할 수 있도록 하는 역할을 한다. 같은 웹사이트라고 하더라도 페이지마다 핵심 키워드를 따로 제공하는 게 좋다.

여기에 추가로 적어줄 게 <link> 요소다. 예를 들면 HTML 파일을 스타일링 하기 위한 CSS파일을 지정하기 위해 <link rel="stylesheet" href="./style.css">와 같이 써준다.

h 태그

HTML은 총 6단계의 표제(제목)를 제공하며, 표제는 문서의 구조를 정의하는 데 사용한다. 필수로 사용해야 하는 요소는 아니지만, 표제를 사용해서 콘텐츠의 논리적 단계를 지정해두는 게 좋다. <h1>부터 <h6>까지 사용 가능.

p 태그

텍스트를 단락으로 정의할 때 사용한다. 여기서 “단락”이란 유사한 주제를 갖는 문자열의 묶음이다. 단락과 단락 사이에는 여백이 생긴다.

strong, em 태그

글씨가 두껍게 보이거나 이탤릭체로 보이게 하는, 강조를 나타내는 태그다. 나중에 CSS를 통해서 디자인을 쉽게 바꿀 수 있다.

ol, li, li 태그

목록을 나타낼 때 순서가 있는 (ordered) 형태로 하려면 <ol>, 순서가 없는(unordered) 형태로 하려면 <ul> 태그를 각각 사용한다. 서로 계층 구조를 가질 수 있다. 그 안에 <li> 태그를 통해 각 아이템들을 나열하면 된다.

  
<ol>
  <li>아이템1</li>
    <ul>
      <li>아이템</li>
      <li>아이템</li>
  <li>아이템2</li> 
    <ul>
      <li>아이템</li>
      <li>아이템</li>
    </ul>
  <li>아이템3</li> 
    <ul>
      <li>아이템</li>
      <li>아이템</li>
    </ul>
</ol>

dl, dt, dd 태그

정의 목록과 관련한 태그도 있다. dl(definition list), dt(definition term), dd(definition description). 이건 어떤 단어에 의미를 부여하고 정의를 내릴 때 사용한다.

  
<dl>
  <dt>HTML</dt>
  <dd>웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷</dd>
  <dt>CSS</dt>
  <dd>웹페이지의 스타일링과 디자인을 하는 데 사용하는 스타일 시트</dd>
</dl>

a 태그

a는 “앵커”다. href 속성으로 이동하고자 하는 파일의 위치를 적어주면 된다. title 속성으로 정보를 제공할 수 있고, 툴팁으로 그 정보를 보여주는 것도 가능하다.

  
<a href="https://www.naver.com">네이버로 이동</a>

code 태그

코드를 나타낼 땐 <code> 태그를 사용해서 일반 텍스트와 구분을 해주기도 한다. (지금 이 <code>라는 문자에도 이 코드 태그가 걸려 있는 거다.)

그런데 이 코드 태그 안에 특정 문자를 사용하면 사용하면 화면에 출력이 되지를 않을 거다. 그걸 문자가 아니라 HTML 요소로 인식버리기 때문인데, 이때는 이미 정해져 있는 예약어(entity)를 사용해서 표현해야 한다. 예를 들면 이런 것들. &로 시작해 ;으로 닫는다.

& : &
< : <
: >
” : "
공백 :

div, span 태그

이 태그들은 중립적인 태그라서 의미를 가지고 있진 않다. (<h>나 <p> 태그가 특정한 의미의 콘텐츠를 담는 요소인 것과 차이가 있다.) 그냥 생성된 요소들을 묶어주는 역할을 하거나, 기존의 태그들로 만들 수 없는 새로운 요소를 만드는 역할을 한다. 예를 들면 레이아웃을 짠다거나 계층 구조를 부여하는 등. 이렇게 함으로써 HTML 문서의 가독성을 향상시키고 문서구조를 설계하기 편리해진다.

그런데 div와 span 모두 콘텐츠를 묶어주는 중립적 태그이지만 중요한 차이가 있다. div는 줄바꿈을 하는 “block” 요소이지만, span은 줄바꿈을 하지 않는 “inline” 요소라는 것.

block 요소와 inline 요소

block : 화면에 출력할 때 줄이 바뀐다. 다른 블록 요소를 포함할 수 있으며, 또 다른 블록 요소 안으로 들어갈 수도 있다. (예: p, h1/h2…, ul/ol, li, div)
inline : 화면에 출력할 때 줄이 바뀌지 않고 같은 줄에 등장한다. 다른 인라인 요소를 포함할 수 있으나, 블록요소를 포함할 수는 없다. (예: a, em/strong, span)

사실 줄바꿈 속성, 이것들이 위치하는 방식은 CSS의 display 속성을 사용해서 변경할 수 있으니 줄바꿈 자체가 핵심은 아니다. 어쨌든 이런 block 요소들과 inline 요소들을 가지고 레이아웃을 짠다는 게 중요한 거고, 그렇게 구조를 만들어놓은 상태를 normal flow라고 부르기도 한다.

WORK, HTML & JavaScript

HTML

This post is licensed under CC BY 4.0 by the author.