이곳에서는 여러분들이 정말 기본적으로 알아두셔야 할 태그에 대해서 공부합니다.

이곳에서는 여러분들이 정말 기본적으로 알아두셔야 할 태그에 대해서 공부합니다.
어려운 태그들도 간간히 나올터이지마 너무나 자주쓰이고 쉬운것들은 외우셔야합니다.
왜 왜우냐고 한다면 너무 자주 쓰이기 때문입니다.
이것들은 태그표시가 가능한 곳에서만 써야지 효과가 나며, 그렇지 않은 곳은 무용지물이죠.
홈페이지를 만드실려고 배우시는 분들은 아래 태그들을 숙지하신 후,
나모웹에디터 강좌로넘어가시면 됩니다.

1. 배우실때는 꼭 해보면서 해야합니다. 태그연습장을 키시고 연습하셔야 합니다.
[태그연습장 새창으로 열기 클릭!]
2. 윤미쩜넷에서는 가장 빈번히 사용되는 태그만 모아놓았습니다.
3. 가장 중요한 것은 빨간색 , 중요한 것은 파란색, 알아두면 좋을 것은 검정색

HTML
웹의 표준 HTML 문서는 마크업 태그(Markup)를 사용하여
제작된 웹문서를 뜻합니다. 마크업 태그란 HTML 문서 작성시 문장,
그림 등을 지정하는 언어이며 현재 버전은 HTML4.0 입니다.

태그의 두가지 종류

태그엔 두 가지가 있는데 하나는 열었으면 닫는 태그, 또하나는 단독으로 쓰이는 태그입니다.
태그는 <어쩌고> 이런식으로 < > 괄호 안에 쓰이게 되지요.

ex) 로 시작을 했다면 끝나는 부분에서 이런식으로 닫아 주어야 태그가 완성.
그러나 이나 <img> 같은 경우는 단독으로 쓰입니다.

HTML 기본 구조

아래 태그를 보세요. 저것이 가장~ 기본적인 골격입니다.
<html> 이렇게 시작합니다. 이것은 이제 태그를 시작하겠다~ 이걸 알려주죠.
<head> 이것은 머리이다~ 요건데요. 한글로 "헤드" 라고 많이 불리우고 쓰입니다.
<title> 은 홈페이지 익스플로워 창 뜨면 윗 상단에 타이틀이 뜨는데 그 타이틀입니다.
타이틀을 정했으면 </title> 이렇게 닫아서 타이틀은 여기까지! 라고 표시를 해야합니다.
타이틀이 끝나면 헤드도 끝이납니다. 헤드도 닫아줘야죠! </head> 닫는걸 잊지마세요!!

그 다음이 진정한 메인! <body> 로 몸통을 열어줍니다. "바디" 라고도 불리죠.
바디부분은 우리가 웹페이지를 보는 부분입니다. 실제로 지금 보시는 강좌페이지도
전부 바디 부분에 쓰여져있는 태그 부분입니다. 그래서 이 보여질 부분이 완전히 끝나면?
</body> 역시 꼭 닫아주셔야 합니다.

이제 모든 태그가 끝이났습니다. 태그 끝 </html> 닫아줘야죠~

이 기본 골격 태그는 홈페이지 제작시 항상 사용되며, 일반 게시판에서 태그를 이용한
글남기기에서는 그다지 필요 없는 부분입니다. ^^*
다시 말해 홈페이지 않만들고 그냥 태그만 살짝 배우겠다 하시는분은~? 넘어가세요!

<html>
<head>
<title>문서의 제목이 들어가는 곳 </title>
</head>
<body>
웹 브라우저의 화면에 보여지는 내용
</body>
</html>

글자 태그

이곳에서부터는 반드시 태그연습장을 키시고 연습하시면서 하세요.
왼쪽에 있는 것이 태그이고,
오른쪽에 있는 부분이 태그연습장에서 확인하기를 누르면 나오는 모습입니다.

