BODY 태그

1] BODY 태그

<BODY>태그는 본문을 나타내며 문자와 링크의 색상, 배경화면과 기본글자색 등을 지정할 수 있습니다

사용법

BODY 태그의 속성들

background	현재 문서에 배경 이미지를 설정 합니다. 기본적으로 gif 파일과 jpg 파일 및 png 파일을 지정 할 수 있습니다
bgcolor	현재 문서에 배경 색상을 지정합니다 (색상명, 혹은 색상 코드로 지정합니다)
text	현재 문서의 글자 색을 지정합니다 (색상명, 혹은 색상 코드로 지정합니다)
link	현재 문서의 하이퍼링크 글자 색을 지정합니다 (색상명, 혹은 색상 코드로 지정합니다)
vlink	현재 문서의 방문했던 하이퍼링크의 글자 색을 지정합니다 (색상명, 혹은 색상 코드로 지정합니다)
alink	하이퍼링크를 클릭 했을 때의 글자 색을 지정합니다 (색상명, 혹은 색상 코드로 지정합니다)

적용 예제

<HTML>
<HEAD>
<TITLE> BODY태그의 구성요소 </TITLE>
</HEAD>

<a href="http://www.yahoo.co.kr">야후! 코리아</a>
<a href="http://www.daum.net">다음넷 홈페이지</a>
<a href="http://www.jasko.co.kr">자바스크립트 소스</a>

</BODY>
</HTML>

왼쪽의 코드를 윈도우의 메모장에 직접 타이핑 해 넣거나, 마우스로 드래그 하여 복사해 넣어 보세요

2] 문단을 바꾸는 태그 : <P> ~ </P>

문단을 바꾸는 태그로 <P>는 Paragraph를 의미합니다.

이 태그를 사용했을 경우에는 우선 줄을 띈 후 다음 문장을 시작하며 줄을 바꿈과 동시에 한줄도 띄게 되는
효과가 있습니다.

이 태그는 종료태그 없이 사용할 수 있으며 아무리 많은 <P>태그를 사용하더라도 결국은 하나의 <P>태그로
인식하게 됩니다. 일반적으로 다른 태그 안에서 사용하지 않는 것을 원칙으로 합니다.

<p align=center | left | right>문단을 정열합니다

center : <P> 태그가 적용된 문단을 가운데로 정열합니다
left : <P> 태그가 적용된 문단을 왼쪽으로 정열합니다. 기본값은 left 입니다
right : <P> 태그가 적용된 문단을 오른쪽으로 정열합니다

3] 수평선을 그려주는 태그 : <HR>

이 태그는 그래픽에 가까운 태그 중의 하나로, 일종의 경계선입니다. Horizontal Line 의 준말입니다.
문단의 단락을 구분하거나 모양을 낼 때 사용합니다.

size(=숫자)

size는 1~X사이의 숫자를 사용하며,선의 굵기를 표현한다.물론 1이 가장 얇은 괘선이며 숫자가 커질수록 선의 굵기도 커진다. 하지만 너무나도 굵은 선 그리기는 본래 문장의 단락을 구분하려는 의도에서 벗어날수 있다.

width(=숫자 | %)

WIDTH는 괘선의 도트수,혹은 전체 페이지 폭에 대한 선의 폭을 비율로 나타낼수 있다.
비율로 지정할 때에는 %를 대입한다.

align(=left | center | right)

ALIGN이라는 단어로 위치시킨다.여기서 ALIGN=center는 생략해도 무방하다.즉 왼쪽이나 오른쪽은 ALIGN=left, ALIGN=right등을 사용하지만 중앙 정렬을 나타내는 ALIGN=center는 사용안해도 기본값으로 중앙 정렬이 된다.

noshade

만일 입체적인 선이 싫다면 선을 입체적이지 않게 만들 수 있다.

아래의 태그를 적용한 예는 다음 그림과 같습니다

4] 제목 글자의 크기를 지정하는 태그

<Hn>~</Hn>

n 은 1~6 까지의 숫자로 표현합니다

숫자가 적을수록 글자는 커 집니다

표제를 나타내는 태그로,머릿말이라고도 할 수 있는데 <H1>~<H6>까지의 6가지 크기로 구성되어 있습니다.
1이 가장 큰사이즈이고, 차례대로 6이 가장 작은 사이즈입니다.
이것은 계층적으로 사용하는 것이 좋습니다. 즉 가장 큰 제목은 가장 크게, 소제목은 그보다는 작게 표현합니다. 이것은 타이틀과는 달리 길게 사용해도 무방합니다.

