웹 개발을 위한 HTML 가이드 23편 - code, pre 태그

텍스트 관련 태그

• 굵기와 기울기 태그(b, strong, i, em)
• 개행과 가로줄 태그(br, hr)
• 윗첨자와 아랫첨자 태그(sup, sub)
• 텍스트의 추가, 제외 태그(ins, del)
• 취소선(s)과 밑줄 표현
• 인용 태그(q, blockquote)
• 하이라이트 태그(mark)
• small 태그
• code, pre 태그현재 글
• 번외 - 탈출문자 사용하기
• 그 외의 텍스트 태그들

개요

이번 글은 웹 개발을 위한 HTML 가이드 23편입니다. 이번 글에서는 두가지의 태그를 알아보려고 합니다. code태그와 pre태그입니다. 이 두 태그는 웹 상에서 코드를 문자 그대로 보여주는 역할을 합니다. 보통은 코드 예시를 보여줄 때에 사용하는 편입니다. 이 블로그에서 찍어온 아래의 두 이미지처럼 말이죠.

크게 보기 (새 창)

크게 보기 (새 창)

어떤 태그에 대해서 살펴볼 것인지는 알았으니 이제 본론으로 들어가도록 합시다.

code 태그

code태그는 코드의 이름이나 내용을 언급하고 싶을 때에 사용합니다. 인라인 태그이며 기본적으로는 줄바꿈이 되지 않습니다. 사실 이 글에서도 많이 쓰이고 있습니다.

<p>자바스크립트로 콘솔에 아이유 좋아! 라는 내용을 띄우고 싶으면 <code>console.log('아이유 좋아!')</code>을 사용한다.</p>

크게 보기 (새 창)

위 이미지는 code태그를 사용한 페이지입니다. code태그는 내용물을 기본 텍스트와 다른 모양으로 보여줍니다. 잘 보면 글꼴이 다른 것을 볼 수 있죠. 이런 문제는 나중에 스타일을 입혀서 디자인을 하면 되는 부분이기 때문에 중요한 것은 아닙니다.

code태그는 인라인 태그라고 했습니다. 이 말은 문단 내에 사용한다는 이야기죠. 그렇다면 여러줄의 코드를 보여주고 싶다면 어떻게 해야할까요? 바로 그 때! pre태그를 이용하면 됩니다.

pre 태그

사실 pre태그는 코드를 있는 그대로 보여주는 태그는 아닙니다. 하지만 br태그를 사용하지 않아도 줄바꿈을 가능하게 만들어주기 때문에 code태그와 함께 사용되는 것이 보통입니다. 일단 pre태그만 사용된 경우를 보여드리겠습니다.

<pre>
  <span>아이유</span>
  <span>만세</span>
</pre>

크게 보기 (새 창)

pre태그는 안에 있는 태그들의 효과를 무효화하지 않지만 이렇게 줄바꿈이 되고 공백마저도 그대로 나타내는 것을 볼 수 있습니다.

함께 사용하기

이번에는 pre태그를 code태그와 함께 사용한 경우를 보여드리겠습니다. 보통은 아래처럼 동시에 사용하여 코드를 보여줄 때에 사용합니다. 현재 이 블로그에도 이런식으로 구성이 되어있습니다.

<p>아래는 자바스크립트에서 클래스를 만드는 방법입니다.</p>

<pre>
  <code>
    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
    }

    const nihil = new Person('NIHILncunia', 30);
  </code>
</pre>

크게 보기 (새 창)

하지만 착각하면 안되는 점은 pre태그나 code태그의 안에 들어간 내용이 태그일 때에 태그 자체를 무효화하지는 않는다는 점입니다. pre태그와 code태그를 함께 사용해서 HTML 코드를 보여주고 싶을 때에는 꺽쇄를 사용하면 안됩니다. 꺽쇄를 사용하면 HTML 문법을 적용하는 게 되기 때문입니다.

그럼 어떻게 해야할까요? 지금 다루기는 좀 어렵고... 이에 대한 해결책을 바로 다음 글에서 다룹니다. 다음 글은 HTML에서 특수문자를 사용할 수 있는 탈출문자에 대해서 다루도록 하겠습니다.

이번 가이드에서 준비된 내용은 여기까지입니다. 이번 글에서는 pre태그와 code태그에 대해서 알아봤습니다. 이 두 태그는 웹 상에서 코드를 보여주고 싶을 때에 사용한다. 라는 점을 잘 이해하시면 되겠습니다. 다음 글에서는 위에서 예고했던대로 탈출문자에 대해서 알아볼 예정입니다. 그럼 이번 글은 여기서 마치도록 하겠습니다. 다음 글에서 봅시다.