본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/HTML

[HTML] <pre>

<pre>

<pre> 태그는 마크업 소스를 화면 그대로 표현합니다. HTML 마크업시 두칸 이상은 브라우저에서 한칸으로 표현됩니다. 하지만 <pre> 태그는 마크업의 빈칸과 줄바꿈을 화면 그대로 표현합니다. 코드를 보여줄 때 많이 사용하는 편입니다.


<pre>

<pre> 태그는 마크업 소스를 화면 그대로 표현합니다.

정의(Definition)

  • <pre> 태그는 마크업 소스를 여백과 줄바꿈 그대로 화면에 표현합니다.
  • 소스를 보여주는 경우라면 <code> 태그와 같이 사용합니다.

속성(Property)

속성 값(예) 설명 버전
cols cols = "number" 가로 값을 설정합니다. html5
width width = "number" 최대 문자 수를 설정합니다. html5

Sample1

<pre> 태그를 사용했을 때와 사용하지 않았을 때의 예제입니다.

결과
$(".choice1 .btn2").click(function(e){
    e.preventDefault();
    $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" );
});
결과
$(".choice1 .btn2").click(function(e){ e.preventDefault(); $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" ); });
html
<pre>$(".choice1 .btn2").click(function(e){
    e.preventDefault();
    $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" );
});
</pre>
<p>$(".choice1 .btn2").click(function(e){
    e.preventDefault();
    $(".list1 .desc .ot").text( $(".list1 .circle").offset().top + "px" );
});
</p>

Sample2

<pre> 태그와 <code> 태그를 같이 사용하는 예제입니다.

결과
if(wScroll >= cont.eq(0).offset().top){
    dot.removeClass("active");
    dot.eq(0).addClass("active");
}
html
<pre><code>if(wScroll >= cont.eq(0).offset().top){
    dot.removeClass("active");
    dot.eq(0).addClass("active");
}</code></pre>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<pre> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
col 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨
width 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

Tag

AD

comments