호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
줄바꿈 태그인 BR 태그와 문단 태그인 P, DIV, SPAN 태그 2003-11-01 23:26:38, 조회 : 2,340, 추천 : 21

소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 스스로 설명을 만들어 올리는 경우라면 출처를 안밝혀도 상관 없습니다.. ^^



◆ <BR> 태그

<BR> 태그는 줄을 나누는 가장 기본적인 태그입니다.. 태그로 HTML 문서를 만들 때 <Enter>키를 쳐서 줄을 나눈 경우에는 실제 HTML 문서를 실행해 보면 줄 나뉜 부분을 인식하지 못하고 그냥 쭈욱 붙어서 나옵니다..
HTML 문서에서 <Enter>키의 기능은 <BR> 태그가 대신하여 주는 것입니다..

줄과 줄 사이를 한 줄을 띄우고 싶다면 <BR><BR> 이라고 <BR> 태그를 두 번 쓰면 됩니다.. 그리고 태그는 대/소문자 구분이 없기 때문에 <BR> 이라고 써도 되고 <br>이라고 써도 됩니다..

<BR> 태그는 단순히 줄을 나눠주는 태그이기 때문에
태그 안에 다른 옵션을 지정해 주는 것은 없습니다..

<BR> 태그로 줄을 바꾸는 것은 문단을 바꾸는 것이 아니고 현재의 문단 안에서 줄만을 바꿔주는 기능을 하는 것입니다..


◆ <P> ~ </P> 태그

<BR> 태그가 줄을 나눠주는 태그라면 P 태그는 문단을 나눠주는 태그입니다..
HTML 문서에서는 문단과 문단 사이는 줄 간격이 <BR> 태그로 나눴을 때보다 약간 더 넓습니다..

이것은 그냥 줄을 BR 태그로 나눈 것입니다
이것은 그냥 줄을 BR 태그로 나눈 것입니다..

이것은 줄을 P 태그로 나눈 것입니다

이것은 줄을 P 태그로 나눈 것입니다..


위의 박스에 보면 <BR> 태그로 나눈 것보다 <P> 태그로 나눈 것의 줄 간격이 더 넓은 것을 볼 수 있십니다..
P 태그는 <P> 로 시작해서 </P> 태그로 닫아줍니다. 문단의 시작과 끝을 알려주는 것입니다..

P 태그는 <P> 만을 사용해서 줄 나누는 기능으로만 사용이 되기도 하지만 이것은 HTML 문법의 바른 표현은 아닙니다..

문단의 시작을 알릴 때 <P> 태그로 시작을 해서 그 안에 문단에 들어갈 내용을 써줍니다. 문단 안에서 줄을 나누고 싶을 때는 위에서 설명했던 <BR> 태그를 사용합니다. 그리고 문단의 끝에서는 </P> 태그로 문단을 닫아 줍니다..

P 태그는 문단 태그이기 때문에 <BR> 태그처럼 <P> ~ </P> 라고만 써도 되지만 문단의 속성을 지정하는 여러 옵션을 지정할 수 있습니다. style=" " 기능으로 문단의 스타일도 정의할 수 있습니다..

문단의 정렬 방법을 정할 수도 있고 style=" " 옵션으로 문단의 크기, 문단 안에서의 내용들의 줄 간격, 문단과 내용 사이의 여백, 문단 첫 글자의 들여쓰기 등을 지정할 수 있습니다.. (각 스타일 지정에 대한 것은 다른 태그에서도 사용이 되므로 나중에 style에 대한 것을 따로 설명할 때 자세히 설명하도록 하겠습니다.)

P 태그에서 사용되는 옵션은 <P> 태그에서 사용이 되고 닫는 태그인 </P> 태그에서는 사용되지 않습니다.. (HTML 태그에 사용되는 모든 옵션이 </태그이름> 형식의 닫는 태그에서는 사용되지 않습니다) 기본적으로 P 태그에서 많이 사용되는 옵션은 문서에서의 문단의 수평(=가로) 정렬방법을 지정하는 align=" "이라는 옵션입니다..

<P align="left">는 <P> 만을 사용한 것과 같은 정렬 방법으로 문단의 내용을 왼쪽 정렬을 해서 보여주라는 것입니다..
<P align="center">는 문단의 내용을 가운데 정렬을 하여 보여주라는 것입니다..
<P align="right">는 문단의 내용을 오른쪽 정렬을 하여 보여주라는 것입니다..

