반응형
반응형
블로그를 쓸 때 매번 Visual Studio 켜서 쓰고 결과 확인해서 붙여넣는 걸 반복하니 귀찮기도 하고,
그림이 들어가면서 글 전체 모양도 안 좋아지는 것 같아 어떻게 할까 하다 <code>와 <pre> 태그를 알게 되었다.
아직 html이 익숙하지 않아서 애를 먹고 있었는데 너무나도 유용한 태그를 알게 되어 기쁘다.
<pre> 태그
html에서는 아무리 내가 Enter를 쳐도 줄바꿈이 일어나지 않는다. html 안에서는 <p></p>를 하거나 <br>를 써야만 줄바꿈을 할 수 있다. 하지만 <pre> 태그 안에서는 일일히 태그를 쓰지 않아도 문서에서 다루는 Enter, Tap, Space 기능을 쓸 수 있다.
<Pre> 예
<!DOCTYPE html>
<html>
<head>
</head>
<body>
줄바꿈을 br 없이 하려면
pre를 이용하세요~!
</body>
</html>html 내에서 줄바꿈을 해도 pre를 쓰지 않은 상태에서 실행을 하면 이와 같은 결과가 나온다.
pre 태그를 사용해보자.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>
줄바꿈을 br 없이 하려면
pre를 사용하세요~!
</pre>
</body>
</html>
결과는 다음과 같다.
많은 줄바꿈을 해야하는 상황이라면 굉장히 유용하게 쓸수 있다.
긴문장을 영역끝에서 자동으로 줄넘김을 하고 싶다면 style 에서 word-wrap:break-word; 를 추가하면 된다.
'웹 > HTML' 카테고리의 다른 글
| RGB 색상 추출 프로그램 Color Cop (0) | 2020.03.05 |
|---|---|
| [CSS] float , clear (0) | 2020.03.02 |
| [CSS] 박스 (0) | 2020.02.27 |
| [CSS] 항목(리스트) 설정 (0) | 2020.02.25 |
| [CSS] 배경 이미지 지정하기 (0) | 2020.02.24 |