​​ #10 hr, pre, xmp 태그 배우기

#10 hr, pre, xmp 태그 배우기

 

<hr> 가로선, 구분선, 수평선 태그

 

br태그나 p태그와 같이 단독적으로 사용되며, 밑줄이나 단락의 구분을 나타내는 표시로 사용됩니다.

hr 태그의 속성을 지정하는 태그들로 size (굵기), width(가로 길이), align(정렬값), color(색상), noshade(입체감 없애기) 등이 있으며 함께 사용되어 세부적인 설정값을 지정하게 됩니다.

 

예제))

<html>
<head>
</head>
<body><br /><br />
<hr size="15px" width="50%"  align="left" color="green">
</body>
</html>

 

결과 출력물 이미지를 보면 width=50% 라는 태그의 의미가 화면 전체 가로폭의 50%만 차지하라는 뜻이므로 브라우저의 창을 줄이면 비례해서 작아지고 늘리면 비례해서 커지는 모습을 볼 수 있습니다.

 

<hr>태그 예제 1

 

위는 브라우저창의 크기를 줄였을때, 아래는 늘렸을때의 모습입니다.

 

 

<hr>태그 예제 2

 

<pre>태그와 <xmp>태그의 구별

<pre>태그

 

한쌍의 pre태그 사이에 있는 html 소스태그들은 <br>과<p>만 태그로서의 기능을 상실해 작동하지 않게됨과 동시에 태그들을 제외한 일반 문자들은 출력되고, 소스태그들은 출력되지않으면서 기능만 작동된다.(br과 p태그는 기능도 상실하고 보여지지도 않게 된다)

 

예제))

<html>
<head>
</head>
<body>
<pre>
fix-it강좌-<font color="green">pre태그와</ br> xmp태그의 차이점</font>
</pre>
</body>
</html>

 

출력물))

pre태그
pre태그와 xmp태그의 차이

 

 

<xmp>태그

 

xmp태그는 모든 html 태그들을 일반 문자로 인식해서 모든 문자와 모든 태그들을 일반 문자처럼 출력해주는 동시에 태그로서의 기능은 상실해 작동하지 않게 된다.

 

<html>
<head>
</head>
<body>
<xmp>
fix-it강좌-<fontcolor="green">pre태그와</ br> xmp태그의 차이점</font>
</xmp>
</body>
</html>

 

출력물))

xmp태그
pre태그와 xmp태그의 차이

 

댓글

Designed by JB FACTORY