제목 없음

 

이곳에서는 정말 기본적으로 알아두셔야 할 태그에 대해서 공부합니다.
어려운 태그들도 간간히 나올터이지마 너무나 자주쓰이고 쉬운것들은 외우셔야 합니다.
그래야 나중에 편합니다. 기초부터 탄탄. 알죠? 히히
홈페이지를 만드실려고 배우시는 분들은 아래 태그들을 숙지하신 후,
나모웹에디터 강좌로넘어가시면 됩니다.

배우실때는 꼭 해보면서 해야합니다. 태그연습장을 키시고 연습하셔야 해요.
[태그연습장  새창으로 열기 클릭!]
가장 중요한 것은 빨간색 , 중요한 것은 파란색, 알아두면 좋을 것은 검정색 으로 표기할께요.

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

태그란? |  HTML의 기본구조  |  글자태그   |  그림태그  |  하이퍼링크  |  테이블태그

음악태그   |   동영상태그

태그란?

1. 태그란?

먼저 여러분 HTML 이라고 들어보셨나요?  
어떤 분들은 HTML = TAG 라고 이해를 하고 계신 분도  계실 텐데...
어찌 보면 그럴 수도 있겠지만 엄밀히 말해서 조금 달라요.

 일단 HTML 이란 "Hyper Text Markup Language" 의 약자.
쉽게 말해 홈페이지를 만드는 프로그래밍 언어라고 할 수 있습니다.
왠지 프로그래밍 언어라고 하니깐 어려워 보이죠?^^ 하지만 조금만 배워보면 너무너무 쉬운 것이랍니다.
그리고 태그(TAG)는 HTML 를 이루는 개개의 명령어죠.
이러한 TAG명령어들이 모여 HTML문서를 이루지요.

쉽게 설명하자면 여러분 가끔씩 보는 신문이 있잖아요?
신문이 종이로만 이루어지는 게 아니죠?
그 안에 글자와 사진, 한글, 영어 등이 조합 되서 하나의 신문이라는 게 만들어 지는 거잖아요. 
태그도 마찬가지입니다.
먼저 태그명령어는 신문에서의 글자나 사진, 한글, 영어라고 할 수 있죠.
그리고 HTML문서는 글자와 사진, 한글, 영어가 조합된 신문의 한 페이지로 볼 수 있습니다.
그리고 이러한 신문 한 페이지들이 모여 전체 신문이 완성되는 것처럼
HTML문서가 여러 개가 모이면 하나의 홈페이지가 되는 겁니다.

2. 태그의 두가지 종류

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

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

HTML 기본 구조

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

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

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

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

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

글자 태그

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

1. 가장 자주사용되는 글자 태그

태그입력 결과물
<b>글자가 굵게</b>

글자가 굵게
<u>글자에 밑줄</u> 글자에 밑줄
<b><u>굵고 밑줄</b></u> 굵고 밑줄
<b>어</b>떻<u>게될</u>까? 어떻게될까?
<i>기울여쓰려면?</i> 기울여쓰려면?

결론 !! <b></b>는 글씨를 굵게 해주고 <u></u>는 글씨에 밑줄을 거준다!
<i></i>는 글씨를 기울여주게합니다.

2. 첨자 관련 태그

이제 아래첨자, 위첨자를 배워볼까요?

태그입력 결과물

아<sub>래첨</sub>자

 아래첨자

윗<sup>첨</sup>자

 윗첨자

별로 쓸대는 없지만 수학 공식이나, 연산할 때는 그래도 가끔쓰이지 않을까하는 ;; 개인적인생각입니다.
그러나 전 한번도 쓴적이없습니다 --ㅋ

3. 글자 위치 관련 태그

태그입력 결과물

<div align="right">오른쪽 정렬</div>

오른쪽 정렬

<center>중간</center>

 중간정렬

<div align="left">왼쪽정렬</div>

왼쪽정렬

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

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

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

태그입력 결과물

윤미&nbsp;&nbsp;&nbsp;미

 윤   미

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

4. 글자 크기 마음대로!

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

모르시면 PASS!

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

태그입력 결과물

<font size="2">냠냠</font>

 냠냠

<font size="5">냠냠</font>

 냠냠

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

 냠냠

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

 냠냠

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

5. 글자 색상 바꾸어 버려!

태그입력 결과물
<font color="red">무슨색?</font> 무슨색?

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

 무슨색?

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

 무슨색?

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

 무슨색?

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

6. 글자 폰트를 바꿔 보기

태그입력 결과물
<font face="굴림">어떤글씨?</font> 어떤글씨?
<font face="돋움">어떤글씨?</font>

어떤글씨?
<font face="궁서">어떤글씨?</font>

