HTML-Paragraphs(단락)

컴퓨터/HTML&CSS

728x90
반응형

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다


안녕하세요

 

Gon입니다.

 

이전 글에서는 제목을 지정해주는 태그들에 대해서 알아보았습니다.

 

이제 본문의 내용들을 구성하는 단락들에 대하여 알아보도록 하겠습니다.

 

HTML Paragraphs(단락)

 

<p> tag

<p>태그는 브라우저의 크기에 맞추어 내용을 맞추어 단락을 구성해 주는 역할을 합니다.

항상 새로운 줄에서 시작되며 </p> 종료 태그에서 자동으로 줄바꿈을 하게 해줍니다.

<p>이것이 p태그 입니다.</p>

이 <p>안에 쓴 글은 여러 공백들을 무시합니다.

무슨 의미냐하면 아래와 같은 경우 동일하게 표시가 됩니다.

 

<p>
이 문단은
계속해서 이어지게 됩니다.
많은 여백을 표시해도
브라우저에서는 이를 무시하고
하나의 글로 표현합니다.
</p>
<p>
이 문단은

계속해서               이어지게 됩니다.

많은 여백을          표시해도

브라우저에서는          이를 무시하고
하나의 글로        표현합니다.
</p>

이러한 이유때문에 <p>태그와 함께 여러 이 단락들을 제어하는 태그를 이용하면 글의 구성을 더 효율적으로 할수 있습니다.

 

<br>tag

<br>태그는 줄바꿈 태그라고 생각하시면 됩니다. 하나의 단락으로 구성하여 그 안에서 줄바꿈이 필요할 경우 다음과 같이 이용하시면 됩니다.

<p>이렇게<br>태그를 사용하여 단락을<br>줄바꿈 해보세요.</p>

위와 같은 식으로 하나의 <p>태그에서 줄바꿈을 이용할수 있습니다.

 

<pre>tag

<pre>태그는 작성한 그대로를 보여주는 태그라고 생각하시면 이해가 쉽습니다.

아래와 같이 말이죠.

<p>
  이런글을 쓰게 된다면
  
  하나의 이어진 글로 써지는 것이
  
  p태그의 특징 입니다
</p>
<pre>
 이런 글을 쓰게 된다면
 
 보이는 그대로 글이 써지는 것이
 
 pre태그의 특징 입니다
</pre>

 

<hr>tag

<hr>태그는 제목,본문등을 구분하고 싶을때 사용하는 태그입니다.

가로로 구분선을 만들어준다고 생각하시면 편합니다.


이런 선 말입니다.

 

이상 이번 글을 마치도록 하겠습니다.

 

감사합니다.

 

Gon

728x90
반응형

'컴퓨터 > HTML&CSS' 카테고리의 다른 글

HTML - Quotation Elements(인용 표현의 태그)  (0) 2020.12.23
HTML - Text Formatting  (0) 2020.12.22
HTML-Headings(제목)  (0) 2020.12.15
HTML-Attributes(속성)  (0) 2020.12.14
HTML-Elements(요소)  (0) 2020.12.09

Commnet

G91개발일지

Gon91(지구일)

91년생 공학엔지니어의 개발일지

TODAY :

YESTER DAY :

TOTAL :