<b>글자가 굵게</b>	글자가 굵게
<u>글자에 밑줄</u>	글자에 밑줄
<b><u>굵고 밑줄</b></u>	굵고 밑줄
<b>어</b>떻<u>게될</u>까?	어떻게될까?

결론 !! 는 글씨를 굵게 해주고 는 글씨에 밑줄을 거준다!

이제 글자의 위치를 살짝 바꿔보죠.

<div align="right">오른쪽 정렬</div>	오른쪽 정렬
<center>중간</center>	중간정렬
<div align="left">왼쪽정렬</div>	왼쪽정렬

결론!! 역시 외우셔야 합니다. 자주쓰입니다. 특히 <center> 는 가운데 정렬로
정말 흔히 사용되지요.

TIP:: 공백 태그라고 아시나요~?

태그를 하다보면 스페스로 아무리 열나게 쳐도 한칸밖에 띄어지지 않습니다.
그래서 여러번 치려면은 따로 태그를 사용해주서야 합니다. 바로  

윤미   미

윤 미

글씨 크기와 색상등을 조절해 봅시다!
에.. 여기서 한가지 또 알아두고 가셔야 할 것이 있는데요.
만약 제설명을 듣고도 모르시겠다면 그냥 넘어가셔도 됩니다 ^^*

 와 의 차이점입니다.
이는 비슷한 폰트의 크기 태그이지만 엄연하게 다른 종류입니다.
여러분들 인터넷익스플로워에서 메뉴 보기>텍스트 크기 조절하면은 조절될 때가있고
안될 때가있지요? 그것은 바로 저 태그 때문입니다.
 로는 텍스트 크기가 익스플로어에 맞춘채로 조절이 되지만 태그 사용시엔
크기가 아예 정해진 상태로 나오는 것이기 때문에 조절해도 변하지 않는 것이지요.

모르시면 PASS!

어쨌든 다시연습은 합시다! 글자 크기! 태그연습장 여시고!

<font size="2">냠냠</font>	냠냠
<font size="5">냠냠</font>	냠냠
<span style="font-size: 8pt">냠냠</span>	냠냠
<span style="font-size: 12pt">냠냠</span>	냠냠