어떤글씨?

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

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

태그입력 결과물
<font face="굴림" size="5" >어떤글씨?</font> 어떤글씨?
<font face="돋움" color="red"><b>어떤글씨?</b></font>

어떤글씨?

자 여기까지는 완전 기본태그!

7. 한줄띄는 태그

글자를 쓰다보면 한줄을 씌고 싶은데, 일반 HTML 작성할 때는 아무리 엔터를 눌러도,
결과물은 요지부동, 절대 한줄이 띄어지지 않습니다. 그럴때는... 아래와 같이

태그입력 결과물
오늘도 여러분 <br> 즐거운하루가 되세요.

오늘도 여러분
 즐거운하루가 되세요.

<br> 태그를 이용해주셔야 합니다. <br> 태그의 특징은 닫는태그가 없습니다.
다시말해 </br> 이런게 없습니다. 단독으로 사용되는 태그죠.

8. 문단태그

한줄띄는 것보다 조금터 크게 문단형식으로 띄우는 태그가 있습니다.

태그입력 결과물
오늘도 여러분 <p> 즐거운하루가 되세요.</p>

오늘도 여러분

즐거운하루가 되세요.

<br>보다는 <p>가 크게크게 띄워집니다.

9. 글자 쓴 그대로 나타나게 하는 <pre> 태그

생각보다 자주쓰이는데요. 알아두시면 좋을 것 같습니다.
지금까지 배운바로는 html 형식 문서를 쓸땐 엔터도 안먹히고, 스페이스바도 안먹혀서
전부 태그로만 작성했었는데요. 이걸 <pre> 태그로 한방에 해결이 가능합니다.

태그입력 결과물

<pre>오늘도 여러분
힘내시구요.         파이팅!
사랑해요.</pre>

오늘도 여러분
힘내시구요.         파이팅!
사랑해요.

 

그림태그

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

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

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

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

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

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

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

1. 기본적인 그림 태그

태그입력 결과물
<img src="http://yoonmi.net/yoonmi.gif">

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

2. 그림태그에 그림설명 넣기

태그입력 결과물

<img src="http://yoonmi.net/yoonmi.gif" alt="윤미쩜넷배너">

 윤미쩜넷배너

alt="그림설명" 이렇게 하시면됩니다.
그림에 마우스를 잠깐동안 올려보시면 입력한 설명이 뜨게 됩니다.

3. 이미지와 문단 정렬

이미지와 글자가 함께 쓰일때 나타나는 모습을 조절할 수 있습니다.

태그입력 결과물

<img src="http://yoonmi.net/yoonmi.gif">윤미쩜넷

 윤미쩜넷배너윤미쩜넷

<img src="http://yoonmi.net/yoonmi.gif" align="top">윤미쩜넷

 윤미쩜넷배너윤미쩜넷

<img src="http://yoonmi.net/yoonmi.gif" align="middle">윤미쩜넷

 윤미쩜넷배너윤미쩜넷

<img src="http://yoonmi.net/yoonmi.gif" align="bottom">윤미쩜넷

 윤미쩜넷배너윤미쩜넷

위에 쓰인바와 같이 이미지 태그 안에
align="top" (위로 정렬), align="middle"(가운데정렬), align="bottom"(아래정렬)
로 나누어 그림과 글자를 정렬할 수 있습니다.

하이퍼링크

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

윤미쩜넷

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

1. 하이퍼링크 태그

태그입력 결과물
<a href="http://yoonmi.net">윤미쩜넷</a>

윤미쩜넷

굵은글씨로되어있는 제홈페이지 주소를 원하시는 주소로 바꾸시면 됩니다.

2. 하이퍼링크 태그 건 것을 새창으로 띄우기

자, 그런데요.. 여러분들이 한 것을 미리보기해서 클릭하면 새창이아닌 그자리에서뜨죠?
그 이유는 아직 태그가 덜 되서 그래요.

<a href="http://yoonmi.net"  target="_balnk">윤미쩜넷</a>

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

태그입력 결과물
<a href="http://yoonmi.net" target="_blank"><img src="http://yoonmi.net/yoonmi.gif"></a>

3. 하이퍼링크 걸린 이미지에 테두리 없애기

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

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

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

<a href="http://yoonmi.net" target="_blank"><img src="http://yoonmi.net/yoonmi.gif" border="0"></a>

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

테이블 태그

테이블태그는 표를 만드는 태그입니다.
테이블 태그는 처음보는 사람들한테 정말 복작하고 귀찮은게 아닌 수 없습니다.
위에 것 보는것만으로도 벅찬에 이제 정말 진짜로 태그 시작이걸랑요.
왜우셔야 하냐구요? 나모웹에디터를 잘 다루신다면.... 꼭 외우지는 안아도 되지만,
앞으로도 계속 홈페이지 작업하고 할꺼면 필수조건중에 하나입니다.

