[Html] 문단을 나누는 P태그 사용법

HTML에서 문단을 나누는 태그는 P태그입니다. Paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰여지는데 이 P태그를 활용하여 문단의 정렬, 배경색 등을 바꿀 수 있습니다. 많은 분들이 BR태그와 P태그를 동일한 태그라고 생각하시는 분들이 많은데 이 두가지 태그는 분명한 차이점이 있습니다. 바로 개행의 횟수죠. BR태그는 <BR><BR><BR><BR>사용한 횟수만큼 개행을 합니다. 방금 4번을 했으니 개행을 4번을 했겠군요. 하지만 P태그는 <P><P><P><P> 아무리 많이 사용하더라도 한번만 개행합니다.

 

문단을 나누는 P태그 사용법 

태그  속성 비고 
 <P> align="left"  왼쪽정렬 
align="right"   오른쪽정렬 
align="center"   가운데정렬 
align="justify"   맞춤정렬 

P태그에서 가장 많이 사용하는 속성은 바로 align(정렬)입니다. left정렬은 항상 default로 적용되어있기때문에 잘 사용하지는 않지만 가운데정렬과 오른쪽 정렬은 종종 사용하는 정렬방식입니다. 지금 제가 운영하고 있는 티스토리에서도 내부적으로 본문의 글을 가운데정렬 시키거나 오른쪽 정렬시킬때 이 P태그의 align속성을 활용해서 정렬을 시키더군요. justify속성은 맞춤정렬인데 맞춤정렬이란 한 문단이 길어져서 화면의 끝에서 자동 줄바꿈이 일어날때 그 가장자리 부분을 일정하게 맞춰주는 정렬방식입니다. 이 P태그의 정렬은 접속 디바이스의 해상도에 맞게 반응형으로 조정되기때문에 활용만 잘하면 아주 유용하게 사용이 가능합니다.

 

예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE>
<html>
<head>
<meta charset="EUC-KR">
<title>P_tag사용법</title>
</head>
<body>
    <p>동해물과 백두산이 마르고 닳도록</p>
    <p align = "right">하느님이 보우하사 우리나라 만세</p> <!-- 오른쪽 정렬 align -->
    <p align = "center">무궁화 삼천리 화려강산</p> <!-- 가운데 정렬 align -->
    <p align = "justify">대한사람 대한으로 길이 보전하세</p> <!-- 맞춤 정렬 align --> 
</body>
</html>

p태그

 

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] Pre태그 사용법 & 예제

[Html] Margin, Padding 속성의 차이점과 사용법

[Html] Div 태그 사용법 & 예제

[Html] Span태그 사용법 & 예제

 

댓글

Designed by JB FACTORY