[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 사용 예:
▶실행화면
컴퓨터를 하던 중 Oops…the system encountered a problem (#707)라는 에러 메시지가 떴다
kbd 사용 예:
▶실행화면
취소하려면 Ctrl+z를 입력하시오
var 사용 예:
▶실행화면
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
공란과 줄바꿈이 그대로 표시되었습니다.
아래 파일 다운받으시면 위 예시 전체가 나옵니다.
참조: http://www.w3.org/TR/html5/grouping-content.html#the-pre-element
[html] blockquote 태그(인용문 꾸미기 5가지)
'html' 카테고리의 다른 글
[html] input 태그 (2) | 2014.10.14 |
---|---|
form 태그(html 양식 만들기) (0) | 2014.10.13 |
[html] 수평선 그리기, hr 태그 (3) | 2014.08.27 |
웹 개발자 도구 web developer toolbar 개관 (0) | 2014.08.22 |
웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법 (0) | 2014.08.13 |
댓글