[Html] Pre 태그 사용법 & 예제

html안에서 아무리 Enter를 치거나 스페이스를 하여 공백을 표시한다고해서 브라우저에 Enter나 공백이 나오지는 않습니다. 그래서 우리는 Enter는 <br>태그를 사용함으로써 구현하고 공백은 &nbsp 라는 문구를 삽입해 공백을 표현하고는 합니다. 하지만 이렇게 일일이 여러 태그를 활용하여행이나 공백을 넣지않아도 되는 방법이 있습니다. 바로 <pre>태그인데요. 0<pre>태그를 활용하면 <pre>태그안에서는 Enter나 Tab, Space를 다 활용할 수 있기때문에 긴 문장등을 표현할때 굉장히 효율적으로 사용할 수 있습니다.

 

Pre 태그 예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	동해물과 백두산이 마르고닳도록
	하느님이 보우하사 길이 보우하세
	무궁화 삼천리 화려강산
	대한사람 대한으로 길이보전하세
</body>
</html>

만약 pre태그를 활용하지않고 이렇게 애국가를 치게 되면 Enter가 먹히지 않습니다. Html에서 Enter를 표현하는 <br>태그를 사용하지 않았기 때문이죠. 위 코드의 결과는 아래와 같습니다.

pre사용X

하지만 이렇게 장문의 문장을 개행할때마다 <br>태그를 해주는것은 굉장히 비효율적입니다. 하지만 문단의 아래 위에 <pre>태그를 활용해주면 일일이 <br>태그를 삽입해주지 않아도 개행효과를 낼 수 있습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<pre>
	동해물과 백두산이 마르고닳도록
	하느님이 보우하사 길이 보우하세
	무궁화 삼천리 화려강산
	대한사람 대한으로 길이보전하세
	</pre>
</body>
</html>

Pre사용

 

[Html] UI 태그, OL태그, DI태그, LI태그 사용법

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] Pre태그 사용법 & 예제

[Html] Div 태그 사용법 & 예제

[Html] Span태그 사용법 & 예제

 

댓글(0)

Designed by JB FACTORY