★ 문단 관련 태그
 

문단 관련 태그 모음줄 바꾸기-<BR>태그줄 바꾸기-<NOBR>와<WBR>태그 ]

문단 구분하기문단 정렬하기수평선으로 문단 구분하기 ]

 

문단 관련 태그 모음

태그

내용

<P>내용</P>

본문에서 단락을 구분.

<P ALIGN=CENTER,LEFT,RIGHT>내용</P>

문단 내용 정렬

<DIV>내용</DIV>

단락구분,마지막 줄 안 띄어줌

<BR>내용</BR>

줄 바꿈

<CENTER></CENTER>

본문의 중앙에 오게 배치

<HR></HR>

수평선

<PRE></PRE>

스페이스 공백 인식

<HR SIZE=n WIDTH=n ALIGN=left,center,right></HR>

수평선의 두께,넓이,문단에서 왼쪽,중앙,오른쪽을 지정

 

줄 바꾸기-<BR>태그

Enter를 눌러 줄이나 문단을 구분하더라도 브라우저에서는 인식하지 못합니다. 강제로 줄을 나누거나 빈 줄을 삽입하려면 <BR> 태그를 이용합니다. Breaking의 약어로 종료 태그 없이 문자열의 뒤에 사용되며 입력된 것만큼 줄이 삽입됩니다.

메모장을 실행하여 다음과 같이 입력합니다.

<HTML>
<HEAD>
<TITLE>줄 바꾸기</TITLE>
</HEAD>
<BODY>

줄을 강제로 바꿀 수 있습니다.<BR>
이 줄 뒤에 5줄의 빈줄을 삽입합니다.<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
빈 줄이 삽입되었습니다.

</BODY>
</HTML>

브라우저로 확인을 원하시면  여기를 클릭하세요.

 

줄 바꾸기-<NOBR>와<WBR>태그

<NOBR>는 Noline Break의 약어로 줄을 일부러 바꾸지 않더라도 본문 내용의 길이가 브라우저보다 길면 자동적으로 줄이 바뀝니다. 그런데 이 태그를 이용하면 줄이 바뀌지 않아 브라우저보다 긴 부분은 화면에 보이지 않습니다. 이 태그가 적용된 부분에서 줄을 바꾸려면 <WBR> 태그를 이용합니다.

메모장에서 실행하여 다음과 같이 내용을 입력합니다.

<HTML>
<HEAD>
<TITLE>줄 바꾸기</TITLE>
</HEAD>
<BODY>

<NOBR>
브라우저의 폭보다 긴 문장의 내용을 입력하면 어떻게 될까요?
기본적으로 브라우저 창에 모든 문장을 나타낼 수 없으면 화면에 자동으로 스크롤바가 나타납니다.
<WBR>이 상태에서 줄을 바꿀 수 있습니다.
</NOBR>

</BODY>
</HTML>

브라우저로 확인을 원하시면  여기를 클릭하세요.

 

문단 구분하기

문단을 구분하기 위해<P> 태그를 이용합니다. 문단을 구분하기 위해 <BR> 태그를 이용해도 됩니다. 하지만 문단을 구분한다는 것은 단순히 줄을 바꾸는 것에서 벗어나 서식을 구분한다는 의미도 포함하고 있습니다. 그래서 <P> 태그를 이용합니다. 이 태그는 Paragraph의 약어로 종료 태그없이 사용하고 문단으로 나눌 문자열 되에 위치합니다. 이 태그는 Enter를 두 번 누르는 효과가 나타나며 여러 개를 지정하더라도 하나의 태그만 인식합니다.

메모장을 실행하고 다음과 같이 내용을 입력합니다.

<HTML>
<HEAD>
<TITLE>문단 구분하기</TITLE>
</HEAD>
<BODY>

