나의이야기

[스크랩] 태그가 뭘까?

운산(雲山) 2013. 8. 30. 01:38

태그가 뭘까?

HTML이 사용하는 명령어를 태그(TAG)라고 설명했습니다. 태그라는 명령어를 통해 글자크기,

글자색 글자모양, 그래픽, 문서이동(하이퍼링크)등을 정의 합니다.
즉 태그 명령어들로 구성된 문서가 HTML문서입니다.

그래도 아직 감이 잘 안오신다구요?
브라우저에서 마우스 오른쪽을 클릭하시면 "소스보기"라는 메뉴가 나옵니다.
이 소스들을 보면.. 꺽쇠<>로 둘러싸인 문자들이 보이는데 바로 그것이 태그입니다. 꺽쇠<>안에

표시함으로써 다른 문장과 구분되는 명령어가 바로 태그입니다.

태그는 반드시 쌍을 이루는데 하나는 여는태그 (<태그>) 다른 하나는 닫는태그(</태그>)입니다.
여는태그... 닫는태그... 뭔가 느껴지시나요? (암껏두 안느껴지시다구요?? 눈치 없기는... ㅡㅡ;)
태그는 열리면 닫혀야 하는 언어입니다. 즉 여는태그가 있다면 반드시 어딘가에는 닫는 태그가

있어야 한다는 것입니다.

하지만 모든 법칙에는 예외가 있는 법... 이러한 규칙(?)을 깨는 몇몇 태그들이 있는데 이것들은

여는태그의 모양으로 독립적으로 존재합니다. 즉 닫는태그가 필요없는것들이죠.. <br>, <p>, <meta>,

<hr> 등의 태그가 바로 그 예입니다.

여는태그가 있다면 반드시 어딘가에 닫는태그가 있다고 말씀드렸습니다.
태그들이 복잡하게 구성되어있는 문서에서는... 여는태그에 따라 닫는태그의 순서또한 정해집니다.
쉽게 포함하는 관계로 생각하시면 되는데요. 먼저열린태그는 그후에 열린 태그를 포함하고 있기 때문에..

나중에 열린태그의 닫는태그또한 먼저열린태그안에 포함되어 있어야 합니다. (쉽게 설명하려했는데..

더 어려워진듯 ^^;) 태그를 열었던 순서와 반대순서로 태그를 닫는다는 뜻입니다.

<태그1><태그2> 내용 </태그2></태그1>

열리고 닫히는 순서를 자세히 보세요. 그럼 이해가 되시려나...

홈페이지를 만드는 작업등을 하다보면 에디터를 사용해 HTML을 코딩하게 됩니다.
이때 동일한 태그가 두번 적용된 경우가 있습니다. 이런 경우에는... 내용에 제일 가까운 태그가

적용되게 됩니다.

<글자 색을 붉게><글자 색을 파랗게> 글자는 파랗게 나오게 됩니다.</글자></글자>

글자 색을 파랗게 하는 태그가 내용에 가깝습니다. 따라서 글자는 파랗게 나오겠죠?

마지막으로 위에서 예를 든 태그를 보면...
<글자 색을 붉게>라는 태그를 예로 들었습니다. 이모양은 알기쉽게 글자로 풀어놓은것이구

실제 태그는 <Font Color="red">모양입니다.

여기서 Font는 글자에 관련된 태그, Color는 Font태그가 가지는 속성, Red는 Color속성의 인자 값입니다.

이처럼 태그는 단순한 <태그>의 형태에서 그 태그에 속성을 부여할수도 있습니다.