<H1>홈페이지만들기</H1>

홈페이지만들기

<H2>홈페이지만들기</H2>

홈페이지만들기

<H3>홈페이지만들기</H3>

홈페이지만들기

<H4>홈페이지만들기</H4>

홈페이지만들기

<H5>홈페이지만들기</H5>

홈페이지만들기

<H6>홈페이지만들기</H6>

홈페이지만들기

<FONT SIZE=n>~</FONT>

n 은 1~7 까지의 숫자로 표현합니다

숫자가 클수록 글자는 커 집니다

<font size=1>글자크기는 1</font>	글자크기는 1
<font size=2>글자크기는 2</font>	글자크기는 2
<font size=3>글자크기는 3</font>	글자크기는 3
<font size=4>글자크기는 4</font>	글자크기는 4
<font size=5>글자크기는 5</font>	글자크기는 5
<font size=6>글자크기는 6</font>	글자크기는 6
<font size=7>글자크기는 7</font>	글자크기는 7

기타 글자크기관련 태그

<BASE>태그와 같이 <BASEFONT SIZE=size>태그는 이런 기본 폰트 사이즈를 <BODY>태그 안에서 설정하지 않는 대신 <BODY>태그 전에 선언되어 문서전체에 기본폰트를 설정할 수 있습니다.

<BASEFONT SIZE=n>태그는 </BASEFONT>라는 종료태그가 필요없습니다.

문자의 사이즈를 한단계 크게하거나 작게하는 태그입니다.
<FONT SIZE=size>태그는 항상 크기의 설정을 해 주어야하는데 비해 <BIG>,<SMALL>태그는 기본폰트(<FONT SIZE=3>)에서 폰트를 한단계 키우거나 한단계 줄이는 것이 가능합니다.

원래의 글자 크기

5] 글자의 모양과 색상을 지정하는 태그

font color

<font color=green>녹색으로 설정</font>	녹색으로 설정
<font color=#FF0000>빨강색으로 설정</font>	빨강색으로 설정
<font color=orange>오렌지색으로 설정</font>	오렌지색으로 설정

글자의 속성을 지정할 때는 위의 에제에서 보는 바와 같이 <font> 태그안에서 color="색상명, 혹은 색상코드"를 넣어서 설정 합니다.

font face

<font face="Arial">Arial</font>	Arial
<font face="Arial Black">Arial Black</font>	Arial Black
<font face="굴림">굴림</font>	굴림
<font face="바탕">바탕</font>	바탕
<font face="궁서">궁서</font>	궁서
<font face="Comin Sans Ms">Comin Sans Ms</font>	Comic Sans MS

글자의 모양을 지정하려면 <font> 태그안에 face 라는 속성을 지정합니다.

글자의 모양을 지정할 때 주의할 사항은 비록 자신의 PC에서 원하는 글자의 모양이 출력 된다고 해도
이 문서를 보는 다른사람의 PC 에 해당 글꼴이 설치되어 있지 않으면 제대로된 모양을 볼 수 없습니다.

이런 경우를 대비하여 예비글꼴을 지정할 수 있는데 첫 번째로 지정한 글꼴이 없을 때는 두 번째 글꼴로
보여지게 됩니다

<font color="굴림,굴림체">예비글꼴로 굴림체를 설정 하였습니다</font>

6] 글자의 모양을 지정하는 태그

글자모양을 지정하는 태그에는 두 가지가 있습니다.

글자만이 보여지는 브라우저에선 무시되고 있는 논리적 스타일과 글자가 보여지는 방식을 명확히
규정해 주는 물리적 스타일로 구분됩니다.

논리적 스타일의 단점은 브라우저마다 태그를 각기 다르게 해석해서 보여준다는 점입니다.
예를들면, <STRONG></STRONG>태그는 시작태그와 종료태그 사이에 위치한 글자가 강조되도록 합니다.
한 브라우저는 이를 볼드체로 해석하고 다른 브라우저는 단순히 서체를 크게 표현합니다.

물리적 스타일은 브라우저가 선택된 텍스트를 어떻게 디스플레이 하는가를 지시해 주지만. 이 두 가지를
구분하는 일은 어려운 일이며 네스케이프 2.0 버젼 이상에서는 출력 상에 구별이 거의 없습니다.

