배꼽파지 않도록 잘 개발해요

[HTML] <pre>와 <code>를 통해 알아보는 인라인 태그와 블록 태그 본문

FrontEnd/HTML ／ CSS

[HTML] <pre>와 <code>를 통해 알아보는 인라인 태그와 블록 태그

꼽파 2023. 12. 20. 12:51

HTML 문서를 작성하다 보면 코드나 텍스트 서식을 그대로 유지하고 싶을 때가 있다.

이때 <pre> 태그와 <code> 태그가 유용하게 활용된다.

 

이 두 가지를 통해 

  • <pre> 태그와 <code> 태그의 쓰임새
  • 인라인 태그와 블록 태그의 차이점
  • HTML에서의 이스케이프 문자

를 파악할 수 있다.

<pre> 태그와 <code> 태그의 쓰임새

 

<pre> 태그

<pre> 태그는 'preformatted text'의 약자로, 텍스트의 공백과 줄바꿈을 그대로 유지한다. 

이는 주로 코드 블록이나 서식이 중요한 텍스트를 표현할 때 사용된다.

<pre>
   이 공백과
   줄 바꿈이
   그대로 유지됩니다.
</pre>

 

<code> 태그

텍스트 내에서 코드 조각이나 프로그래밍 언어의 키워드를 표시할 때 사용된다. 

이는 주로 문서에서 코드 부분을 강조하거나 특정 용어를 강조하는 데에 활용된다.

<p>이 함수의 파라미터는 <code>a</code>와 <code>b</code>이다.</p>

 

인라인 태그와 블록 태그의 차이점

HTML 태그는 대부분 인라인 태그와 블록 태그로 나뉜다.

인라인 태그는 줄 바꿈 없이 문장 안에 포함되며, 블록 태그는 새로운 줄에서 시작되어 블록을 형성한다.

예를 들어, '<span>'은 인라인 태그고, '<div>'는 블록 태그이다.

 

방금 위에서 본 <pre> 태그와 <code> 태그를 비교해보면 인라인 태그와 블록 태그의 차이점을 파악할 수 있다.

두 가지를 각각 사용한 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>
    <h3>
    <pre>
        This is some preformatted text.
        It maintains the spacing and line breaks.
    </pre>
    <code>
        This is some preformatted text. 
        It maintains the spacing and line breaks.
    </code>
    <hr>
    <pre>
        function addNumbers(a, b) {
            return a + b;
        }
        
        // 함수 호출과 출력 예제
        var result = addNumbers(5, 3);
        console.log(result); // 출력: 8
    </pre>
    <code>
        function addNumbers(a, b) {
            return a + b;
        }
        
        // 함수 호출과 출력 예제
        var result = addNumbers(5, 3);
        console.log(result); // 출력: 8
    </code>
    <hr>
        글자 중간에 &lt;pre&gt;&lt;/pre&gt; <pre>console.log(a)</pre>
        글자 중간에 &lt;code&gt;&lt;code&gt; <code> console.log(a)</code>
    </h3>
</body>
</html>

 

위 예시에서 블록 코드인 <pre> 태그는 공백과 줄바꿈이 유지되는 반면, 인라인코드인 <code> 태그는 유지되지 않는 것을 파악할 수 있다. 한편 CSS를 적용해보았을 때도 차이점이 두드러지게 나타난다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="example.css">
</head>
<body>
    <h3>
    <pre class="preformed">
        This is some preformatted text.
        It maintains the spacing and line breaks.
    </pre>
    <code class="code">
        This is some preformatted text. 
        It maintains the spacing and line breaks.
    </code>
    <hr>
    <pre class="preformed">
        function addNumbers(a, b) {
            return a + b;
        }
        
        // 함수 호출과 출력 예제
        var result = addNumbers(5, 3);
        console.log(result); // 출력: 8
    </pre>
    <code class="code">
        function addNumbers(a, b) {
            return a + b;
        }
        
        // 함수 호출과 출력 예제
        var result = addNumbers(5, 3);
        console.log(result); // 출력: 8
    </code>
    <hr>
        글자 중간에 &lt;pre&gt;&lt;/pre&gt; <pre class="preformed">console.log(a)</pre> 입니다.
        글자 중간에 &lt;code&gt;&lt;code&gt; <code class="code"> console.log(a)</code> 입니다.
    </h3>
