[펌 강의] 3. HTML에서 TAG의 특성과 간단한 TAG (II)
페이지 정보
써니관련링크
본문
cellpadding="0" cellspacing="0" width="100%" bordercolordark="white"
bordercolorlight="black">
size="2">앞의 강좌에 이어서 계속 간단한
Tag에 대해 알아보기로 하겠습니다. 그럼 Tag의 특성을 간단히 알아볼까요?
앞의 강좌에서 Tag의 특성 중에 다음과 같이 적은
부분이 있었죠.
- 대부분의 TAG는 Opening Tag와 Closing Tag가
쌍을 이룬다. 하지만 Closing Tag는 생략해도 무방하다고 설명을
했죠?
예) <HTML>...</HTML>, <FONT>...</FONT>
하지만, 모든 tag가 Opening Tag와 Closing Tag로
이루어진 것은 아닙니다.
- <BASEFONT SIZE=n>
- <BR>
- <WBR>
- <P>
위에서 보는 것과 같은 tag들은 Closing Tag가 없습니다.
<BR>이나 <P> 같은 경우는 자주 쓰니까 아마 기억하기 쉬울
겁니다. 그리고 <P>는 Opening Tag와 Closing Tag를 이용해서
사용할 수 있습니다.
그럼 각 태그에 대해 알아보도록 하죠. 여기서는
일단 이런 Tag들이 있구나.. 라고 이해만 해도 되겠네요^^*
4) <BASEFONT SIZE=n>
문서 전체의 기본 폰드 사이즈를 지정할 경우 사용합니다.
HTML 문서는 기본적으로 Font Size가 3으로 지정되어 있습니다. 따라서
Html 문서를 만드는 사람이 Font Size를 지정하지 않으면 3으로 지정이
됩니다. 지금 보는 글은 Font Size가 2입니다.
다음과 같이 사용하면 됩니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT
SIZE="2">
<H1 align="center">기본
글자 크기</H1>
문서 전체의 기본 폰드 사이즈를 지정할 경우
사용합니다.
HTML 문서는 기본적으로 Font Size가 3으로
지정되어 있습니다.
따라서 Html 문서를 만드는 사람이 Font Size를
지정하지 않으면 3으로 지정이 됩니다.
지금 보는 글은 Font Size가 2입니다.
</BODY>
</HTML>
target="_blank">결과보기
앞의 강좌와 <H1>...</H1> Tag를 비교해
보세요. 무엇이 다를까요? 네.. 맞아요. align="center"가
추가 되었네요. 이것은 정렬을 하라는 것이죠.
center면 브라우저의 중앙에, left면 왼쪽에 그리고
right면 오른쪽에 <H1>과 </H1> 사이의 글자를 정렬하라는
말입니다.
<Hn align="center" or "left"
or "right">...</Hn>과 같이 사용하면 된다는 말이죠~!
(n은 1 ~ 7 사이의 숫자)
5) <BR>
줄을 바꿀 때 사용되는 tag로 Breaking의 약자입니다.
Html 문서에서는 우리가 일반 워드 프로세서에서
많이 사용하는 "Enter" Key와 "Space Bar" Key의
기능은 무시됩니다. 빈 칸을 아무리 많이 치고, 공백을 아무리 많이
넣어도 하나밖에 인식을 하지 못합니다. 모두 Html Tag를 이용해 주어야만
효과를 볼 수 있죠.
Html 문서에서 줄 바꿈을 할 경우에는 "Enter"
Key를 사용하는 것이 아니라 <BR> Tag를 이용합니다. <BR>
Tag는 Closing Tag가 없습니다. 줄 바꿈을 하고자 하는 원하는 위치에
삽입하면 됩니다. 바로 위의 예제를 복사해서 메모장에 넣고 실행을
하면 위와 같이 나오지 않을 겁니다. 그럼 아래와 같이 해보죠.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE="2">
<H1 ALIGN="CENTER">기본
글자 크기</H1>
문서 전체의 기본 폰드 사이즈를 지정할 경우
사용합니다. <BR>
size="2">
HTML 문서는 기본적으로 Font Size가 3으로
지정되어 있습니다.<BR>
size="2">
따라서 Html 문서를 만드는 사람이 Font Size를
지정하지 않으면 3으로 지정이 됩니다.<BR>
size="2">
지금 보는 글은 Font Size가 2입니다.
</BODY>
</HTML>
target="_blank">결과보기
그럼 한번 실행해보세요. 어떻게 나오나요?
6) <NOBR>...</NOBR>
"No Line Break"라는 뜻이 있습니다.<BR>
Tag와는 반대로 줄 바꿈을 하고 싶지 않은 문장에 적용하심 됩니다.
Html 파일은 브라우저에서 문장의 길이가 화면보다
길면 자동으로 띄어쓰기가 되는 부분에서 줄 바꿈을 합니다. 하지만
특정 문장에 대해서 이 문장은 줄 바꿈을 하지 말아야겠다고 생각이
되시면 <NOBR> Tag를 사용하면 됩니다.
물론 Table을 이용해서 width를 주는 방법도 있습니다.
이건 나중에 설명드릴께요.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE="2">
<H1 ALIGN="CENTER">기본
글자 크기</H1>
<NOBR>
size="2">문서 전체의 기본 폰드 사이즈를 지정할 경우 사용합니다. HTML
문서는 기본적으로 Font Size가 3으로 지정되어 있습니다. 따라서
Html 문서를 만드는 사람이 Font Size를 지정하지 않으면 3으로 지정이
됩니다. 지금 보는 글은 Font Size가 2입니다.
color="red"></NOBR>
</BODY>
</HTML>
target="_blank">결과보기
7) <WBR>
"Word Break"의 약자라고 보시면 됩니다.
<NOBR>...</NOBR> Tag 내에서 문장의 흐름상 강제로 줄
바꿈을 할 필요가 있을 경우 사용합니다.
<NOBR>...</NOBR> Tag 내에서만 사용이
가능합니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE="2">
<H1 ALIGN="CENTER">기본
글자 크기</H1>
<NOBR>문서 전체의 기본 폰드 사이즈를
지정할 경우 사용합니다. <WBR>
size="2"> HTML 문서는 기본적으로 Font Size가 3으로 지정되어
있습니다. <WBR> 따라서 Html 문서를 만드는 사람이 Font
Size를 지정하지 않으면 3으로
지정이 됩니다.
<WBR> 지금 보는 글은 Font Size가
2입니다. </NOBR>
</BODY>
</HTML>
target="_blank">결과보기
어떻게 나타나는지 한번 확인해 보세요.
8) <P align="center" or "left"
or "right" or "justify">...</P>
여기서는 세가지 Tag를 한번에 설명합니다.
- <P>
- <P align="center" or "left"
or "right" or "justify">...</P>
- <CENTER>...</CENTER>
<P> Tag는 "Paragraph"의 약자입니다.
단락을 뜻하죠. Html 문서에서 단락을 구분해 주고 싶을 경우에 사용하시면
됩니다. <P> Tag는 <BR> Tag와 마찬가지로 <P> Tag
하나만 사용해도 되고 <P>...</P>와 같이 사용해도 됩니다.
<P> Tag는 <BR> Tag를 연속으로 두 번
사용한 것과 동일한 효과를 나타냅니다. 다른 점이 있다면 <BR>
Tag는 <BR> Tag를 여러 번 사용하면 그 만큼 줄 바꿈이 나타나지만
<P> Tag는 여러 번 써도 한 번 쓴 것과 효과가 동일합니다. 그러면
어떻게 사용하면 여러 번 쓴 효과를 볼 수 있을까요?
<P> </P>를 여러 번 사용하시면
됩니다. <P> </P> Tag와 <BR> Tag를 섞어서
잘 사용하시면 홈페이지를 예쁘게 꾸미는데 도움이 될 겁니다.
그러면 <P> Tag 안에 넣는 align에 대해 알아볼께요.
물론 정렬을 나타냅니다.
- center - 브라우저의 중앙에 정렬이 됩니다.
- left - 브라우저의 왼쪽에 정렬이 됩니다.
- right - 브라우저의 오른쪽에 정렬이 됩니다.
- justify - 문장이 브라우저의 양 끝에 맞춰
정렬이 됩니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE="2">
<H1 ALIGN="CENTER">기본 글자 크기</H1>
<P align="left">
size="2">문서 전체의 기본 폰드 사이즈를 지정할 경우 사용합니다.
size="2" color="red"></P>
<P align="center">
size="2">HTML 문서는 기본적으로 Font Size가 3으로 지정되어 있습니다.
size="2" color="red"></P>
<P align="right">
size="2">따라서 Html 문서를 만드는 사람이 Font Size를 지정하지
않으면 3으로 지정이 됩니다.</P>
size="2">
<P align="justify">
size="2">지금 보는 글은 Font Size가 2입니다.
color="red"></P>
</BODY>
</HTML>
target="_blank">결과보기
적당히 잘 이용하시면 문장이 예쁘겠죠?
그러면 <CENTER>...</CENTER> Tag는
뭘까요? 금방 아시겠죠? <CENTER> Tag와 </CENTER> Tag
사이에 있는 문장을 중앙으로 정렬시킵니다.
여기서 설명한 정렬은 문장뿐 아니라 그림이나 이밖에
다른 것들을 정렬하는 데도 사용합니다. 계속 강좌를 보다보면 알 수
있을 겁니다.
9)
Tag라고 하기에는 뭐하지만, 참 유용합니다. HTML
문장에서는 띄어쓰기를 아무리 해도 한 칸만 인식을 합니다. 여러 칸을
인식하고자 할 경우 사용하면 참 유용합니다.
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE="2">
<H1 ALIGN="CENTER">기본 글자 크기</H1>
기
size="2">본
size="2">글 
size="2">;자
size="2">크
size="2">기
</BODY>
</HTML>
target="_blank">결과보기
태그를 많이 알면 좋겠지만, 일부러 외울 필요는
없는 것 같아요. 자주 사용되는 태그는 저절로 외워지고 잘 사용하지
않는 태그는 메모해 두었다고 필요할 때 보고 사용하면 되겠죠?
작성일2005-02-10 11:57
라이브카지노님의 댓글
라이브카지노