<HTML>......</HTML>
태그이름 HTML문서의 머리부분
<HEAD> HTML문서의 머리부분으로 반드시 <TITLE>태그를 포함하여야 한다.
예) <HEAD><TITLE>.....</TITLE></HEAD>
태그이름 HTML문서의 제목
<TITLE> HTML문서의 제목을 나타내는 것으로 브라우저의 상단 표시상태줄에 나오게 되는 문서의 제목을 나타낸다.
예) <TITLE>안녕하세요</TITLE>
태그이름 HTML문서의 몸통부분
<BODY> HTML문서의 몸통부분이다.
예) <BODY>.......</BODY>
태그이름 다음줄 넘기기
<BR> 홈페이지를 만들때 가장 곤란을 당하는 경우가 한줄의 글을 쓴다음에 다음줄에 글을 쓰기가 어렵다는 것이다. 일반적인 워드프로세서는 ENTER키를 치면 되지만 HTML문서는 이러한 기능이 <BR>밖에는 없다.
예) 홈페이지를 만들어 봅시다.<BR>
홈페이지를<BR>
만들어<BR>
봅시다.
결과) 홈페이지를 만들어 봅시다.
홈페이지를
만들어
봅시다.
태그이름 문단, 단락
<P> <BR>은 한줄의 글쓰기를 끝낸다음 다음글을 쓸때 넘기는 것이다. 그러나 <P>의 경우에는 단락을 구분한다. 즉, 한줄을 띄우고 다음줄에 글을 쓰는 기능이다. 예를 보면 이해가 될것이다.
예) 한 단락을 띄워 보자.<P>
한 문단을 띄워 보자.<P>
한 줄을 띄워 보자.<P>
결과) 한 단락을 띄워 보자.

한 문단을 띄워 보자.

한 줄을 띄워 보자.

글자체의 태그이름
태그이름 글자체의 크기를 조절
<H숫자> 글자체의 크기를 조절하는 기능을 가지고 있으며, 숫자에 따라 큰제목, 작은 제목등을 설정을 해 주면 된다. 1인 경우가 가장 크게 나오며 6까지 지원한다.
예) <H1>태그대학</H1>
<H2>태그대학</H2>
<H3>태그대학</H3>
<H4>태그대학</H4>
<H5>태그대학</H5>
<H6>태그대학</H6>
결과)

태그대학

태그대학

태그대학

태그대학

태그대학
태그대학
태그이름 굵게 표현하기
<B> 글자를 강조하기 위해 이 태그를 쓴다. 주의해야 할 것은 반드시 </B>를 써주어야 한다.
예) 한글 : <B>가나다라마바</B>
영어 : <B>ABCDEF</B>
숫자 : <B>123456</B>
결과) 한글 : 가나다라마바
영어 : ABCDEF
숫자 : 123456
태그이름 굵게 표현하기
<STRONG> 글자를 강조하기 위해 이 태그를 쓴다. 주의해야 할 것은 </STRONG>을 써주어야 한다.
예) 한글 : <STRONG>가나다라마바</STRONG>
결과) 한글 : 가나다라마바
태그이름 밑줄 긋기
<U> 원하는 부분을 선택하여 밑줄을 긋는다.
예) 최강 태그 사이트 : <U>태그대학</U>
결과) 최강 태그 사이트 : 태그대학
태그이름 이태릭체
<I> 원하는 부분을 선택하여 기울게(이태릭체)로 표현한다.
예) 최강 태그 사이트 : <I>태그대학</I>
결과) 최강 태그 사이트 : 태그대학
태그이름 기울여서 강조하기
<EM> 원하는 부분을 선택하여 이태릭체와 굵게 표현하는 것이다.
예) 최강 태그 사이트 : <EM>태그대학</EM>
결과) 최강 태그 사이트 : 태그대학
태그이름 리스트화 하기
<UL><LI> 일정한 항목이나 리스트같은 것을 표현할 경우에 씌인다. (번호로 매기지 않을 경우)
예) <UL>
<LI> 최강 태그 사이트 : 태그대학</LI>
<LI> 최강 태그 사이트 : 태그대학</LI>
<LI> 최강 태그 사이트 : 태그대학</LI>
</UL>
결과)
  • 최강 태그 사이트 : 태그대학
  • 최강 태그 사이트 : 태그대학
  • 최강 태그 사이트 : 태그대학
태그이름 리스트화 하기(번호)
<OL><LI> 위와 같은 기능을 하는 대신 점이 아닌 번호로 리스트화 하는 기능을 갖는다.
예) <OL>
<LI>최강 태그 사이트 : 태그대학</LI>
<LI>최강 태그 사이트 : 태그대학</LI>
<LI>최강 태그 사이트 : 태그대학</LI>
</OL>
결과)
  1. 최강 태그 사이트 : 태그대학
  2. 최강 태그 사이트 : 태그대학
  3. 최강 태그 사이트 : 태그대학