</body>
</html>
.preformed{
    background-color: yellow;
}

.code{
    background-color: green;
}

 

<pre> 태그가 적용된 영역은 노랑색, <code> 태그가 적용된 영역은 초록색으로 지정하였다.

이때 <pre>와 같은 블록 태그는 가로 영역을 모두 차지하면서 전체 너비를 차지한다.

반면 <code>와 같은 인라인 태그는 레이아웃이 문장 또는 문장 일부에서만 영향을 미치고, 너비와 높이가 콘텐츠의 크기에 맞게 동적으로 조절된다.

 

그럼 height, width, margin, padding을 적용해 보았을 때는 어떻게 나타날까?

/* <pre> 태그 적용된 부분 */
.preformed{
    background-color: yellow;
    height: 200px;
    width: 100px;
    margin: 50px;
    padding: 50px;
}

/* <code> 태그 적용된 부분 */
.code{
    background-color: green;
    height: 200px;
    width: 100px;
    margin: 50px;
    padding: 50px;
}

블록 태그 영역
인라인 태그 영역

 

블록 태그 영역
인라인 태그 영역 (움짤에서는 margin이 안 보임 ㅠ)

 

 

height와 width는 <pre> 태그 영역에는 적용이 되었고, <code> 태그 영역에는 적용되지 않았다.

또한 인라인 태그가 적용된 요소를 자세히 살펴보면, padding은 상하좌우가 모두 적용되었으나 margin의 상하는 적용되지 않은 것을 확인할 수 있다.

 

두 가지를 비교한 내용을 요약하면 다음과 같다.

블록태그와 인라인 태그 비교

  블록 태그 인라인 태그
종류 <div>, <p>, <h1>, <ul>, <li>, <pre> <span>, <strong>, <a>, <em>, <code>
레이아웃 새로운 줄에서 시작
전체 너비 차지 O		 문장 또는 문장 일부에서만 영향을 미침
전체 너비 차지 X
너비와 높이 수평 스페이스 모두 차지 콘텐츠의 크기에 맞게 동적으로 조절
줄 바꿈 줄 바꿈 O 줄 바꿈 X
Box Model height, width  O
margin, padding O		 height, width X
margin 상하 (top, bottom) X, padding O
중첩 가능 여부 중첩 가능 일반적으로 다른 인라인 요소와 함께 중첩 불가능
용도 페이지 레이아웃, 섹션 구 등 강조 텍스트, 링크, 이미지 내부 텍스트 등

 

HTML에서의 이스케이프 문자

본인은 대괄호를 자유롭게 쓰고 싶으나, 의도와는 다르게 HTML에서 '<>'를 입력하면 태그의 열고 닫음으로 인식하는 경우가 있다. HTML에서는 특정 문자를 특수한 용도로 사용하는데, 이를 표현하기 위해 이스케이프 문자를 사용한다.

예를 들어 <는 &lt;로, >는 &gt;로 표현된다.

    <hr>
        글자 중간에 &lt;pre&gt;&lt;/pre&gt; <pre class="preformed">console.log(a)</pre> 입니다.
        글자 중간에 &lt;code&gt;&lt;code&gt; <code class="code"> console.log(a)</code> 입니다.
    </h3>

 

HTML 이스케이프 문자의 종류

출처 : W3C

https://www.w3.org/wiki/Common_HTML_entities_used_for_typography

 

Common HTML entities used for typography - W3C Wiki

Introduction This part of the Web Standards Curriculum looks at the different codes that can be used to represent text characters when there is a need to escape them. There are a number of HTML entities that come in handy when there’s a need for first-ra

www.w3.org

 

728x90