html 기본 문서 만들기 8 - pre 태그를 이용하여 개발자의 포맷 그대로 출력하기
네 안녕하세요, 이번 포스팅에서는 개발자가 작성한 형태 그대로 출력하는 방법에 대하여 알아보도록 하겠습니다.
우리가 어떤 작업을 수행하다 보면 분명히 본인이 작성한 형식을 그대로 고정해서 출력하고자 하는 경우가 생길 것입니다.
그럴 경우에도 특별한 방법을 써서 출력을 해주어야 합니다.
그래서 이번 포스팅에서는 그러한 방법에 대하여 알아보려 합니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 개발자의 포맷 그대로 출력하기 : pre 태그 이용
우리가 html 태그를 입력하여 브라우저에 출력을 하면 우리가 의도했던 대로 출력이 되지 않는 경우가 많습니다.
제일 대표적인 사례가 html 문서 내에 있는 글이나 그림 등의 형태가 그렇습니다.
html 태그에 기본형이 있기 때문에 그러한 일이 발생을 하는데,
그럴 때는 pre 태그를 이용하여 포맷을 굳혀주면 됩니다.
그렇게 하면 개발자가 의도한 대로 화면에 출력이 바로 됩니다.
그럼 예제 코드를 같이 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>개발자의 포맷을 그대로 출력</title>
</head>
<body>
<h3>개발자의 포맷 그대로 출력하기</h3>
<p>
<p> 태그를 사용하면
여러 개의 빈 칸은 하나로,
여러 줄은 한 줄에 붙여 출력됩니다.</p>
<hr>
<pre>그러나 <pre> 태그를 사용하면
사용자가 입력한
그대로 출력됩니다.
</pre>
</body>
</html>
이런 식으로 pre 태그를 사용한 곳과 사용하지 않은 곳을 나눠봤는데요, 각각이 어떻게 나오는지 한 번 볼까요?
위에 p 태그로 감싸진 문구는 그냥 우리가 보는 형식적인 문서 모양대로 나올 겁니다.
하지만 pre로 감싸진 문구는 우리가 의도했던 대로 출력이 될 겁니다.
그럼 결과 화면을 같이 봅시다.
이런 식으로 화면에 출력이 됩니다.
정말 신기하지 않나요?
가끔 우리가 의도했던 대로 표현을 해야만 하는 상황이 오는데,
그럴 때 pre 태그를 이용하여 포맷을 굳혀주면 됩니다.
여기까지 개발자의 포맷을 그대로 이용하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 텍스트를 꾸미는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 10 - 블록 태그와 인라인 태그 이용하기 (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 9 - 텍스트 꾸미기 (0) | 2023.03.01 |
| html 기본 문서 만들기 7 - 특수한 문자, 기호, 심벌 입력하기 (0) | 2023.03.01 |
| html 기본 문서 만들기 6 - br 태그 이용하여 새로운 줄로 넘어가기(개행하기) (0) | 2023.03.01 |
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
댓글