는 *의 숫자는 작을수록 크기가 작고 클수록 커집니다.
에 사용된 숫자는 pt(point>란 단위로 역시 커질수록 글자가 커집니다.

<font color="red">무슨색?</font>	무슨색?
<font color="blue">무슨색?</font>	무슨색?
<font color="white">무슨색?</font>	무슨색?
<font color="yellow">무슨색?</font>	무슨색?

글자 색상을 정해주는 태그 아시겠죠? 굵은 글씨부분에다가 색상코드나 영문을 집어넣으면되요.
그런데 색상 코드가 뭐냐구요? 색상코드는 6자리의 영숫자로 이뤄진 색상고유이름이죠.
그것에 대해서는 다음에 자세하게 알려드릴 수 있는 기회가 있을 거에요 ^^*

<font face="굴림">어떤글씨?</font>	어떤글씨?
<font face="돋움">어떤글씨?</font>	어떤글씨?
<font face="궁서">어떤글씨?</font>	어떤글씨?

글씨체를 조절합니다. 그런데 우리 컴퓨터들에게는 기본적인 것만 저장되어있기때문에
굴림, 돋움, 궁서, 바탕 체밖에 쓰지 못해요 >.< 다른 체를 쓰고 싶다면 웹폰트를 이용해야죠!
요즘 블로그나 싸이월드에서 웹폰트 사고 하죠? (나쁜놈들-_- 그걸 사고 팔다니!)
여러분! 홈페이지를 직접 만들면 예쁜 웹폰트들도 공짜로 그냥 사용할 수 있어요!
그냥 만들어주는 얍삽한 블로그나 미니홈피 때려치우고 자신만의 멋진 다지 않의 홈피 !
만들어 보시는것은어떠세요 >.< 음하하하하!~~

요곳들은 종합해서 써볼수 있냐구요? 당빠죠!

<font face="굴림" size="5" >어떤글씨?</font>	어떤글씨?
<font face="돋움" color="red"><b>어떤글씨?</b></font>	어떤글씨?

그림태그

그림 태그! 이거많이들 기다리셨죠~? 그림 태그에 대해서는 무지 간합니다.
그만큼 여러분들 자주쓰이죠~? 가끔 이런질문하는 사람들 있어요. (사실 많이~~)

"내 홈페이지에 있는 그림파일 태그로 어떻게 올려요?"

요렇게~~ 질문하시는분은 정말~~~~ 아무것도 모르시는분입니다.
자기 컴퓨터에 있는 것을 그냥 태그로 보여줄 수 있는 태그는 없습니다.
오로지 태그안에있는 이미지 주소는 인터넷이 연결되었을 때 그때서야 가능한 것으로,
이미 웹상에 올려져있는 이미지의 주소를 가져와야 만 합니다. 그것이 이미지주소죠!
자기컴퓨터안에 있는 이미지 주소를 찾으시면 안됩니다! 그건 자신만 볼수 있지 다른분은
절대로 보실 수 없습니다!! 컴퓨터를 서버로 만들지 않는 이상에는요~

아시겟죠~? 그렇기 때문에 이미지를 어디다던가 올려줘야합니다.

싸이월드같은데 사진첩에 사진 첨부해서 올리죠? 그런식으로요.
그래야지 다른곳에 가서도 첨부한 파일의 사진을 볼수 있잖아요~

그럼 어디다가 첨부하냐~ 이또한 고민이 될 수 있습니다...... 이건... 어쩔수 없이...
직접 구하셔야합니다 ㅠㅠ.. 흔히들 계정을 구입한다라고 하죠.
인터넷 계정을 구입해서 그곳에다가 올리고 뭐 그러고 하는겁니다.
유료계정 이다 무료계정이다 하죠. 이것도 역시! 능력입니다 능력!!

자 그럼 잡소리 넘어가고 그림태그 해보죠 -_-!

결론!! 이미지 태그 쉽죠? <img src="이미지태그주소"> 요렇게만 해주시면 되는겁니다!

하이퍼링크

아 이것도 빼놓을 수 없이 중요한 태그입죠! 이것을 통해서 다른 홈페이지로 이동할 수 있습니다.
이해 못하시겠다구요? 그럼 아래 굵은 글씨 "윤미쩜넷" 을 클릭해보세요.

윤미쩜넷

새창으로제 홈페이지가 뜨는 것을 보실 수 있을 겁니다. 요런겁니다 흐흐흐...
사용법을 숙지하시고.... 외우세요!

윤미쩜넷

굵은글씨로되어있는 제홈페이지 주소를 원하시는 주소로 바꾸시면 됩니다.
자, 그런데요.. 여러분들이 한 것을 미리보기해서 클릭하면 새창이아닌 그자리에서뜨죠?
그 이유는 아직 태그가 덜 되서 그래요.

저렇게 굵은글씨를 추가해주셔야 합니다. 그래야 새창으로 떠요~~ 묻지 말고외워라!
아, 이미지에다가는 하이퍼 링크 못거냐구? 왜 못겁니까! 복습합시다! 컴온~

자, 그런데 여기서 또 질문! 이상탄 테두리가 생겨요!! 그쵸?
역시 이것도 태그로서 조절할 수 있는 부분입니다. 자 지금까지 한 모든 것드릉ㄴ
전부~~ 외워 버리세욧! 이까이꺼 그냥 한다면 외운다 아닙니까?
자 그러면 저렇게 보기 흉한 테두리를 없애려면!!

<img src="http://yoonmi.net/yoonmi.gif" border="0">

이런식으로 border="0" 이것을 이미지 태그안에 쑥 넣어주셔야합니다.

어떻습니까? 완벽하지 않습니까? 하하하~
바로 윗 태그는 그림에다가 테두리 0으로 하고 윤미쩜넷 새창 링크를 걸어준 태그입니다.

음악 태그

넵~ 많이들 기다리셧쬬~? 음악 태그. 음악을 들을 수 있게끔 할 수 있느 태그!
흑흑 ㅠㅠ 눈물이 앞을 가리죠~?

배경음악을 태그로 할 수 있는 방법은 두가지가 있습니다.
하나는 <bgsound src="음악주소"> 이고,
또하나는 <embed src="주소"> 입니다.
bgsound태그는 배경음악으로만 사용할 수 있고,
embed태그는 배경음악으로도 쓸 수 있고, 동영상같은
멀티미디어 파일을 띄울 수도 있습니다.

배경음악 같은 경우는.... 플레이 버튼이나 멈춤버튼이 나오지 않습니다.
그페이지를 바로 열면 나오는 것이 배경음악이지요.

역시 그림파일과 마찬가지로 그림파일의 주소를 넣어줬드니 음악주소를 넣어줘야합니다.
다시말해 집 컴퓨터에 있는 mp3주소를 넣겠다하는 헛소리를 버려줘야죠.

* Bgsound *

음악파일주소 확장자가mp3, mid, wma, wav 등일 경우에 사용하세요.

실험은 태그연습장에서 해보시구요,
음악을 반복재생 하실려면, loop 속성을 아래처럼 추가하시면 됩니다.

loop="3" 은 3번 반복재생 이란 뜻입니다.
열번 반복하고 싶으면 loop="10" 이렇게 해주면 되겠죠.

** 그리고 loop="infinite" 으로 하시면 무한반복입니다. **

* Embed *

다음은 Embed 태그에 대해서 알아보죠. 여러분들이 원하던게 이걸 껍니다.
동영상, 음악 등을 띄울 수 있는 태그이며
멀티미디어 재생기가 뜹니다. (지원하는 파일-asx, asf, wma 등등..)

멀티미디어 재생기를 안보이게 하려면 hidden="true" 속성을 넣으세요.

그리고 embed 태그에서 재생기의 크기를 조절할 수 있는데
값을 width="70" height="25" 로 하면

깔끔한 재생기가 뜨죠~?

그런데 여기서 또 미친듯한 질문들이 쏟아져 나올텐데요~ 그런 바로 자동 재생과 아닌것!
여러분들이 한 태그는 모두 자동재생이죠. 그런데 그냥 자동재생하지 않고 플레이버튼
누를대만 재생이 되게 하려면? AutoStart="false" 이것을 추가해주시면 됩니다.

참고로 이 Embed 태그는 무한반복을 위해선 loop="-1"을 추가하시면 됩니다.

플레이어 상태가 에 색상 효과를 줘볼까 하는데요~? 요것은 그냥 팁이니
넘어가셔도 되고 사용해보셔도 됩니다 ^^*

동영상 태그

기다리셨던 동영상 태그! 음악태그와 같은 형태로 몇가지만 추가될뿐 어렵지 않아요~

역시 무한반복을 위해선 위에 음악태그에서 배웠던 것 처럼 loop="-1"을 추가하시면 됩니다.

동영상 크기조절은 width 와 height 조절하시면 됩니다.

깔끔하게 상태바를 없앨 수도있는데요. ShowControls="false"을 추가해주세요.

수고하셨습니다. 이정도면 여러분들 자유로운 이용이 가능할꺼에요.
좀더 많은 태그, 어려운 태그, 실용적이고 멋진 태그를 원하신다면
주저말고 Webstudy 메뉴에있는 "자바스크립트" 메뉴를 찾아주세요~
무궁무진한 태그들이 숨어져 있습니다 ^^* 수고했어요!!