[Html] pre 태그 사용법 & 예제
- Web/HTML, CSS
- 2018. 6. 24.
html안에서 아무리 Enter를 치거나 스페이스를 하여 공백을 표시한다고해서 브라우저에 Enter나 공백이 나오지는 않습니다. 그래서 우리는 Enter는 <br>태그를 사용함으로써 구현하고 공백은   라는 문구를 삽입해 공백을 표현하고는 합니다. 하지만 이렇게 일일이 여러 태그를 활용하여 개행이나 공백을 넣지않아도 되는 방법이 있습니다. 바로 <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>태그를 사용하지 않았기 때문이죠. 위 코드의 결과는 아래와 같습니다.
하지만 이렇게 장문의 문장을 개행할때마다 <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>
[Html] UI 태그, OL태그, DI태그, LI태그 사용법
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] div 태그 사용법 & 예제 (4) | 2018.06.26 |
|---|---|
| [Html] Margin, Padding 속성의 차이점과 사용법 (2) | 2018.06.25 |
| [Html] 테이블안에 테이블 충첩하기 (2) | 2018.06.23 |
| [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) (7) | 2018.06.22 |