문단을 구분하기 위해 Paragraph태그를 이용합니다.<P>
날씬해지고 싶어요<BR>
퉁실이는 오동포동 살찐 아기 돼지예요.
"오물오물, 짭짭!"
"냠냠, 짭짭!"
온종일 쉬지 않고 먹어 대지요.
그래서 친구들에게 '먹보'라고 놀림을 당한답니다.<P>
엄마 심부름으로 슈퍼마켓에 가게 된 퉁실이.
"절대로 먹어서는 안된다."

</BODY>
</HTML>

브라우저로 확인을 원하시면  여기를 클릭하세요.

 

문단 정렬하기

HTML 문서에서 문단이나 문자열의 위치를 왼쪽, 오른쪽, 가운데 등으로 변경할 수 있다. 문단이나 문자열을 정렬하려면 <CENTER>...</CNETER> 태그나 <DIV>...</DIV> 태그를 이용합니다. <CENTER> 태그는 태그 사이에 위치한 문자열을 화면의 가운데로 이동시킵니다. <DIV> 태그는 문장의 줄을 바꾸지 않는 것을 제외하면 <P> 태그와 동일한 기능을 가집니다.

메모장을 실행하여 다음과 같이 내용을 입력합니다.

<HTML>
<HEAD>
<TITLE>정렬하기</TITLE>
</HEAD>
<BODY>

<CENTER>모든 문단을 가운데 정렬하기<BR>
모두가 잠든 밤에도<BR>
나는 혼자 나무 꼭대기에서<BR>
외롭다는 생각을 한답니다.<BR>
</CENTER>
<DIV align="right">오른쪽 정렬하기<BR>
모두가 잠든 밤에도<BR>
나는 혼자 나무 꼭대기에서<BR>
외롭다는 생각을 한답니다.<BR></DIV>
<DIV align="left">왼쪽 정렬하기<BR>
모두가 잠든 밤에도<BR>
나는 혼자 나무 꼭대기에서<BR>
외롭다는 생각을 한답니다.<BR></DIV>
<DIV align="center">가운데 정렬하기<BR>
모두가 잠든 밤에도<BR>
나는 혼자 나무 꼭대기에서<BR>
외롭다는 생각을 한답니다.<BR></DIV>


</BODY>
</HTML>

브라우저로 확인을 원하시면  여기를 클릭하세요.

<BLOCKQUOTE>...</BLOCKQUOTE> 태그

인용문 형태의 문자열을 들여쓰기 형태로 사용할 때 이용합니다. 이 태그로 지정된 문자열은 상하좌우 여백으로 다른 문자열과 구분되며 다음 줄부터 자동으로 줄바꿈이 일어납니다.


수평선으로 문단 구분하기

문단을 구분하는 방법 중에 확실하게 구분하는 방법이 수평선을 이용하는 것입니다. 이 수평선은 브라우저에 따라서 나타나는 모양이 달라집니다. 그리고 최근에는 애니메이션이나 이미지로 이용하기도 합니다. 수평선을 넣기 위해서는 <HR> 태그를 이용하며 Horizontal Line의 약자로 자동으로 줄 바꿈이 일어나며 여러 속성을 부여하여 나타나는 모양을 변경할 수 있습니다.

메모장을 실행하고 다음과 같이 내용을 입력합니다.

<HTML>
<HEAD>
<TITLE>수평선 넣기</TITLE>
</HEAD>
<BODY>

수평선을 넣어보자<BR><BR>
1.기본 수평선
<HR>
2. 선의 두께 조절(기본 두께는 size=2)
<HR size=10>
3. 선의 길이를 조절<BR>
화면 비율
<HR size=5 width=50%>
픽셀수로 조절
<HR size=5 width=100>
4. 선의 위치 조절
왼쪽 정렬
<HR size=5 width=300 align=left>
오른쪽 정렬
<HR width=300 align=right>
5. 선의 입체감 없애기
<HR size=5 noshade>

</BODY>
</HTML>

브라우저로 확인을 원하시면  여기를 클릭하세요.

충범이의 홈으로           홈페이지 함께 배우기로

 

.
.
.
.
.
.
.
.
.
.