본문 바로가기
잡다한이야기/꿀팁저장소

[HTML] 줄바꿈(엔터) 하기

by 치키치키박 2024. 12. 8.
728x90
반응형

HTML에서 줄바꿈 입력하기

 

HTML에서 줄바꿈을 하는 방법을 알아보도록 하자.

 

HTML 소스코드에서는 아무리 엔터를 여러번 치면서 줄바꿈을 해도

HTML이 보여지는 웹브라우저에서는 줄바꿈이 적용되지 않는다.

줄바꿈을 적용하기 위해서는 몇가지 특별한 태그를 사용해야 하는데,

지금부터 그 태그들을 알아보도록 하겠다.

 

 

1. <br>

br 태그는 'break'의 약자로 단순히 HTML에서 줄바꿈을 할 때 사용된다.

여러개의 <br> 태그를 입력하면 입력된 갯수만큼 줄바꿈이 실행된다.

다른 태그들과 달리 열고(<br>) 닫는(</br>) 태그가 존재하지 않고

그냥 <br> 태그만 써 주어도 무방하다.

 

 

 

 

2. <p></p>

p 태그는 'paragraph'의 약자로, html에서 문단을 표현 할 때 사용된다.

<p>와  </p> 태그로 내용을 감싸면, 내용의 위와 아래쪽에 일정 크기의 공백이 생긴다.

 

이것은 <p>와 </p> 태그 위와 아래쪽에 일정 크기의 공백이 생긴 것으로

이 공백의 크기는 css의 margin 속성을 이용하여 조정할 수도 있다.

 

 

 

 

 

3. <pre></pre>

pre는 'preformatted' 약자로, <pre></pre> 태그 내에 있는 

엔터와 스페이스가 그대로 웹 브라우저에 적용되어 보여지게 된다.

 

 

위의 예에서 <pre></pre> 태그 안에서는 <p>태그나 <br>, &nbsp; 태그를 사용하지 않아도
공백과 줄바꿈이 태그 안에 입력된 대로 적용되는 것을 볼 수 있다.
이 태그는 보통 컴퓨터 소스 코드와 같은 특별한 내용을 표현하기 위해서 종종 사용된다.
 
 
 

출처: https://hianna.tistory.com/300 [어제 오늘 내일:티스토리]

 

 

 

================================================================

 

 

3번째 코드같은경우에는 노래가사 삽입할때도 유용한것같다 .

 

출처 티스토리에가면 더많은 HTML 코드를알수있다. 감사합니다 어제 오늘님 

728x90
반응형