코드를 작성할 때 작성한 텍스트가 있는 그대로 출력되기를 원할 때
<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 예제 :
취소하려면 Ctrl+z를 입력하시오
→ 결과
취소하려면 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
※ 출처 : 지구별 안내서 - [html] pre, code 태그 차이 : http://aboooks.tistory.com/283
'HTML & Publishing' 카테고리의 다른 글
구글 맵 예제 (0) | 2018.07.22 |
---|---|
인스타그램 위젯 (0) | 2018.07.17 |
중국어/중문/간체/번체/중문 폰트/중문 글꼴 (0) | 2018.03.03 |
유튜브 동영상 반응형 삽입 (0) | 2018.02.03 |
SNS 아이콘 아미지 모음 (0) | 2018.01.14 |