태그이름 한칸 들여쓰기
<BLOCKQUOTE> 한칸 들여쓰기 기능을 갖는다.
예) 이 예제는 한칸 들여쓰기를 보여줍니다. <BLOCKQUOTE>
이 예제는 한칸 들여쓰기를 보여줍니다.</BLOCKQUOTE>
결과) 이 예제는 한칸 들여쓰기를 보여줍니다.

이 예제는 한칸 들여쓰기를 보여줍니다.

태그이름 한칸 앞으로 나오게 하기
<BLOCKQUOTE> 한칸 들여쓰기와 반대로 한칸 앞으로 나오게 한다.
예) <BLOCKQUOTE>
<BLOCKQUOTE>
이 예제는 한칸 나오게 합니다.
</BLOCKQUOTE>
이 예제는 한칸 나오게 합니다.
</BLOCKQUOTE>
결과)

이 예제는 한칸 나오게 합니다.

이 예제는 한칸 나오게 합니다.

태그이름 글 가운데 줄긋기 (Strikethrough)
<STRIKE> 표현하고자 하는 글을 지정하고 가운데 줄을 긋는다.
예) <STRIKE>최강 태그 사이트 : 태그대학</STRIKE>
결과) 최강 태그 사이트 : 태그대학
태그이름 타자체 (Typewriter)
<TT> 타자체를 표현한다. 그러나 거의 표현이 잘 되지 않는다.
예) 최강 태그 사이트 : <TT>태그대학</TT>
결과) 최강 태그 사이트 : 태그대학
태그이름 Citation
<CITE> 이태릭체와 비슷하나 인용문으로 쓰일때 사용된다.
예) 최강 태그 사이트 : <CITE>태그대학</CITE>
결과) 최강 태그 사이트 : 태그대학
태그이름 SAMPLE
<SAMP> 컴퓨터의 상태표현으로 인용문으로 사용된다.
예) 최강 태그 사이트 : <SAMP>태그대학</SAMP>
결과) 최강 태그 사이트 : 태그대학
태그이름 Definition
<DFN> 정의를 표현하고자 할때 씌인다.
예) 최강 태그 사이트 : <DFN>태그대학</DFN>
결과) 최강 태그 사이트 : 태그대학
태그이름 Variable
<VAR> 변수를 표시할 때 씌인다.
예) 최강 태그 사이트 : <VAR>태그대학</VAR>
결과) 최강 태그 사이트 : 태그대학
태그이름 Keyboard
<KBD> 사용자의 키보드에 의해서 입력되는 것을 표현하기 위해 사용된다.
예) 최강 태그 사이트 : <KBD>태그대학</KBD>
결과) 최강 태그 사이트 : 태그대학
태그이름 Blink
<BLINK> 중요한 단어나 강조하고 싶은 단어를 깜박거리게 한다.(단 Nestcape만 지원한다.)
예) 최강 태그 사이트 : <BLINK>태그대학</BLINK>
결과) 최강 태그 사이트 : 태그대학
중급태그
특수문자태그
음악태그
그림태그
html문서는 tag명령어로 이루어 지죠. 태그명령어는 <> ☜이 꺽쇠표시 안에서 사용되구요.....그러면 웹상에서 <> 꺽쇠표시를 나타낼려면 어떻게 해야 할까요? 그냥 태그명령어들 사이에 <> ☜이렇게 사용한다면 태그로 인식이 되기 때문에 웹상에 표현이 되질 않을 겁니다. 이렇듯 html에서 <>& # 등 고유쓰임이 있어 출력에 어려움이 있는 특수문자들을 표현해주기 위해 문자코드라는 것이 있습니다. 문자코드를 이용하면 왠만한 특수문자는 다 표현해 줄 수 있져^^ 문자코드를 다 적자면 A4 용지로 약 3페이지정도 되지만....여기에서는 주로 많이 사용되는 문자코드만 몇개 적어보겠습니다.^^

특수문자

출력코드

특수문자 출력코드

특수문자

출력코드

<

<

ƒ ƒ

>

>

&

&

† †

"

"

ⓒ

©

‰ ‰

??

®

공백

 

Ÿ Ÿ

™

&trade

