반갑습니다. 잡지식스토리의 촉끼남입니다.
이번에는 pre 태그를 사용하여 입력한대로 웹문서에 표시하는 방법에 대해서 정리해 보겠습니다.
pre 태그
<pre>...</pre> 형태로 사용합니다.
<body>...</body> 태그 사이에서 사용됩니다.
웹문서 안에서 공백이나 줄바꿈 등을 입력한 대로 브라우저에 표시하고자 할 때 사용됩니다.
프로그램 코드 내용이나 인코딩 내용 등을 있는 그대로 표시하고자 할 때 사용합니다.
pre 태그 예제
<body>
<p>pre태그를 사용하여 내용을 입력한 대로 표시할 수 있습니다.img 태그를 설명하는 pre태그를 사용해 보겠습니다.</p>
<pre>
<body>
<img src="사진 주소.png">사진파일이 있는 url 주소를 입력해주면 웹문서상에서 사진이 표시됩니다.
</body>
</pre>
</body>
IE10 웹브라우저로 확인해 보겠습니다.
위 이미지는 인터넷 익스플로어10로 실행시킨 것이고, 아래 이미지는 해당 웹문서의 소스보기를 한 것입니다.
해당 웹문서의 소스를 보면 알 수 있다피시 pre 태그를 사용한 부분은 줄바꿈이 소스내용과 똑같이 표시되는 것을 확인할 수 있습니다.
하지만, p 태그를 사용한 부분은 소스 작성상 줄바꿈을 했어도 실제로 웹브라우저에서는 한 줄로 표시됩니다.
소스 보기 문서를 제대로 이해하면 pre 태그에 대한 이해는 끝난 것입니다.
간단하게 이해를 돕자면,
웹문서를 작성할 때 pre 태그를 사용하게 되면 입력한 대로 똑같이 표시되는 것입니다.
p 태그를 사용하게 되면 줄바꿈을 하였어도 실제로는 한 줄로 인식된다는 것입니다. 이것은 html문서의 특징입니다.
어떻게 이해는 잘 하셨나요..??
직접 해보면 쉽게 이해 하실 수 있을 겁니다.
이렇게 하여 pre태그를 사용하여 내용을 입력한 대로 표시하는 밥법에 대해 가볍게 정리해 보았습니다.
지금까지 잡지식스토리의 촉끼남이였습니다.
휘리릭~~~
'웹문서 공부' 카테고리의 다른 글
| [웹문서]ol 태그 / li 태그, 순번이 있는 목록 만들기 (0) | 2013.11.01 |
|---|---|
| [웹문서] ul 태그, li 태그, 목록 만들기 (1) | 2013.10.30 |
| [웹문서]footer 태그, 바닥글 나타내기 (0) | 2013.10.24 |
| [웹문서]nav태그, 내비게이션을 나타내기 (0) | 2013.10.20 |
| [웹문서]section태그, 웹문서 안에서 영역을 구분하기 (0) | 2013.10.15 |
