- HTML, HEAD, BODY 태그 및 참고사항
① HTML
| <html></html> - HTML 문서의 시작과 끝을 나타내는 것입니다. 따라서 어떠한 페이지든 간에 태그, 이미지, 글 등이 이 태그의 사이에 있어야 합니다. | | | | ② HEAD
|
| <head></head> - 일종의 머리말로서 보통은 문서의 제목만을 title 태그를 사용하여 나타냅니다.
|
| <title></title> - 화면을 열었을 때 가장 상단의 색깔있는 부분에 나타나는 글입니다. 다시 말해, 제목표시줄에 문서의 제목을 나타내는 것입니다. | | | | ③ BODY
|
| <body></body> - HTML 문서의 실제적인 내용이 들어가는 부분으로 화면에 곧바로 나타나게 되는 부분입니다. 특히 이 명령어를 주어야 여러가지 이미지들이 상하지 않기 때문에 HEAD 태그가 끝난 후에 지정해 줍니다.
| | | | ④ 참고사항
|
| 태그는 줄바꾸기 태그 이외에는 모두 시작과 마무리 태그를 주어야 합니다. 시작은 <태그 명령어> 그대로이고 마무리는 </ 태그 명령어>와 같이 슬러쉬를 해줘야 합니다. 그리고 두개 이상의 태그가 동시에 주어지는 경우 처음 것은 제일 나중에 마무리 되어야 합니다. 예제로 확인하세요~
|
| 태그 명령어는 영어의 대소문자를 구별하지 못합니다. 그러니 편한대로 쓰세요.
|
| 태그 명령어는 띠어쓰기를 한칸밖에 인식하지 못합니다. 여러칸을 띠어도 한 칸을 띤 것으로 인식합니다. 그러나 특수문자인 를 하면 한번 당 한칸을 띠는 효과가 나타나며 <는 <, >는 >를 표시해 줍니다.
|
|
예제소스 - 각 태그의 시작과 마무리 순서를 눈여겨 보세요.
| <html>
<head><title>HTML의 형식 예제</title></head>
<body>
팝업창 상단에 제목이 나타났나요?
</body>
</html> | | 예제실행 - 결과를 보시려면 클릭하세요. |
|
|
 글자 폰트의 모든 것 |  |