! ! ¡ ¡ § §
" ' ¢ ¢ æ æ
* * ¤ ¤ ¿ ¿
= = ¥ ¥ × ×

♠ 좀 더 특수문자에 대해서 알고 싶다면 http://user.chollian.net/~iteach 를 참조하길 바랍니다.


※ 채팅 특수문자
채팅을 하다보면 아이디에 요상한 별표나 사각형 당구장표시 등등을 달구 다니는 사람들이 있습니다. 제가 보기엔 태그를 좀 안다구 으시댈려구 달고 다니는 게 아닌가 생각되네여(전적으로 제 개인적 의견 - 실제로 제가 초보시절 이런녀석들한테 폭 많이 당했음) 근데...여러분들 중엔 그걸 어떻게 하면 자기도 할수 있는지 궁금한 분들이 있을 겁니다.(왕초보가 아닐까???) 그런분들을 위해 대화방에서 특수문자를 사용할 수 있는 방법을 알려드리져^^

ⓐ 한자키 사용하기
여러분들.....키보드에 보면 스페이스바 왼쪽에 한자키, 오른쪽에는 한/영키가 다 붙어 있을 겁니다. 확인해보세요? 만약 자기 키보드에는 없다 하시는 분들은....당장 키보드 가져다 버리시길.....^^ 하핫^^ 농담이구요....정상적인 키보드라면 다 붙어 있져....그 중 한자키를 이용하면 특수문자를 쉽게 표현할 수 있져^^ 어떻게 하냐구요? 흠....지금부터 그 방법을 갈켜드릴 테니..... 딴 생각하지 마시구....잘 보시길.....
①젤 먼저 키보드에서 "ㅁ" 을 누른다. 여기서 스페이지바를 누르면 안된다. ②그리고 그 상태에서 "한자"키를 누른다. ③그러면 화면 우측 하단에 특수문자가 나온다. 자기가 원하는 특수문자를 선택한다. ④ 선택한 특수문자로 자동으로 바뀐다. ⑤ "ㅁ" 뿐만 아니라 다른 철자 "ㄴ" ,"ㅇ" ....등 대부분의 철자를 이런식으로 해보면 특수문자나 문자표가 나온다.

ⓑ 문자표 사용하기
또 다른방법은 왼도우에 기본적으로 설치되어 있는 문자표를 사용하는 겁니다. 그 방법은 컴퓨터에 "시작버턴"클릭-->프로그램-->보조 프로그램-->시스템 도구-->"문자표" 를 클릭하면 위에서 나열한 특수문자가 나온답니다. (가끔씩 문자표가 없는 분들이 있을 것입니다. 그건 윈도우98을 "표준설치" 로 한경우에는 문자표가 설치되있지 않습니다. 나타나게 할려면 제어판-->프로그램 추가/제거-->WINDOWS설치-->시스템도구-->문자표 체크를 하면 됩니다.)

ⓒ 기타 방법
한자키도 문자표도 잘 모르겠다....하시는 분들을 위해 직접 몇 가지 특수문자를 나열해 드립니다. 알아서 복사해서 사용하시길....^^

♡

♠

♧

☆

☞

☏

♨

♩

◁

▷

◈

▣

○

◇

◐

◎

□

△

▽

※

⊙

▤

【

♂

㉿

♥

♣

★

☜

☎

♬

♪

◀

▶

‥

。

●

◆

『

』

■

▲

▼

∴

▩

▥

℡

♀

㈜

①

②

③

④

⑤

⑥

⑦

⑧

⑨

⑩

⑪

⑫

⑬

⑭

⑮

≒

≡

♭

∵

°

Ω

θ

Σ

β

α

ⓠ

ⓡ

ⓢ

ⓣ

ⓤ

ⓥ

ⓦ

ⓧ

ⓨ

ⓩ

㉶

＠

π

▦

▨

㏘

†

¤

㉷

㉸

㉹

㉺

㉻

ⓐ

ⓑ

ⓒ

ⓓ

ⓔ

ⓕ

ⓖ

ⓗ

ⓘ

ⓙ

ⓚ

ⓛ

ⓜ

ⓝ

ⓞ

ⓟ

▧

㏂

‡

℉

㉠

㉡

