HTML / pre / 입력한 그대로 출력하는 태그
pre
HTML은 연속한 여러 개의 빈칸이나 탭, 줄바꿈을 하나의 빈칸으로 인식합니다. 예를 들어 다음 문서의 내용은 한 줄로 나옵니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </body> </html> |
만약 입력한 그대로 출력되도록 하려면 pre 태그를 이용합니다. 기본 글꼴은 고정폭 글꼴입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> |
자동으로 줄바꿈되도록 하기
pre 태그를 이용하면 문장이 길 경우 줄바꿈이 되지 않고 영역 바깥으로 나갑니다.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. </pre> </body> </html> |
만약 영역 끝에서 자동 줄바꿈이 되도록 하려면 style에 word-wrap: break-word;를 추가합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { word-wrap: break-word; } </style> </head> <body> <pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. </pre> </body> </html> |
