HTML로 코드 블록 작성

1. <code> 태그와 그 내용을 <pre> 태그 안에 래핑하여 HTML로 코드 블록 작성
2. <code> 태그와 CSS white-space 속성을 사용하여 HTML로 코드 블록 작성

이 기사에서는 HTML에서 코드 조각 블록을 작성하는 몇 가지 방법을 소개합니다.

<code> 태그와 그 내용을 <pre> 태그 안에 래핑하여 HTML로 코드 블록 작성

<code> 태그는 컴퓨터 코드를 정의합니다. 내부 콘텐츠는 브라우저의 기본 monospace 글꼴로 표시됩니다.

태그는 HTML에서 코드 블록을 나타내는 데 사용됩니다. 태그는 인라인 태그입니다.

즉, <code> 태그 내부에 코드 조각을 작성하면 태그 내부의 내용이 한 줄로 표시됩니다. 줄 바꿈이나 공백을 유지하지 않습니다.

<pre> 태그는 미리 형식이 지정된 텍스트를 정의합니다. <pre> 요소의 모든 텍스트는 고정 너비 글꼴로 표시되며 텍스트는 공백과 줄 바꿈을 모두 유지합니다.

<pre> 태그 안의 텍스트 또는 내용은 HTML 소스 코드에 정확히 작성된 대로 표시됩니다. <pre> 태그는 블록 수준 요소입니다.

<code> 태그와 그 내용을 <pre> 태그 안에 래핑하면 <code> 태그 안의 내용은 블록 수준 요소로 작동합니다. 내용은 monospace 글꼴을 가지며 코드 조각의 줄 바꿈과 공백도 유지됩니다.

예를 들어, JavaScript 코드를 작성하고 <code> 태그 안에 코드를 래핑합니다. 다음으로 <code> 요소를 <pre> 태그로 래핑합니다.

예제 코드:

<p>Code snippet for addition of two numbers in javascript</p>
<pre>
  <code>
    function add (a,b) {
    sum = a + b;
    return sum;
    }
  </code>
</pre>

위의 예는 JavaScript 코드 블록을 표시합니다.

<code> 태그와 CSS white-space 속성을 사용하여 HTML로 코드 블록 작성

이 방법에서는 일부 CSS 스타일을 사용하여 <pre> 태그를 대체합니다. 이전에는 <code> 요소가 인라인 요소라는 것을 알고 있었습니다.

<pre> 태그를 사용하여 블록 수준 요소로 만들었습니다. 그러나 display 속성을 block으로 설정하여 <code> 태그를 블록 수준 요소로 만들 수도 있습니다.

그리고 white-space 속성을 pre-wrap으로 설정하여 code 태그의 줄 바꿈과 공백을 보존할 수 있습니다. 결과적으로 HTML 소스 코드로 작성된 코드 조각이 표시됩니다.

따라서 HTML에서 코드 블록을 만들 수 있습니다.

예를 들어 <code> 태그를 만들고 그 안에 JavaScript 코드 스니펫을 작성합니다. <code> 태그에 sum의 클래스 이름을 지정합니다.

CSS에서 sum 클래스를 선택하고 display 속성을 block으로, white-space 속성을 pre-wrap으로 설정합니다.

예제 코드:

<code class="sum">
  function (a, b) {
  sum = a + b;
  return sum;
  }
</code>

.sum {
  display: block;
  white-space: pre-wrap;
}

위의 코드 예제는 JavaScript 코드 블록을 생성합니다.