㉢

㉣

㉤

㉥

㉦

㉧

㉨

㉩

㉪

㉫

㉬

㉭

㉮

㉯

㉰

㉱

㉲

㉳

㉴

㉵

】

±

‰

특수문자에 대해선 이 정도 선에서 마무리 짓도록 하겠습니다. 더 이상 설명드릴 것이 없네요^^ 혹시 하다가 궁금한게 있으면 질문과 답변 게시판에 질문을 하시구요...맞져! 그리고 질문과 답변게시판에 질문하기 전에 먼저 자주묻는 질문과 답변란에 자기가 찾는 질문이 있는지 찾아보시구 없을때...하시길 바랍니다......제가 주말 빼고는 점심때 홈페이지에 들려 답변을 해드리는데......찾아보지도 않고 막무가내 식으로 질문만 딸랑 하고 (것두 가장 기초적인 질문만...--;) 가시는 분들이 자주 있는데....거기 까진 그냥 참고 답변을 해드리는데.....질문 끝에 자기 이메일로 답변을 보내달라....하시는 분들은....도저히...제가 열받아서.......가끔씩은 그런 질문은 답변도 없이 삭제시켜버릴 때도 있으니.....질문을 하실때도 조금 성의껏 하시길 바랍니다....... 후~ 괜히 머리가 뜨거워지기 시작하는데.........꼭 먼저 질답란을 찾아보시구요.....그리고 또 제가 시간이 없을 땐 다 답변을 못드려요......학교에서 하는거라..... 그래도 왠만하면 다 답변드릴려고 노력하고 있으니......답변 안해줬다고 협박성(?)메일을 보내시는 분들도 계시는데 그러지 마시구요..^^ 그럼 여기서 마치도록 하겠습니다. ^^

고급태그1
심화엽기문자
표만들기 멋진태이블 만들기
폼태그 프래임이란
메타태그
◈ 엽기 문자

오늘의 메뉴는 엽기 문자가 되겠습니다~ 하지만...그리 엽기적인 내용이 아니라...실망이 크시겠다...이미 많이 보신 것들이라 엽기라 하기에는 좀 그렇고...말이 엽기 문자이지 지금 나오는 무슨 문자들은 친숙한 글자입니다...외계인의 언어도 아니고 아랍어도 아니고 국사 연대도 아닌 저기 엽기문자 타이틀 옆에 나오는 모양부터 시작해 凸★☆※♠♣♨☏☜™ 같은 모양에 대해 좀 까발리는 곳입니다...할 말이 없어서 엽기문자라고 타이틀 지었습니다...심지어는 다 아시다시피 본 사이트가 태그 사이트인데...당연히 태그를 강의해야겠져??태그 모양도 좀 보여 줘야겠지여? 그런데 그 태그가 강좌 내에서 실행이 된다면 곤란하겠지요...태그를 화면에 띄어야 하는데 그냥 넣으면 그 태그가 실행이 되어 버립니다. 그게 바로 엽기 문자의 힘인데요...제가 강좌에서 보여드린 태그 예제...홈페이지 상에 걍 붙여놓지 않습니다. 걍 붙여 넣으면 실행이 되어 버리니까 그냥 넣으면 이상한 결과가 나오겠져? 따라서,페이지상에서 <>요거 나타내려면 어떻게 해야할까요? 계속 강조하지만 걍 <> 이렇게 남용한다면 태그로 인식이 되기땜시 웹상에 표현이 안됩니다.^^ 구래서 <>등 출력에 어려움이 있는 엽기문자들을 표현해주기 위해 문자코드라는 것이 있습니다. 그럼...많이 쓰는 문자코드 몇 개만 나열해 보겠습니다...

엽기문자

문자코드

<

<

>

>

한칸 띄우기

 

!

!

"

'

*

*

=

=

??

®

™

™