1. 기본 테이블 태그

<table>
<tr>
<td>셸 안에 들어갈 내용</td>
</tr>
</table>

첫 시작은 <table> 그다음에 줄을 나누는 태그 <tr>이 있습니다.
<tr> 다음에 바로 <td>가 들어갑니다. 셸을 나누는 태그입니다.
<td>가 여러번 쓰일수록 셸이 많이 나눠집니다.
반드시 <td>를 열었으면 </td>를 해서 닫아주고요.
마찬가지로 셸을 몇 개를 넣던 원하는 <td>를 충족시킨후 </tr>로 줄을 닫아줍니다.
한줄을 더 추가하려면 위와 같은 방식으로 계속 추가하면됩니다.
마지막으로 </table>태그로 테이블 태그를 마무리 하면 됩니다.

자 무슨말인지 모르겠죠?;;

그럼 우선 태그연습장에 아래와 같이 입력해봅니다.

태그입력

<table>
<tr>
<td>이 곳이 셸 입니다.</td>
</tr>
</table>

결과물은 다음과 같습니다.

결과물
이곳이 셸 입니다.

자 잘모르겠죠? 그럼 두께를 줘봅시다.

태그입력

<table border="1">
<tr>
<td>이 곳이 셸 입니다.</td>
</tr>
</table>

결과물은 다음과 같습니다.

결과물
이곳이 셸 입니다.

이제 셸을 나눠보겠습니다. <td> 가 늘어나겠죠.

태그입력

<table border="1">
<tr>
<td>나모웹</td>
  <td>드림위버</td>
<td>포토샵</td>
</tr>
</table>

결과물은 다음과 같습니다.

결과물
나모웹 드림위버 포토샵

<td>를 세 번 사용했더니 셸(칸)이 세 개가 생겼습니다.

그러면 셸과 나눔과 동시에 줄도 늘려볼까요?

태그입력

<table border="1">
<tr>
<td>포토샵</td>
<td>플래시</td>
</tr>
<tr>
<td>나모웹</td>
  <td>드림위버</td>
</tr>
</table>

결과물은 다음과 같습니다.

결과물
포토샵 플래시
나모웹 드림위버

<tr>이 한번 더 늘어난 만큼 줄이 하나 더 생겼어요. ^-^

2. 테이블 태그 크기 조절

각 테이블 마다 가로나 세로 크기를 조절 할 수 있습니다.
테이틀 태그에 width(가로) 와 height(세로) 값을 줍니다.
수치를 주는 방법에는 크게 두가지가있는데,
하나는 pixel 값으로 정확하게 주는 것이고,
나머지 하나는 퍼센테이지(%) 값으로 보이는브라우져의 크기에 따라
상대적으로 표의 크기도 변하기 때문에 사용시에 이해가 필요합니다.

태그입력
<table border="1" width="400" height="200">
<tr>
<td>브라우져의 크기를 조절해도</td>
</tr>
<tr>
<td>표의 크기는 변하지 않습니다.</td>
</tr>
</table>

결과물은 다음과 같습니다. 테이블의 세로 크기를 200px로 주었기 때문에,
자동으로 줄이 두 개라서 각각 100px 씩 나눠진 결과물입니다.

결과물
브라우져의 크기를 조절해도
표의 크기는 변하지 않습니다.

3. 테이블 배경 색상 주기

테이블 배경 색상을 줄 수 있습니다. 전체적으로도 가능하고, 셸마다도 가능합니다.
<td> 가 셸을 지정하는 태그였잖아요. td 태그안에 bgcolor="색상코드"을 덧붙여 줍니다.

ps. 색상코드란 숫자 6자리로 이뤄진 고유의 색상넘버에요.

태그입력

 <table border="1" width="200" height="100">

<tr>
<td bgcolor="#EADBDB"></td>
<td bgcolor="#DDEACF"></td>
</tr>
<tr>
<td></td>
<td bgcolor="#E6ECF3"></td>
</tr>

</table>

결과물은 다음과 같습니다. 지금 보면 아랫줄 왼쪽 셸은 아무색도 없는데요.
소스에서 그부분만 지정하지 않아서 그렇습니다.^^

결과물

여기까지 고생하셨습니다. 사실 테이블 태그가 이것말고도 무궁무진 합니다.
그러나, 기본은 여기까지만 하고 나머지는 나모웹에디터 프로그램이 알아서 해줄꺼에요.

그럼 다음 태그 공부로 가볼까요? 아직 끝이 아니에요!

음악태그 바로가기 클릭