반응형
<pre> 태그는 Preformatted Text 의 약자입니다. <pre> 태그로 감싼 문장은 입력한 문장 형태 그대로 브라우저에 표현할 수 있습니다. 예를 들어 엔터(Enter), 탭(Tab), 스페이스바(Space) 는 pre 를 사용하지 않았을 때 무조건 공백 하나로 인식합니다. 하지만 pre 를 사용하게 되면 HTML 형태 그대로 유지가 가능합니다. 그래서 프로그램 소스를 표현하는데 많이 사용합니다.
▼ 샘플처럼 단락을 나누기 위해 Enter 를 쳤다면 실제로 브라우저에서 동일하게 보여 질까요? 그렇지 않습니다. 화면에서 탭과 엔터, 스페이스로 아무리 공간을 늘이더라도 공백 하나로 인식합니다. 소스를 실행한 화면을 보면 전부 붙어있죠.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 입력대로 보여주기 </title>
</head>
<body>
입력한 대로 자유롭게 보여주는pre 태그입니다.
<br>태그나 <p>태그가 아니더라도
줄바꿈도 가능하며 태그도 그대로 표현할 수 있습니다.
</body>
</html>
▼ 만약 자신이 작성한 형태 그대로 유지를 하려면 어떻게 해야 할까요? <pre> 태그를 이용하면 됩니다. 그러나 <pre> 는 형태를 그대로 유지할 수 있지만 각 영역별로 서식을 꾸밀 수 없습니다. 모든 텍스트는 시스템에서 지정한 폰트를 사용하게 되고 글이 길어 져서 브라우저를 벗어나더라도 줄 바꿈이 일어나지 않습니다. 하지만 원하는 만큼 공백을 주거나 복잡한 단락 구조를 쉽게 표현할 수 있는 장점이 있으며, 소스 표현할 때 많이 쓰입니다. 아래 샘플처럼 pre 를 사용하니까 글 앞에 주어진 Tab 과 Enter 로 줄 바꿈 한 것들이 전부 브라우저에서 반영이 되어 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 입력대로 보여주기 </title>
</head>
<body>
<pre>
입력한 대로 자유롭게 보여주는pre 태그입니다.
<br>태그나 <p>태그가 아니더라도
줄바꿈도 가능하며 태그도 그대로 표현할 수 있습니다.
</pre>
</body>
</html>
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하기 ▶ HTML 하이퍼링크 a 태그로 사이트 연결하기 ▶ HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 ▶ HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 ▶ 윈도우 메모장에 HTML 문서 작성하는 방법 |
반응형
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 (1) | 2024.03.07 |
|---|---|
| 윈도우 메모장에 HTML 문서 작성하는 방법 (1) | 2024.02.20 |
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
