반응형
1. <pre> 태그란?
preformatted text(pre=앞, 미리, formattded=구조화된 텍스트)
(앞글 참조)
시(詩, poet) 또는 형식화된 문단, 행간 혹은 연간 형식을 원래대로 유지해야 할 필요가 있을 때:
→ 일일이 <br> 태그를 사용할 순 없다.
그러나 알고 보면 <p>, <br> 등을 사용하지 않고도 행과 연의 형식을 원래 모양 그대로 브라우저 창으로 표현할 수 있는 기능이 HTML에 있다.
=그것이 <pre> 태그이다.
그러나 <pre> 태그를 사용한 문단에는 다음 두 가지의 경우가 발생한다.
1) 짧은 행들로 이루어진 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<title>pre태그 줄바꿈</title>
<meta charset="UTF-8">
</head>
<body>
<pre>
심중(心中)에 남아있는 말 한마디는
끝끝내 마저하지 못하였구나.
사랑하던 그 사람이여!
사랑하던 그 사람이여!</pre>
</body>
</html>
위 문단은 아래 그림처럼 브라우저창에 원래 형식으로 줄 바꿈 된다.
2) 긴 문단이 있는 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<title>pre태그 줄바꿈</title>
<meta charset="UTF-8">
</head>
<body>
<pre>
심중(心中)에 남아있는 말 한마디는
끝끝내 마저하지 못하였구나.
사랑하던 그 사람이여!
사랑하던 그 사람이여!
우리는 민족중흥의 역사적 사명을 띠고 이 땅에 태어났다. 조상의 빛난 얼을 오늘에 되살려, 안으로 자주독립의 자세를 확립하고, 밖으로 인류공영에 이바지할 때다. 이에, 우리의 나아갈 바를 밝혀 교육의 지표로 삼는다.
국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다. 민주평화통일자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.
</pre>
</body>
</html>
이 경우 짧은 문단은 아래처럼 줄 바꿈 되지만,
긴 문단이 줄 바꿈 되지 않는다.(각 행 어디까지 뻗어나간다)
2. <pre> 태그 긴 단락의 자동 줄 바꿈 방법
CSS의 white-space 속성을 활용한다.
(아래 <style>부터 </style>까지의 내용을 복사하여 <head> 영역에 붙여 넣는다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>pre태그 줄바꿈</title>
<meta charset="UTF-8">
<style>
pre {
white-space: pre-wrap;
word-break: break-all;
overflow: auto;
}
</style>
</head>
<body>
그 결과, 아래처럼 보기 좋게 줄 바꿈 된 후 브라우저 창에 표시된다.
여기에서 사용한 white-space 속성과 속성 값,
아래 그림의 overflow, word-break 속성과 속성 값에 대하여 다음 글부터 차례대로 각각 정리한다.
반응형
'코딩 > HTML' 카테고리의 다른 글
| HTML에 이미지는 삽입되지 않는다, 링크될 뿐 (0) | 2021.12.03 |
|---|---|
| 제거, html 정리, html 클리너 (1) (0) | 2021.11.23 |
| 단락 태그, pre 태그 (1) | 2021.04.20 |
| HTML 들여쓰기 방법 (0) | 2021.04.19 |
| 주석은 왜 달아야 할까? (0) | 2021.04.18 |