<STRONG>STRONG</STRONG>	STRONG
<B>BOLD</B>	BOLD
<EM>기울어진 글자</EM>	기울어진 글자
<I>이탤릭체</I>	이탤릭체
<KBD>키보드체 KBD</KBD>	`키보드체 KBD`
<TT>타자체 Type Writer</TT>	`타자체 Type Writer`
<CODE>쿠리어체 CODE</CODE>	`쿠리어체 CODE`
<DFN>Definishing Instance</DFN>	Definishing Instance
<CITE>Citiation</CITE>	Citiation
<SAMP>Sample -컴퓨터 상의 메시지를 나타낼 때 쓰인다.</SAMP>	`Sample -컴퓨터 상의 메시지를 나타낼 때 쓰인다.`
<VAR>Variable -일반적으로 이택릭체로 표현된다.</VAR>	`Variable -일반적으로 이택릭체로 표현된다.`
<SUB>Subscript -아래 첨자를 의미한다. </SUB>	아래첨자_{Subscript -아래 첨자를 의미한다.}
<SUP>Superscript -윗 첨자를 나타낸다. </SUP>	윗첨자^{Superscript -윗 첨자를 나타낸다.}
<U>Underlined -글자에 밑줄을 긋는 것과 같은 효과이다. </U>	Underlined -글자에 밑줄을 긋는 것과 같은 효과이다.
<BLINK>글자가 깜빡거리는 효과를 준다. </BLINK>	글자가 깜빡거리는 효과를 준다.

7] 문장을 고정 시키는 태그 : <PRE>~</PRE>

<PRE>란
Preformatted 를 의미하며 문장과 단락의 형태를 보다 자유롭게 표현할 수 있게 하는 기능을 합니다.

<P>나 <BR>태그 등으로 표현하기에는 너무 복잡한 문장등은 일괄적으로 <PRE>태그를 사용하고, <PRE>태그를 사용하면 태그 안의 모든 TEXT들은 그 문장 안에서 유효하게 됩니다. 즉 여백이나 줄 바꿈등이 전부 유효하게 되는 것입니다.

                        HTML CODE
결과

<PRE>
안녕하세요? 자스코입니다.
            자스코는,
자바스크립트               소스 라이브러리입니다.
            자스코는,
홈페이지           제작에 관련된
           모든 것이 있습니다.
</PRE>

안녕하세요? 자스코입니다. 자스코는, 자바스크립트 소스 라이브러리입니다. 자스코는, 홈페이지 제작에 관련된
모든 것이 있습니다.

8] 이미지 넣기 태그 : <IMG SRC>

이미지 태그의 주요 속성

속성과 값	내용 설명
<img src="이미지명">	웹문서에 이미지를 삽입하는 태그입니다 이미지명은 웹상의 이미지의 실제 경로를 적어줍니다. 즉, 현재문서와 같은 디렉토리에 있으면 그냥 이미지명만 적어주면 되고, 다른경로에 있으면 완전한 URL 이나, 상대경로 (../../images/image1.gif) 로 지정해 줄 수도 있습니다
<img src="이미지명" width="가로크기" height="세로크기">	보여줄 이미지의 크기를 정해 줍니다. 원본 이미지보다 크거나 작게 표시할 수 있습니다
<img src="이미지명" alt="이미지 설명">	이미지에 마우스를 대었을 때 풍선도움말을 보여주며, 이미지가 로딩되지 않았을 때에도 이미지 영역에 이미지 대신 이 설명문을 나타냅니다
<img src="이미지명" align="top \| middle \| bottom \| left \| center \| right">	이미지와 다른 요소들간의 상관관계를 설정 합니다. 즉, 이미지를 중심으로 텍스트들이 위에 나타나게 하려면 top, 중간에 나타나게 하려면 moddle, 아래쪽에 나타나게 하려면 bottom(이 값은 기본값입니다) 으로 지정하고, 텍스트를 중심으로 이미지를 배치하려면 left, center, right 등의 속성값을 줍니다
<img src="이미지명" hspace=10 vspace=10>	이미지의 상하, 혹은 좌우에 여백을 설정 합니다. hspace 값은 좌우에 여백을 만들어 주고, vspace 는 상하에 여백을 줍니다
<img src="이미지명" border="숫자">	이미지의 외곽에 테두리를 그려줄 수 있습니다. <a href => 태그를 이미지에 사용하면 기본적으로 1픽셀의 테두리가 생기게 되며, 이 테두리를 없애려면 border=0 로 설정 합니다