|
|
|
- 글자크기, 색깔, 모양 , 변형, 움직임 등의 태그와 줄바꿈, 인용구 태그
① 글자크기 태그
|
예제소스
| <font size="2">작은글자</font> - 작은글자 <font size="3">작은글자</font> - 작은글자 <font size="4">보통글자</font> - 보통글자 <font size="5">보통글자</font> - 보통글자 <font size="6">큰글자</font> - 큰글자 <font size="7">큰글자</font> - 큰글자 |
|
|
|
|
② 글자색상 태그
예제소스
| <font color="SteelBlue">예쁜파랑</font> - 예쁜파랑 <font color="4682B4">예쁜파랑</font> - 예쁜파랑 <font color="pink">예쁜분홍</font> - 예쁜분홍 <font color="FFC0CB">예쁜분홍</font> - 예쁜분홍 <font color="458B74">예쁜초록</font> - 예쁜초록 <font color="FF4500">예쁜주황</font> - 예쁜주황 <font color="FFD700">예쁜노랑</font> - 예쁜노랑
|
|
|
|
|
|
③ 글자모양 태그
| <font size="글자체">글자모양 태그</font> - 글자체를 바꾸려면 size 혹은 color 대신에 face를 쓰고 따옴표 안에 글자체 이름을 써주면 됩니다. 그러나 주의해야 할 것은 익스플로러에서 지원하는 굴림체, 돋움체, 궁서체, 바탕체는 자유자재로 바꿀 수 있으나 이솝체, 엽서체, 휴먼매직체.. 등 다양한 글자체는 이것을 지원하는 사이트에서 다운을 받아 zip을 풀어준 후 윈도우의 폰트(제어판에서 바꿔주면 쉽다)에 추가해 줘야지만 사용할 수 있다는 것입니다.
| 예제소스
| <font face="굴림체">굴림체</font> - 굴림체 <font face="돋움체">돋움체</font> - 돋움체 <font face="궁서체">궁서체</font> - 궁서체 <font face="바탕체">바탕체</font> - 바탕체
|
|
|
|
|
|
④ 글자변형 태그
| 이것은 글자변형이지만 font를 사용하는 것은 아니고 간단한 명령어만 주면 됩니다. 아래를 참고하세요.
| 예제소스
| <b>진하게</b> - 진하게 <strong>진하게</strong> - 진하게 <i>이탤릭체</i> - 이탤릭체 <u>밑줄긋기</u> - 밑줄긋기 <sup>위첨자</sup> - 위첨자 <sub>아래첨자</sub> - 아래첨자
|
|
|
|
|
|
⑤ 움직이는 글자 태그
| <marquee direction="방향">움직이는 글자 태그</marquee> - 글자움직임은 글자를 상하좌우 등으로 움직여 주는 것입니다.
여기서 direction이라 지정하고 따옴표 안에 up, down, right, left.. 등의 방향을 주는데 방향이 한쪽으로만 움직이지 않을 경우에는 direction 대신 behavior라 지정하고 움직임의 종류를 따옴표 안에 넣어주면 됩니다.
그리고 scrolldelay="속도"를 해주어 움직이는 속도를 조정할 수 있고 두가지 이상의 움직임을 한꺼번에 적용할 수도 있습니다.
아래의 예를 참고하세요~
| 예제소스
| <marquee direction="right">오른쪽으로 움직임</marquee> | | <marquee direction="left">왼쪽으로 움직임</marquee> | | <marquee behavior="alternate">좌우로 움직임</marquee> | | <marquee behavior="alternate" scrollamount="1000">좌우로 빠르게</marquee> | | <marquee direction="up" scrolldelay="200">위로 올라감</marquee> | | <marquee direction="down" scrolldelay="200">아래로 내려감</marquee> | | <marquee>한<ul>글<ul>자<ul>씩<ul>움<ul>직<ul>임<ul></marquee> | | <marquee behavior="alternate" direction="up">두개이상 적용</marquee> | |
|
|
|
|
|
|
⑥ 참고사항
|
|
| 그림 넣기 | |
|
|
|
- 이미지 넣기 및 배경색상, 배경그림, 수평선 그리기 태그
- 이미지 테두리, 넓이, 높이, 그림설명 등을 지정하는 방법
① 이미지 태그
| <img src="그림주소"> - 태그가 간단하지요? 대신 그림주소를 찾는 것이 중요합니다. 방법은 원하는 그림에 마우스를 대고 우측클릭을 한후 나타나는 화면에 보이는 등록정보(properties)를 클릭하면 http://~로 시작하는 주소가 중앙에 있습니다. 그것이 바로 그림주소입니다. 그 그림주소를 복사하여 따옴표 안에 넣으시면 됩니다.
한번 해 볼까요?
다음 그림위에 마우스를 대고 우측클릭을 한후 등록정보를 보고 제가 제시한 주소가 나타나는지 확인해 보세요.
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/hanmail/daumlogo.gif"> 그러나 여기서 주의할 것은 인터넷상에서 맘에 드는 그림을 보셨을때 그 그림을 임의로 사용할(예를 들어, 게시판에 올리는 정도) 것이 아니라 자신의 홈페이지에 두려고 하는 것일 경우에는 등록정보의 주소를 그냥 가져다 쓰는 것보다는 그림위에 마우스를 대고 우측클릭을 한후 중앙부분에 있는 "다른이름으로 그림저장"을 한 후 컴퓨터에 저장된 그림을 자료실로 업로드하여 자신의 주소로 만들어 쓰는 것이 안전하다는 것입니다. |
② 이미지 편집
| <center>
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/hanmail/daumlogo.gif" border="0" width=200 height=100 alt="Daum로고">
</center>위의 명령어와 그림을 비교하면 충분히 짐작할 수 있듯이 center는 그림(글자도 마찬가지)을 중앙에 위치하게 하고 border는 그림에 보기싫은 테두리가 생길 경우 테두리를 없애주며 width는 넓이를 height는 높이를 지정하여 줍니다. 그리고 alt는 그 그림에 마우스를 대면 나타나는 그림설명입니다. 그림의 크기는 늘릴 수도 있고 줄일 수도 있으나 너무 늘리게 되면 그림이 흐려지고 그 본래 모습을 잃게 될 수 있습니다. 그리고 그림을 움직이고 싶은 경우에는 글자움직이기 태그를 그대로 이용하시면 됩니다. |
③ 배경색상 바꾸기
| <body bgcolor="색상명"> - 배경색상은 본문이 시작할 때 주는 명령어인 <body>안에 들어가는 것입니다. 이것은 화면전체의 색상을 바꿔주는 것으로 색상명에는 글자색상 태그에서와 마찬가지로 색상의 이름 혹은 코드를 넣으시면 됩니다.
예는 아래의 예제소스와 예제실행을 통해 확인해보세요.
|
④ 배경그림 바꾸기
| <body background="배경그림의 주소"> - 배경그림 역시 <body> 안에 들어가는 것으로 벽지 혹은 배경그림으로 불리우는 디자인을 전체화면에 까는 것입니다. 배경그림의 주소를 얻는 방법은 그림의 주소를 얻는 방법과 같습니다.
|
⑤ 수평선 그리기
| <hr size=3>
수평선은 가로선을 말하는 것으로 굵기와 색상 등을 조정할 수 있습니다. align은 선의 위치를 조정하는 것으로 right, left, center 등으로 조정할 수 있고 width는 선의 가로넓이를 조정하는 것으로 %로 나타내거나 그냥 수치로 나타낼 수 있습니다. 그리고 size는 선의 굵기, noshade는 그림자 없애기를 나타냅니다.
그리고 움직이는 글자 태그를 이용해 움직임을 나타낼 수도 있고 color를 이용해 색상을 바꿀 수도 있습니다.
| <hr size=5, width=250 align=center> |
| | <hr size=3, width=50% align=left noshade> |
| | <marquee direction="left"><hr size=2, color="EEAD0E"></marquee> | |
| 예제소스
| <html>
<head><title>그림넣기 예제</title></head>
<body bgcolor="EEAD0E">
<center>그림넣기</center><p>
<hr size=2, color="teal" width=250 align=center><p>
<center>
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/
hanmail/daumlogo.gif" border="0" alt="Daum로고"><p>
</center>
</body>
</html>
| | 예제실행 - 결과를 보시려면 클릭하세요. |
|
|
|
| 음악 넣기 | |
|
|
|
- 음악넣기 태그 및 반복회수 지정방법
① 음악넣기 태그
| <bgsound src="음악주소"> - 배경음악으로 넣을 수 있는 것은 ~.mid~.wav만이 가능합니다.
우선 다음과 같이 연습을 해보세요.
| <bgsound src="http://203.240.193.21/~ingss/data1-out/990822/5.mid"> |
|
② 음악 반복시키기
| 그러면 음악을 계속 반복시키는 방법을 알아볼까요?
<bgsound src="http://203.240.193.21/~ingss/data1-out/990822/5.mid" loop="2">
여기서 loop는 음악의 반복회수를 말합니다. 2라고 했으니 음악이 2번 반복되고 멈추는 것이구요. 그치지 않고 계속 나오기를 원하시면 loop="infinite" 라고 해주시면 됩니다.
| 예제소스
| <html>
<head><title>음악넣기 예제</title></head>
<body bgcolor="458B74">
<center><font color="white" face="이솝체">음악넣기</center><p>
<hr size=2, color="EEAD0E" width=250 align=center><p>
<bgsound src="http://203.240.193.21/~ingss/data1-out/
990822/5.mid" loop="2">
음악 2번 반복을 실행하고 있습니다.<br>
들리시나요?<p></font>
</body>
</html>
|
|
|
|
| 링크시키기 | |
|
|
|
- 링크시키기 태그 및 새 창으로 링크, 그림으로 링크하는 방법
① 링크시키기 태그
| <a href="링크할 주소">주소이름</a> - 링크시키기 태그가 아주 쉽지요?
링크할 주소와 주소이름이 헷갈리시면 아래의 예제를 보세요.
제 홈페이지에 있는 홈페이지제작을 링크시킬 경우입니다.
| <a href="http://cafe.daum.net/CafeLeaders">Daum카페 리더 모임으로</a> |
이 경우에는 현재 브라우저창으로 링크가 되는 경우입니다.
| | |
② 새 창으로 링크시키기
| 이번에는 화면이 안에서 이동하는 것이 아니라 새로 창을 열어 이동하는 것을 해 보겠습니다.
target이라는 것은 이동할 화면을 지정하는 것인데요. 따옴표 안에 _blank, blank, new를 넣으시면 새 창이 열리면서 링크됩니다.
아래의 예제소스를 보시고 직접 링크를 클릭해 보세요.
<a href="http://cafe.daum.net/CafeLeaders" target="_blank">Daum카페 리더 모임으로</a>
Daum카페 리더 모임으로 |
참고로 target="_top"라고 하면 새 창을 열지는 않지만 일부화면만 이동하는 것이 아니라 화면 전체로 이동하게 됩니다. 궁금하신 분은 직접 해 보세요.
| | |
③ 링크편집
| 링크는 모양을 다양하게 디자인할 수 있습니다.
마우스가 위에 있을 때, 링크한 후 등 색상을 변화시킬 수 있고 링크의 밑줄을 없앨 수도 있습니다. 그러나 이것은 7. 스타일시트와 8. 자바스크립트에서 자세히 설명하기로 하고 여기에서는 링크의 폰트변화와 그림으로 링크하는 법 등만 설명하겠습니다.
<a href="http://cafe.daum.net/CafeLeaders" target="new"><font color="FF6600" face="이솝체" size="3">Daum카페 리더 모임으로</font></a>
Daum카페 리더 모임으로 |
이번엔 target="new"를 써보았는데 쉽죠?
'2. 글자폰트의 모든 것'에서 배운 것처럼 주소이름의 앞뒤에 글자 태그를 넣어주면 됩니다.
<a href="http://www.daum.net" target="new">
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/hanmail/daumlogo.gif" alt="Daum로고" border="0"></a>
|
이것도 간단합니다. 주소이름을 넣을 자리에 '그림넣기'에서 배운 것처럼 태그를 넣어주면 됩니다.
여기에서 alt는 그림에 마우스를 대고 있을 때 나오는 설명으로 꼭 해야하는 것은 아니지만 다른 사람이 그림을 보고 이해할 수 있도록 예의상 해주는 것이 좋겠죠?
그리고 테두리가 보기싫게 나타나는 것을 막기 위해 border="0"을 넣어 주었습니다.
| 예제소스
| <html>
<head><title>링크시키기 예제</title></head>
<body bgcolor="EEEEEE">
<center><font color="336699" face="엽서체">링크시키기
</font></center><p>
<hr size=2, color="teal" width=250 align=center><p>
<a href="http://www.daum.net" target="blank">
<img src="https://t1.daumcdn.net/daumtop_deco/icon/image.hanmail.net/hanmail/image/hanmail/
daumlogo.gif" alt="Daum로고" border="0"></a><p>
<a href="http://cafe.daum.net/CafeLeaders" target="_blank">
<font color="FF6600" size="3" face="이솝체">Daum카페 리더 모임으로...
</font></a><p>
제대로 실행이 되셨나요?<p>
</body>
</html>
| | 예제실행 - 결과를 보시려면 클릭하세요. |
|
|
|
| Table 넣기 | |
|
|
|
- 다양한 TABLE 만드는 태그 및 테두리, 색상지정 방법
① TABLE 만들기 태그
| <table>
<tr><td></td></tr>
</table>
기본태그는 간단하죠? 여기서 tr은 열을 바꿔주고, td는 행을 나눠 줍니다. 그러나 table 만들기는 이제 시작입니다. 모양도 여러가지이고 편집도 다양하기 때문에 눈을 크게 뜨고 보셔야 해요~
| | |
② 여러가지 TABLE
아래의 예제들을 보면서 tr과 td를 이용해 어떻게 줄과 칸을 바꿨는지를 잘 관찰하세요.
그리고 두 개의 행(가로)을 합칠 때는 colspan="2", 세 개의 행을 합칠 때에는 colspan="3"..., 두 개의 열(세로)를 합칠 경우에는 rowspan="2"와 같이 넣어주면 됩니다.
설명이 좀 복잡하지만 아래의 태그명령어와 그림을 비교하면서 연습해 보세요.
<table>
<tr>
<td>첫번째 칸</td><td>두번째 칸</td><td>세번째 칸</td><td>네번째 칸</td>
</tr>
</table> | | <table>
<tr><td>첫번째 줄</td></tr>
<tr><td>두번째 줄</td></tr>
<tr><td>세번째 줄</td></tr>
</table> | | <table>
<tr><td>첫째줄 첫째칸</td><td>첫째줄 둘째칸</td></tr>
<tr><td>둘째줄 첫째칸</td><td>둘째줄 둘째칸</td></tr>
</table> | 첫째줄 첫째칸 | 첫째줄 둘째칸 | 둘째줄 첫째칸 | 둘째줄 둘째칸 |
| <table>
<tr><td rowspan="2">첫째줄과 둘째줄의 칸을 합쳤어요.</td>
<td>첫째줄 둘째칸</td></tr><tr><td>둘째줄 둘째칸</td></tr>
</table> | 첫째줄과 둘째줄의
첫째칸을 합쳤어요. | 첫째줄 둘째칸 | 둘째줄 둘째칸 |
|
③ TABLE 편집
| <table border="수치" bgcolor="색상명" width="수치" height="수치"> 이와 같이 table의 테두리, 색상, 크기 등을 조절할 수가 있습니다.
border는 테두리를 얼만큼 주느냐인데 0이면 테두리가 없는 것이고 1, 2...는 테두리가 굵어지게 됩니다. bgcolor는 table의 배경색으로 그냥 color가 아님을 주의하세요. 그리고 width는 넓이를, height는 높이를 지정해 주는 것이 겠죠.
참고로 table에 테두리를 주되 테두리의 색상만 바꾸고 싶다면 bordercolor="색상명"을 추가해 넣으시면 됩니다. 또한 위에서 처럼 table 전체만 지정하는 것이 아니라 tr 혹은 td에 따로따로 테두리, 색상, 크기 등을 지정해 줄 수 있습니다.
<table border="1" bgcolor="458B74" bordercolor="black">
<tr><td rowspan="2" width="200" bgcolor="6699CC">첫째줄과 둘째줄의 칸을 합쳤어요.</td>
<td height="100">첫째줄 둘째칸</td></tr><tr><td>둘째줄 둘째칸</td></tr>
</table> | 첫째줄과 둘째줄의
첫째칸을 합쳤어요. | 첫째줄 둘째칸 | 둘째줄 둘째칸 |
|
| 예제소스
| <html>
<head><title>TABLE 만들기 예제</title></head>
<body bgcolor="458B74">
<center>
<font color="white" face="이솝체">TABLE 만들기</font><p>
<hr size=2, color="EEAD0E" width=250 align=center><p>
<table border="0" bgcolor="6699CC">
<tr><td colspan="2" height="150" bgcolor="EEEEEE">첫째줄의 칸을
합쳤어요.</td></tr>
<tr><td height="100" width="150">둘째줄 첫째칸</td>
<td height="100" width="130">둘째줄 둘째칸</td></tr>
</table><p>
<table border="1" bgcolor="EEEEEE" bordercolor="black">
<tr><td rowspan="3" width="150" bgcolor="6699CC">첫째줄, 둘째줄,
<br>세째줄의 첫째칸을 <br>합쳤어요.</td>
<td height="100" width="130">첫째줄 둘째칸</td></tr><tr><td>둘째줄
둘째칸</td></tr><tr><td>세째줄 둘째칸</td></tr>
</table>
</center>
</body>
</html>
| | 예제실행 - 결과를 보시려면 클릭하세요. |
|
|