size="2">5. 선 그리기 관련 Tag 와 Layout 관련 Tag
1) 선 그리기 관련 Tag
Html 문서에서 수평으로 선을 그을
때 사용하는 tag로 <HR>이라는 tag가 있습니다. horizontal의
약자겠죠?
① <HR> tag의 특성
- Html 문서 내에서 가로 선을 그을 때 사용합니다. (세로 선을 긋는 Tag는 없습니다.)
- <BR> Tag가 필요없습니다. <HR> Tag를 연속으로 사용하면 저절로 줄 바꿈 현상이 일어납니다.
- <HR size="n">
size 옵션을 사용하여 선의 두께를 조절합니다. n이 클수록 선이 두껍습니다. Default 값은 1입니다.
- <HR width="n">또는 <HR width="n%>
width 옵션을 이용해서 선의 길이를 조절할 수 있습니다. Default 값은 100%입니다.
<HR width="n">은 선의 절대적인 길이(Pixel 단위)를, <HR width="n%">는 상대적인 길이를 나타냅니다.
- <HR align="center or left or right">
선의 위치를 조절할 수 있습니다. Default 값은 center입니다.
- <HR noshade>
선의 입체감을 없앱니다.
<!-- default 값이란
<HR> Tag 안에 해당하는 옵션을 주지 않았을 때, 적용되는 값을
말합니다. -->
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<HR width=50% size=1>
<HR width=60% size=2>
<HR width=70% size=3>
<HR width=80% size=4>
<HR width=90% size=5><p>
<HR width=50 size=1 noshade>
<HR width=60 size=2 noshade>
<HR width=70 size=3 noshade>
<HR width=80 size=4 noshade>
<HR width=90 size=5 noshade><p>
<HR width=50% align=left>
<HR width=50% align=right>
<HR width=50% align=center>
</BODY>
</HTML>
target="_blank">결과보기
<!-- value 값을
""로 꼭 둘러쌓을 필요는 없습니다. width="100"이나
width=100 모두 같습니다.-->
2) Layout과 관련 Tag
Html 문서에서 문서의 layout을 변경할
수 있는 tag들을 소개합니다. 여기서 소개하는 layout과 관련된 tag를
사용하면 좀 더 멋진 html 문서를 만들 수 있습니다.
① <PRE>...</PRE>
- "Preformatted text"의
약자입니다.
- 줄 바꿈이나 띄어쓰기를 이용하여
테이블과 같은 형태로 나타낼 경우 편리합니다.
- 고정폭 글꼴(Fixed Width Font)로
나타납니다.
- <PRE>...</PRE>
Tag 안에서는 줄 바꿈이나 띄어쓰기를 할 때 Tag를 사용할 필요없이
Space Bar나 Enter 키를 이용해서 위치를 고정시키면 됩니다.
<!-- 고정폭 글꼴이란 굴림체,
바탕체 등 끝에 "체"가 들어간 글꼴이지요. -->
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<PRE>
<H3> 시험
결과 </H3>
<FONT size="2">
<HR width="380" align="left">
이 름 국어
영어 수학
국사
<HR width="380" align="left">
오징어 100
100 100
100
고등어 80
90 70
60
꼴뚜기 50
30 100
85
<HR width="380" align="left">
</FONT>
</PRE>
</BODY>
</HTML>
target="_blank">결과보기
<!-- 위에서 국사나
꼴뚜기의 국사 점수 바로 옆에 <HR> Tag를 쓴 이유는 <PRE>...</PRE>
Tag 안에서는 띄어쓰기나 개행을 하게 되면 각각에 해당하는 Tag를 사용하는
것과 같은 결과가 나타나기 때문에 옆에 바로 사용했습니다.
한번 다음 줄에 넣고 결과가 어떻게 나오는지 확인해보세요. -->
② <BLOCKQUOTE>...</BLOCKQUOTE>
- 들여쓰기를 할 경우 사용합니다.
인용구를 만들 때 사용하면 편리합니다.
- 들여쓰기 간격을 조절할 수
없습니다.
- <BLOCKQUOTE>...</BLOCKQUOTE>를
사용한 문장의 전후에 한 줄의 여백이 생겨 문단처럼 보입니다.
<!-- default 값이란 <HR>
Tag 안에 해당하는 옵션을 주지 않았을 때, 적용되는 값을 말합니다.
-->
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT size="2">
<BLOCKQUOTE>
쎌리의 홈페이지 따라하기!
<BLOCKQUOTE>
쎌리의 홈페이지 따라하기!
<BLOCKQUOTE>
쎌리의 홈페이지 따라하기!
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
<!-- value 값을
""로 꼭 둘러쌓을 필요는 없습니다. width="100"이나
width=100 모두 같습니다.-->
③ 특수 문자 태그
HTML 문장 내에서 사용되는 예약어를
나타내고자 할 경우 사용합니다. 예를 들어 HTML 문장내에서 <center>라는
것을 나타내려면 <center>라고 사용하면 됩니다.
- ( non-breaking
space)
HTML 문장 내에서 여러 칸 띄어쓰기를 해야 할 필요가 있을 때 사용하면 유용합니다.
- < (< less-than symbol)
- > (> greater-than symbol)
- & (& ampersand)
- " (" quotation mark)
- ­ (~ soft hyphen)
<!-- 예약어란 일반적으로
프로그래밍 언어에서 그 언어 자신이 사용할 변수라고 찜 해둔 것입니다.
그러니까 그런 예약어라는 것을 프로그래머가 변수로 선언하면 에러가
나지요. -->
④ <DIV align="center or
left or right or justify">...</DIV>
- 문장을 정렬하고자 할 경우 사용합니다.
- Align 옵션을 사용하는 <P align="center or left or rignt">...</P> Tag와 사용법이 동일합니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT size="2">
<DIV align="left">쎌리의 홈페이지 따라하기!</DIV>
<DIV align="right">쎌리의 홈페이지 따라하기!</DIV>
<DIV align="center">쎌리의 홈페이지 따라하기!</DIV>
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
⑤ <OL>...</OL>
- "Ordered List"의 약자로, 숫자, 알파벳, 로마 숫자 등을 사용하여 순서가 있는 목록을 나타낼 경우 사용합니다.
- <li>
Type 속성이 지정되지 않으면 숫자(1, 2, 3, 4 ...)로 나타납니다.
- <li type="A">
알파벳 대문자(A, B, C, D ...)로 나타납니다.
- <li type="a">
알파벳 소문자(a, b, c, d ...)로 나타납니다.
- <li type="I">
로마숫자 대문자(I, II, III, IV ...)로 나타납니다.
- <li type="i">
로마숫자 소문자(i, ii, iii, iv ...)로 나타납니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT size="2">
<OL>
<li> Type 속성이 지정되지 않으면 숫자(1, 2, 3, 4 ...)로 나타납니다.
<li type="A"> 알파벳 대문자(A, B, C, D ...)로 나타납니다.
<li type="a"> 알파벳 소문자(a, b, c, d ...)로 나타납니다.
<li type="I"> 로마숫자 대문자(I, II, III, IV ...)로 나타납니다.
<li type="i"> 로마숫자 소문자(i, ii, iii, iv ...)로 나타납니다.
</OL>
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
⑥ <UL>...</UL>
- "Unordered List"의 약자로 번호를 사용하지 않고 그냥 나열할 때 사용합니다.
- <li>
Type 속성이 지정되지 않으면 검은 원 모양으로 나타납니다.
- <li type="disc">
검은 원 모양으로 나타납니다. 앞에 있는 원 보이죠?
- <li type="circle">
하얀 원 모양으로 나타납니다. 테두리만 검은 색이죠.
- <li type="square">
검은 네모 모양으로 나타납니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT size="2">
<UL>
<li> Type 속성이 지정되지 않으면 검은 원 모양으로 나타납니다.
<li type="disc"> 검은 원 모양으로 나타납니다. 앞에 있는 원 보이죠?
<li type="circle"> 하얀 원 모양으로 나타납니다. 테두리만 검은 색이죠.
<li type="square"> 검은 네모 모양으로 나타납니다.
</UL>
</FONT>
</BODY>
</HTML>
target="_blank">결과보기
<!-- 위의 두 가지
목록을 나타내는 Tag 외에 <MENU>...</MENU>, <DR>...</DR>
Tag가 있습니다. 그러나 이 두 가지는 위의 <UL>...</UL>
Tag와 특성이나 기능상의 차이가 없습니다.
그리고 목록을 나타내는
Tag는 위에서 보는 것과 같이 <li> Tag를 사용합니다. li란 "List
Item"의 약자입니다. 또한 들여쓰기를 하는 특징이 있네요.-->
⑦ <DL>...</DL>
- "Definition List"의 약자로 용어의 정의를 나타낼 경우, 정의할 용어의 제목과 그 의미를 나열할 경우 사용하면 유용합니다.
- <dt>
"Definition Term"의 약자로 정의를 내릴 용어의 제목을 표시할 때 사용합니다.
- <dd>
"Definition Description"의 약자로, 용어 정의의 내용을 나타냅니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<FONT size="2">
<DL>
<dt> 강좌를 보다 궁금한 사항이 있으면?
<dd> 묻고 답하기 게시판에 글을 남겨주세요
<dt> target="_blank">클립아트가 필요하세요? 그럼 http://www.clipartworld.com을
방문해보세요.
<dd> 원하는
클립아트가 주제별로 쭈욱 정리가 되어있죠.
</DL>
</FONT>
</BODY>
</HTML>
target="_blank">결과보기 |
[펌 강의] 5. 선 그리기 관련 Tag 와 Layout 관련 Tag 
