Eojin Han

이런게 있다고 기억만 하고있으면 됨.

전부 특별하게 표현하는 것은 동일하므로, 용도별로 묶어서 일괄로 스타일 관리할 수 있겠구나 정도만 기억하면 됨.

HTML 을 이용해 컴퓨터 코드를 나타낼 때 아래와 같은 많은 요소들을 사용할 수 있습니다.

<code>: 일반적인 컴퓨터 코드를 표시합니다. (일반적으로 한줄을 의미)

여러줄의 코드를 쓰려면 pre로 감싸서 사용.

<pre>: 공백(일반적으로 코드 블록)을 유지하기 위해 사용합니다. 텍스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않습니다. 그러나 <pre></pre> 태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됩니다.

💡

prettier로 들여쓰기 된 부분까지 표현돼서 좀 불편함...

<var>:

수학적 표현식이나 프로그래밍 컨텍스트에서 변수의 이름 표시

<kbd>:

사용자에게 키보드 입력을 통해 특정 키를 눌러야 한다는 것을 나타내고 싶을 때

<samp>(sample output): 컴퓨터 프로그램의 출력 샘플을 표시합니다.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>night-ohl title test</title>
  </head>
  <body>
    <pre><code>
    var para = document.querySelector('p');
 
    para.onclick = function() {
      alert('Owww, stop poking me!');
    }
    </code></pre>

    <p>
      You shouldn't use presentational elements like
      <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.
    </p>

    <p>
      In the above JavaScript example, <var>para</var> represents a paragraph
      element.
    </p>

    <p>
      Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.
    </p>

    <pre>$ <kbd>ping mozilla.org</kbd>
      <samp>PING mozilla.org (63.245.215.20): 56 data bytes
      64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
  </body>
</html>

<code><pre><var><kbd><samp>