본문 바로가기
프로그래밍/HTML, CSS, JavaScript

HTML 단락 서식 태그

by [바가지] 2017. 12. 7.

HTML 단락 서식 태그

HTML 단락서식 태그


HTML 태그 중 단락 서식 태그들에 대하여 알아 보도록 하겠습니다.


줄바꿈 태그 단락 태그 


<BR> 태그 : Line Break 라는 의미 입니다.

<P> 태그 : 문단을 나누기 위한 태그 입니다.


<BR> 와 <P> 태그의 차이 

 - <P> 태그는 줄바꿈 + 한 줄의 공백 으로 <BR> 태그를 두 번 사용한 결과 와 동일 합니다.

 - <BR>은 사용 수만큼 줄바꿈이 일어 나지만, <P> 태그는 복수로 사용하여도 한 번 사용한 결과와 동일 합니다.


괘선 태그


<HR [속성]>

 - 속성 : SIZE(수평선의 두께), WIDTH(수평선의 길이), ALIGN(수평선의 위치), 

            NOSHADE(입체감과 음영의 효과를 제거 즉, 보통 선으로 표현)


예제>
<HR> : 보통 두께 1

<HR SIZE="5"> : 수평선 두께 5


<HR WIDTH="200"> : 길이 200 픽셀
<HR WIDTH="50%"> 길이 50%
<HR ALIGN="LEFT" WIDTH="30%"> : 수평선 위치를 왼쪽으로
<HR NOSHADE> : 입체감을 없애기




정렬 태그


<CENTER> ~ </CENTER> : 가운데 정렬

<DIV ALIGN="LEFT 또는 RIGHT 또는 CENTER"> ~ </DIV> : 문단의 정렬


예제>

<DIV ALIGN = "LEFT"> 왼쪽 정렬 </DIV>

왼쪽 정렬
<DIV ALIGN = "CENTER"> 가운데 정렬 </DIV>
가운데 정렬
<CENTER> 가운데 정렬 </CENTER>
가운데 정렬
<DIV ALIGN = "RIGHT"> 오른쪽 정렬 </DIV>
오른쪽 정렬


인용 태그 


<BLOCKQUOTE> ∼ </BLOCKQUOTE> : 인용구를 작성할 경우 사용됩니다.


예제>

인용구 테스트 시작 입니다.

인용구 내용입니다.

인용구 내용입니다.

인용구 내용입니다.

인용구 테스트 종료 입니다.



입력한 대로 보여주기

<PRE> ∼ </PRE> : 입력한 대로 보여 줍니다. 즉 HTML문서에서 입력한 한번 이상의 공백 등을 그대로 표현 줍니다.


반응형

'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글

HTML 이동 태그  (4) 2017.12.10
HTML 목록 태그  (0) 2017.12.08
HTML 단락 서식 태그  (8) 2017.12.07
HTML 문자 서식 태그  (0) 2017.12.01
HTML 기본태그 - BODY / 주석 / 제목 태그  (0) 2017.11.29
HTML 문서의 기본 구조  (0) 2017.11.25

댓글8