태그 적용 예제

HTML CODE	결과
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg">	그냥 <img src=> 태그만 사용하였습니다
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=160 height=120>	이미지의 크기속성을 지정해 주었습니다. 이렇게 하면 이미지가 로딩되지 않아도 정해진크기만큼의 영역을 미리 확보해 둡니다
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=160 height=120 alt="과일 이미지">	이미지에 alt 속성을 부여하였습니다. 마우스를 대면 이미지에 대한 설명이 나타납니다
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=100 height=80>	이미지의 크기를 축소하여 보여줍니다. 원본 이미지보다 너무 많은 변화를 주면 이미지가 깨어집니다
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=160 height=120 align=right>	이미지에 align 속성을 주었습니다. 현재는 이미지를 글자의 오른족에 배치하였습니다. 수평 align 속성은 left, right, center 등으로 설정 할 수 있습니다. align 속성을 사용하면 글자와 이미지가 자연스럽게 배치될 수 있습니다. 위의 예들과 비교 해 보세요
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=160 height=120 align=middle>	이번에는 글자가 이미지의 중간지점에 나타나도록 설정 하였습니다. 수직 위치는 align=top, middle, bottom 세가지가 있습니다
<img src="http://www.jasko.co.kr/lesson/js/alpha.jpg" width=160 height=120 align=right hspace=10 vspace=10>	이미지의 상하좌우에 여백을 주었습니다 현재 보이는 이미지는 수평, 수직 각 10픽셀씩의 여백을 주었으므로 글자와 그림간의 간격이 10픽셀 생겼습니다. 바로위의 예제와 달리 조금 여유가 있어보이죠?

9] 하이퍼링크 설정 하기 : <a href="주소"> ...... </a>

이 태그는 웹상에서 다른 홈페이지와 연결할 때 사용합니다. 'a'란 Anchor. 즉 닻이란 뜻으로,
'다른 어떤 곳으로 항해를 한 후 닻을 내린다'정도로 해석을 하면 됩니다.

인터넷이 이처럼 확산되기 위해선 링크라는 태그의 역할이 가장 컸다고 볼 수 있습니다

하이퍼 링크를 설정하는 방법은 크게 3가지로 나누어 집니다.

HTML Code	내용 및 설명
<a href="링크될 곳의 주소와 파일명">링크 텍스트 혹은 이미지</a> <a href="http://www.yahoo.co.kr">야후! 홈페이지</a> <a href="http://www.yahoo.co.kr"><img src="11.gif" border=0></a>	가장 많이 사용되는 하이퍼링크를 설정 하는 태그입니다. 텍스트외에 이미지에도 하이퍼링크를 걸 수 있습니다 야후! 홈페이지
<a name="앵크로 사용될 이름">앵크이름</a> <a name="top">여기는 문서의 처음입니다</a> <a href="#top">문서의 처음으로 가기</a>	한 문서내에서 특정 위치로 이동 시킬 때 사용하는 태그입니다. 이 태그는 반드시 <a name=앵크명> 태그와 <a href=#앵크명> 태그가 함께 사용됩니다 여기는 문서의 처음입니다 이곳으로 링크를 시키려면 <a href="#top">그곳으로가기</a> 처럼 하면 됩니다
<a href="mailto:이메일 주소">이메일 보내기</a> <a href="mailto:help@jasko.co.kr">자스코 웹지기에게 메일 보내기</a>	이메일 주소를 연결할 때는 http 대신 mailto:를 사용합니다 자스코 웹지기에게 메일 보내기

10] 목록 만들기, 문장 인용하기

가끔 목록은 많은 양의 정보를 잘 정리하는데 있어 좋은 방법이라고 할 수 있습니다. 흔히 논문을 쓰거나
할 일 등을 쪽지에 적어 놓을 때 목록을 만드는 경우가 많은데 인터넷 홈페이지 상에서도 많은 경우에
이러한 태그가 필요하게 됩니다.

예를 들어 홈페이지 상에 "제 홈페이지는 다음과 같은 것들로 구성되어 있습니다"라고 미리 알리거나 제목
등을 좀더 색다르게 표현하기 위해서 목록 정의 태그를 사용할 수 있습니다

