본문 바로가기
웹프로그래밍/HTML

HTML 단락과 <br>,<pre> 사용법

by 유노brain 2023. 9. 4.
반응형

HTML 단락특징

<!DOCTYPE html>
<html>
<body>

<p>This is 
    a paragraph 
    with line breaks.</p>

</body>
</html>

-> 코드에서 한 문장씩 출력하려고 위에 처럼 만들어도 This is a paragraph with line breaks <- 이런 양식으로 나타나진다.

 

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.
    
    This is a paragraph with line breaks.

</p>

</body>
</html>

-> 마찬가지로 위의 문장을 나타내면 한문장씩 나타나는것이 아닌 문장이 한줄로 이어붙여서 나온다.

 

<br> 사용법

<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>

-> <br>를 사용할 경우 This is 문장 끝내고 아래에 a paragraph 그 아래에 with line breaks가 오게된다.

 

<pre>사용법

<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.

</pre>

</body>
</html>

-> <br>로 문장을 띄우는 것이 귀찮고 그냥 코드에 적혀있는데로 나오게 하기위해서는 <pre>를 사용하면 된다.

-> <pre>의 경우 인터넷에 코드 입력한 모양 그대로 출력한다.

반응형

댓글