P 태그에서 align=" " 과 함께 많이 사용되는 옵션으로는 style="line-height:숫자" 라는 것이 있습니다..
line-height는 줄의 간격을 넓혀 주는 것입니다.. 줄 간격을 지정하는 단위는 px, pt, % 등이 많이 사용이 됩니다.. 이 중에서 %를 주로 많이 사용하는데 <BR> 태그로 나뉜 보통의 줄 간격은 110% 정도이고 %가 적으면 줄 간격이 좁아지고 %가 커지면 줄 간격은 벌어집니다.. 다른 단위인 px, pt로 지정하고 싶은 경우에도 %처럼 숫자 뒤에 단위인 px나 pt를 써주면 됩니다.. (예: 10pt, 10px, 180%)


◆ <DIV> ~ </DIV> 태그와 <SPAN> ~ <SPAN> 태그

DIV 태그와 SPAN 태그도 P 태그와 마찬가지로 문단을 지정하는 태그입니다.. 그러니 역시 </DIV>, </SPAN> 처럼 문단을 닫는 태그가 존재합니다..

DIV 태그와 SPAN 태그는 주로 화면에서 위치를 지정하여 원하는 위치에 나타나게 할 수 있는 레이어(Layer) 문단을 만들 때 사용합니다.. (레이어에 대해서는 나중에 레이어 설명에서 자세히 설명하겠습니다)

DIV 태그와 SPAN 태그의 큰 차이점은 </DIV> 태그의 뒤에는 <BR> 태그가 자동으로 붙지만 </SPAN> 태그 뒤에는 <BR> 태그가 붙지 않는다는 것입니다..

"<DIV>DIV 태그</DIV>뒤의 내용" 이렇게 썼을 때
DIV 태그
뒤의 내용

"<SPAN>SPAN 태그</SPAN>뒤의 내용" 이렇게 썼을 때
SPAN 태그뒤의 내용

DIV 태그와 SPAN 태그의 차이점을 이해하셨나요? 이것은 P 태그를 사용할 때처럼 기본적인 문단을 만들 때 적용되는 차이점입니다.. 레이어 문단(보통 레이어라고 합니다)을 만드는 경우에는 레이어는 문서 위에 떠 있는 형태이기 때문에 이 차이점은 별 필요가 없습니다..

DIV 태그와 SPAN 태그를 이용한 일반적인 문단을 만드는 방법은 P 태그의 사용방법과 동일합니다..
문단 정렬을 align=" ", 줄 간격은 style="line-height:숫자단위" 이런 옵션은 동일하게 사용할 수 있다는 것입니다..


이상으로 HTML 문서에서 줄을 나눠주는 <BR> 태그와 문단을 나눠주는 P, DIV, SPAN 태그에 대한 설명을 마칩니다..



2022-01-28
15:00:52


  추천하기   목록보기

현재글을 이메일로 보내기

No 제 목 글쓴이 작성일 조회
643   [포토샵] 연필로 그린 효과 만들기 - 1     11-10 23:36 3850
  줄바꿈 태그인 BR 태그와 문단 태그인 P, DIV, SPAN 태그     11-01 23:26 2340
641   PC 조립과 Windows XP 설치 설명 (사진 포함)     11-01 04:47 2005
640   [플래시 동영상] 포토샵 기본 기능 설명     10-29 12:51 2732
639   플래시 위에서 마우스를 움직이면 낙엽이 떨어져요..     10-26 08:42 5206
638   테이블에서 style로 배경그림 지정 태그 (배경그림 고정시키기)     10-24 18:23 4211
637   style로 배경그림 지정 태그 (배경그림 고정시키기)     10-24 18:20 4695
636   마우스로 드래그해야 글씨가 나타나는 복권 태그 설명..     10-23 16:20 3808
635   노프래임과 다중 프래임 화면 중 어느 것이 트래픽이 심할까?     10-23 15:48 1718
634   일일 트래픽(Traffic : 전송량)이란?     10-23 13:07 1675
633   플래시 섹시한 여자 시계     10-22 06:24 6391
632   깔끔한 플래시 시계     10-21 06:51 6185
631   자바스크립트(JavaScript) 도움말 파일입니다..     10-21 05:27 2344
630   VB스크립트(VBScript) 도움말 파일입니다..     10-21 05:25 1567
629   IE에서 마우스 휠 기능보다 간편히 페이지 이동하기     10-20 06:03 1697
   [1][2][3][4][5][6][7][8] 9 [10]..[51] [다음 10개]
 
Copyright 1999-2022 Zeroboard / skin by Praise Jesus
Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.