(저것들 말고도...종류는 무궁 무진(?)한데...나머지는 많이 쓰일거 같지 않아서 몇 개만 적었습니다) 그리고 저기 한칸 띄우기가 나오지요? HTML 문서에서는 아무리 공간을 띄어도 공간 인식을 하지 않습니다...백번 천번 띄어봤자 그냥 하나의 여백으로만 생각하고 한칸만 띄우는게 이 무식한 HTML과 브라우저 트리오입니다...따라서 여백 한칸 띄울 때마다 특수문자를 넣어 줘야 합니다...   바로 이걸 붙여 넣어야 하는데요...홈페이지에서 엔터를 아무리 쳐도 인식을 못하고 대신 <br> 태그를 넣어 주는 것과 비슷한 맥락이라고 생각하시면 됩니다...그리구...채팅방이나,게임하는데 아래의 문자 (凸★☆※♠♣♨☏☜™)이런 것덜...많이 보셨지요? 게임아뒤나 챗대화명에 막 Fuckyou 모양이나...목욕탕 모양 같은거 도배하고 다니는넘덜...참으로 엽기적으로 보이더군요...특히 포트리스 아뒤에 저거 진짜많이 남발하던데...어쨌든...저 처음에 저거 어떻게 하는지 몰라서...Fuckyou 세례를 수십번 받구...^^그랬지요...그리구...특수문자도 어떻게 하는지 몰라서...한참동안 헤메구...^^겨우겨우 어떤분에게 물어물어 알아냈는데...바로 그 특수문자 쓰는법을 까발리겠습니다.

①한자키로 특수문자 만들기
①키보드에서 ㅁ 을 누르시고 그 상태에서 한자키를 누릅니다.
②그러면 화면 우측 하단에 특수문자가 나옵니다. 자기가 원하는 특수문자를 누릅니다. 그럼 누른 모양으로 바뀝니다.

②한자키로 숫자 만들기(①②③④)요런거
①키보드로 ㅇ를 누질르고 그 상태에서 한자키를 누릅니다.
②그러면 화면 우측 하단에 동그란 알파벳과 숫자가 나옵니다.
이 이외에도 ㅂ ㅈ ㄷ 등을 누르고 한자키를 눌러도 재미있는 모양들이 나오니 마음껏 활용해 보시길...

③凸모양 만들기
이 모양은 웬만해서는 설명도 안하려구 했는데...
성(sex)문화도 숨기기만 해서는 올바른 성문화가 싹틀 수 없듯이...^^
저 모양 어떻게 하는지도 설명하겠습니다.
①한글로 철을 친 후 한자키를 누릅니다.
②배열된 한자 중 9번째 한자(볼록할 철.실제로 이 한자 있음)를 선택합니다.
④한자만들기
①한자의 음을 입력합니다.
②아무것도 치지 마시구 한자키를 누릅니다.
③그러면 오른쪽 하단에 한자들이 놓여져 있을 것입니다.
④한자 중 자신이 원하는 한자를 선택합니다.

그런데...이 방법 말구도...또 다른 방법이 있는데...문자표를 사용하는 겁니다. 문자표에도 없는거 빼고 다 있습니다...저 방법대로 하는 것은 다 할 수 있습니다.

"시작"클릭-->프로그램-->보조 프로그램-->시스템 도구-->"문자표" 를 클릭하면 위에서 나열한 특수문자가 나온답니다. 하지만 옵션로 문자표가 깔리지 못해서 문자표가 없는 분들이 있을 것입니다. 나타나게 할려면 제어판-->프로그램 추가/제거-->WINDOWS설치-->시스템도구-->문자표 체크를 하면 됩니다.

그리구 엽기 문자에 대해 더 까발린 부분이 있는데요...여기를 클릭해서 들어가시면 여러 엽기 문자들을 그대로 복사하셔서 사용하실수 있고 여러 글자를 누르고 한자키를 눌렀을 때 나오는 이미지들이 있답니다~

 

출처 : incheon 2010년
글쓴이 : 미추홀짱 원글보기
메모 :

'나의이야기' 카테고리의 다른 글

추석날 고향을 뒤로하고....  (0) 2013.09.24
허난설헌(許蘭雪軒)의 생애  (0) 2013.08.30
카페대문  (0) 2013.08.30
8월 25일(일) 고향 벌초를 하였다.  (0) 2013.08.28
"영원한 휴가 떠난다" 자기 부고 써놓고 떠난 작가 화제  (0) 2013.08.15

'나의이야기'의 다른글

  • 현재글[스크랩] 태그가 뭘까?

관련글

티스토리툴바