[html] pre, code 태그 차이

 

 

[html] pre, code 태그 차이

 

코드를 작성할 때 작성한 텍스트가 있는 그대로 출력되기를 원할 때가 있습니다.

 

<code>태그는 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할 때 유용합니다

 

<samp>태그는 컴퓨터 프로그램에서 샘플을 출력할 때

 

<kbd>태그는 키보드 입력을 지정할 때

 

<var>태그는 변수를 입력할 때 유용합니다.

 

 

<pre> 역시, 미리 작성된 텍스트를 있는 그대로 표시해주며, 블록 형태로 사용될 수 있습니다.

 

즉, 여러 줄의 코드를 그대로 출력하고자 할 때  위의 code, samp, kbd, var등을 둘러싼 형태로 사용 합니다.

 

 

code 사용 예:

 

 

<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

 

 

▶실행화면

 

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}

 

 

 

 

samp 사용 예:

 

<p>컴퓨터를 하던 중 <samp>Oops…the system encountered a problem (#707)</samp>라는 에러 메시지가 떴다</p>

 

 

▶실행화면

 

컴퓨터를 하던 중 Oops…the system encountered a problem (#707)라는 에러 메시지가 떴다

 

kbd 사용 예: 

 

<p>취소하려면 <kbd><kbd>Ctrl</kbd>+<kbd>z</kbd></kbd>를 입력하시오</p>

 


 

▶실행화면

취소하려면 Ctrl+z를 입력하시오

 

 

var 사용 예:  

 

<p><var>n</var>의 수만큼 곱하시오</p>

 

▶실행화면

 

n의 수만큼 곱하시오

 

 

pre 사용 예:

 

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>  

 

▶실행화면

 

                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07


 공란과 줄바꿈이 그대로 표시되었습니다.

 

아래 파일 다운받으시면 위 예시 전체가 나옵니다.

 

pre code.htm

 

 

 참조: http://www.w3.org/TR/html5/grouping-content.html#the-pre-element

 

[html기초]  , br, pre, p 태그

 

[html] blockquote 태그(인용문 꾸미기 5가지)

 

수직선 그리는법 2가지(인용문 앞에 활용)

 

수평선 그리기, hr 태그

 

지구별에
html 2014. 9. 29. 12:34

댓글을 달아 주세요

  1. SeaC 2015.07.02 11:28 신고  수정/삭제  댓글쓰기

    w3s school에서 독학으로 조금씩 보다가 여기서 자세히 설명되있길래 html부터 다시보고있어요.
    궁금한게 있어서 그런데 samp, kbd사용은 어느상황에서 하는거나요? kbd 는 특정단어를 입력했을때 동작하게 한다는데 딱히 kbd를 안쓰고 <p>로 ctrl+z누르세요</p>라고 써도 똑같은 결과가 나오는것 아닌가요?

    var도 마찬가지로 숫자기호라는걸 인식 시키기위해 따로 사용하는건가요? var쓰는이유가 무엇인가요?
    samp역시 어떤 상황에 사용 되는지 궁금해요.

Powerd by Tistory, designed by criuce