모든 목록 태그에는 종류에 관계없이 <LI>라는 태그를 함께 사용합니다.

순서가 없는 목록 만들기

야후 코리아
한메일.넷
드림위즈
라이코스 코리아

<UL>태그는 순서가 없는 목록을 나타낼 때 사용하며 Unordered List의 준말입니다.
순서가 없는 목록이란 우리가 흔히 말하는 일종의 나열인데 굳이 번호를 매기지 않고도 이것저것을 소개할 때 이 태그를 사용합니다
순서가 없는 목록은 <UL>태그로 시작하며. 이것은 각 목록 아이템 앞쪽에 블릿이 붙으며, 각각의 아이템은 <LI>태그로 지시하게 됩니다
모든 아이템의 점검이 끝날때 </UL>종료 태그로 종료 선언 부분을 종료시켜 줍니다

블릿의 모양 지정하기

금강산
설악산
치악산
한라산
월악산
지리산

항목을 표시하는 형태는 기본으로 디스크가 검정색으로 이루어진 원형이 표시되나 위의 예와 같이 몇가지 형태를 추가 할 수 있습니다.
선두 항목에 한 번만 선언을 하면 다음에 오는 항목 앞에는 이미 선언한 모양과 같이 추가됩니다.

순서가 있는 목록 만들기

금강산
설악산
치악산
한라산
월악산
지리산
내장산
북한산

<OL>태그는 순서가 있는 목록을 나타낼 때 사용합니다. 이 태그는 Ordered List 의 줄임 말로,
<UL>태그와는 순서가 있다는 것만 다릅니다

물론, 위에서 아래로 번호가 매겨지게 되며 <LI>태그에 항목 추가를 선언합니다.
UL 태그와 마찬가지로 모든 리스트의 점검이 끝날 때 </OL>태그로 선언부분을 종료시켜 줍니다

번호의 종류도 위의 예와 같이 정의 할 수 있습니다.

<LI TYPE="A">로 정의하면 리스트를 A,B,C,...순으로 나가게 하고 TYPE에 아무런 정의가 없는 경우
기본값 1,2,3,...순으로 매겨집니다

<OL START=start>

<OL>태그 내에 START 속성을 사용하여 리스트의 시작 숫자를 설정 할 수 있습니다

금강산
설악산

위 예의 결과로 볼 수 있듯이 4부터 리스트가 지정이 됩니다

정의 목록 태그

<DL><DT>~<DD></DL>

Definition 의 줄임말로, 이 목록 태그는 정의 태그라고 말할 수 있습니다. 한줄에 단어를 쓰고, 다음의 독립된 줄에 약간 들어가서 그에 대한 정의/해석을 나타내 줍니다.

이 태그의 특징은 <LI>를 쓰지 않고 <DT>와 <DD>라는 태그를 사용하여 정의하면 되는데 <DT>는 정의 내릴 단어가 나오고 <DD>는 그 정의의 내용이 나오게 됩니다 <DT>, <DD>는 단독태그로 종료태그가 필요습니다

<DL>
        <DT>짜장면
        <DD>중국음식의 하나로 아이들이 좋아함
        <DT>바나나우유
        <DD>우유에 바나나향을 첨가한 어린이용 우유
</DL>

짜장면: 중국음식의 하나로 아이들이 좋아함
바나나우유: 우유에 바나나향을 첨가한 어린이용 우유

<DL COMPACT>

<DL COMPACT>
        <DT>HTML
        <DD>HyperTextMarkuplanguage
        <DT>CD
        <DD>Compact Disc
</DL>

HTML: HyperTextMarkuplanguage
CD: Compact Disc

<DL COMPACT>태그는 행바뀜 없이 용어를 표기하는 기능을 가지고 있지만 한국어, 일본어 같은 2바이트 코드는
행바뀜이 자동으로 인식되기 때문에 이 태그의 기능을 쓸 수 없습니다

메뉴목록

<MENU> <LI>재미있는 예제 <LI>쉬운 사용방법 </MENU>	재미있는 예제 쉬운 사용방법
<DIR> <LI>애플 <LI>아이비엠 </DIR>	애플 아이비엠

<MENU> 태그는 메뉴 목록으로써 그리 길지 않은 문장을 열거할 때 사용됩니다. 또한 <DIR>태그는 디렉토리
목록으로, 메뉴 목록보다 더 짧은, 예를 들면 단어 등의 열거에 많이 사용됩니다. 앞의 <UL><OL>등이 문장의
나열을 위한 목록 태그라면 <MENU><DIR>등은 단어의 나열을 위한 목록 태그라고 이해하면 됩니다.

인용구 선언

우리는 우리가 모르는 사이에 많은 꿈을 꾸게 된다. 하지만 잠에서 깨어나는 순간 현실과의 충격으로 인하여 대부분 꿈의 내용을 잊어 버리게 되는데 그 꿈들을 가지고 의견이 분분하다.

꿈보다는 해몽 이라는 말이 있다. 꿈을 해석하는 방법에는 여러 가지가 있는데 그중 키워드(핵심어)를 가지고 해몽하는 방법이 일반적이다.

아는사람이나, 친척 혹은 유명인과 관련된 꿈을 꾸게 되었다면 아래처럼 해석이 가능하다.

<BLOCKQUOTE>성별이나 나이에 따라 다르겠지만 이 사람들은 모두 당신을 도와주는 사람들이다. 따라서 좋은 방향으로 이끌어 주는 사람이므로 좋은 꿈이라 할 수 있다</BLOCKQUOTE>

또 애인이나 좋아하는 남성과 관련된 꿈을 꾸게 되었다면....

우리는 우리가 모르는 사이에 많은 꿈을 꾸게 된다. 하지 만 잠에서 깨어나는 순간 현실과의 충격으로 인하여 대 부분 꿈의 내용을 잊어 버리게 되는데 그 꿈들을 가지고 의견이 분분하다. 꿈보다는 해몽 이라는 말이 있다. 꿈을 해석하는 방법에 는 여러 가지가 있는데 그중 키워드(핵심어)를 가지고 해 몽하는 방법이 일반적이다. 아는사람이나, 친척 혹은 유명인과 관련된 꿈을 꾸게 되 었다면 아래처럼 해석이 가능하다.

성별이나 나이에 따라 다르겠지만 이 사람들은 모두 당신을 도와주는 사람들이다. 따라서 좋 은 방향으로 이끌어 주는 사람이므로 좋은 꿈이라 할 수 있다

또 애인이나 좋아하는 남성과 관련된 꿈을 꾸게 되었다 면....

문장 내에서 인용을 할 경우 들여쓰기를 한 후 인용구를 처리하는 태그입니다. 공간의 정도는 모든
브라우저에서 일정한 것은 아니지만, 네츠케이프와 IE는 모두 텍스트 양 옆으로 40픽셀 정도를 남기고 <BLOCKQUOTE>태그 안의 텍스트는 12포인트 Times체로 표현됩니다.

이미지 옆에 공간 남기기

인용구 내에 이미지를 입력하는 데 있어 제한은 없습니다. 이미지도 인용구 사이에 넣을 수가 있으며,
이미지의 양옆에 40픽셀의 공간이 남습니다.

또한 <IMG> 태그에 ALIGN태그를 첨가하고 RIGHT값을 줌으로써 인용구 내의 이미지를 오른쪽 정렬
할 수도 있지만 이것은 두개의 주요 브라우저가 다른 방식으로 반응하기 때문에 그다지 현명한
방법은 되지 못합니다. 네츠케이프에서는 인용구 내에 오른 정렬한 이미지를 넣은 것과 같고,
반면에 익스플로어의 경우는 이미지를 인용구 밖으로 밀어내 버립니다

인용구 겹쳐 쓰기

HTML 문서를 작성하다 보면 보다 넓은 공간을 위해 하나의 인용구 안에 다른 인용구를 포갤 경우가 있습니다.
두 쌍의 인용구를 포개면 양쪽으로 대략 80픽셀 정도의 빈 공간이 생기게 되고 3개를 포개면 양 옆으로
120픽셀 정도의 공간이 생기게 됩니다

<BLOCKQUOTE>
     <BLOCKQUOTE>
     성별이나 나이에 따라 다르겠지만 이 사람들은 모두 당신을 도와주는 사람들이다. 따라서 좋은 방향으로 이끌어 주는 사람이므로 좋은 꿈이라 할 수 있다
     </BLOCKQUOTE>
</BLOCKQUOTE>

성별이나 나이에 따라 다르겠지만 이 사람들은 모두 당신을 도와주 는 사람들이다. 따라서 좋은 방향 으로 이끌어 주는 사람이므로 좋 은 꿈이라 할 수 있다