2002/11/30(토)
조회: 614
HTML 문법 배우기.  


1.홈 페이지 링크하기

홈페이지를 링크하기 위해서는 <a href="..">..</a> 태그를 사용합니다. 여기서 "a"는 "anchor(닻)"이고, "href"는 "Hypertext REFerence"라고 제 맘대로 상상하고 있습니다..  태그 안에 연결할 주소를 적어주고, 시작 태그와 끝 태그 사이에는 하고 싶은 말을 적어주면 됩니다.

예제 1 : '이정환닷컴'을 링크하려면 <a href="http://www.leejeonghwan.com">요기를 클릭</a>하세요!
==> '이정환닷컴'을 링크하려면 요기를 클릭하세요!

예제 2 : 현재 창 전체를 사용해서 연결시키고 싶다면 옵션으로 target="_top"을 주면됩니다.  

<a href="http://www.leejeonghwan.com" target="_top">요기를 클릭</a>하세요!
==> 요기를 클릭하세요!

예제 3 : 새로운 창을 만들고 이를 사용해서 연결시키고 싶다면 옵션으로 target="_blank"를 주면됩니다.  

<a href="http://www.leejeonghwan.com" target="_blank">요기를 클릭</a>하세요!
==> 요기를 클릭하세요!



2. 이미지 링크하기 :  <img src="이미지의 URL 주소">
예제 : 이정환닷컴의 배너 이미지의 주소는 "http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg입니다.
이때에 이를 링크하려면 이렇게 쓰세요.
<img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg">
==>



3. 음악이나 동영상 연결하기
(1) 내려받기 : <a href="파일의 URL 주소">~</a>
내려받기를 하게 하려면 홈페이지와 마찬가지로 <a hre="..">...</a>를 사용합니다.


예제 : <a href="http://www.leejeonghwan.com/cgi-bin/board/hidden/upfile/Loreena_Mckennit_-_The_Dark_Night_of_the_Soul.mp3"> 여기를 클릭</a>하면 음악을 다운로드할 수 있죠.
==> 여기를 클릭하면 음악을 다운로드할 수 있죠.

(2) 직접수행 : <embed src ="파일의 URL 주소">
웹상에서 다운로드없이 바로 수행하려면 <embed src="..">를 사용합니다.


예제 : <embed src="http://www.leejeonghwan.com/cgi-bin/board/hidden/upfile/Loreena_Mckennit_-_The_Dark_Night_of_the_Soul.mp3" autostart=true loop=false>

==>

autostart=true는 웹이 보이자 마자 실행되게 하는 옵션입니다.
loop = true는 계속 되풀이하도록 하는 옵션입니다. 물론 false이니까 한 번만 플레이 되겠죠?

보통 wav, au, midi 방식의 음악파일, 그리고 mpeg 방식의 동영상을 링크해서 웹상에서 볼 수 있지만, 속도가 너무 느린 단점이 있습니다. mp3의 경우도 익스플로러에서는 지원합니다만 네트워크 속도가 따라가지 못하면 뚝뚝 끊깁니다. 나중에 한 번 실험해보세요..

이미지 링크하기 :  <img src="이미지의 URL 주소">
예제 : 이정환닷컴의 배너 이미지의 주소는 "http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg입니다.
이때에 이를 링크하려면 이렇게 쓰세요.
<img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg">



위에 설명에 한가지 덧붙이자면.. 이 배너에 링크를 거는 것에 대한 것인데요...

배너를 클릭했을 때 이정환닷컴로 들어오도록 링크시키는 건 위의 html 사용법에 설명된 것처럼 링크시키는 방법처럼 하면 됩니다만... 그림을 링크시킬 때 한가지 주의사항(?)에 대해서 말하고자 합니다.

<a href=http://leejeonghwan.com target="_blank"><img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg"></a>


위의 그림을 보면 배너 테두리에 파란색의 선이 보일 것입니다.
제 느낌이지만 그럴경우 조금은 지저분해 보입니다. 그런 지저분함을 없애고자 하시는 분은 border=0를 넣어주시면 됩니다. 아래와 같이..

<img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg" border=0>


반대로 파란선을 더 굵게 보이고 싶으신 분들은 border=10(10대신에 넣고 싶은 자연수를 넣어주면 됩니다.)으로 해주시면 됩니다.

<img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg" border=10>



1. Header 태그를 이용한 글자 크기 바꾸기
원래는 문서에서 제목의 크기를 바꾸기 위한 태그이지만, 본문내에서도 얼마든지 사용할 수 있습니다. 제일 간단한 태그이기 때문에 많이 사용하지요.


다음을 보세요 : <h5>이 문장은 글자 크기가 5입니다.</h5>
==>
이 문장은 글자 크기가 5입니다.

두 번째 문장 : <h6>이 문장은 글자 크기가 6입니다.</h6>
==>
이 문장은 글자 크기가 6입니다.

이 태그는 <h1>부터 <h6>까지 있는데, h1이 가장 크고, h6이 가장 작습니다.


2. <font>를 이용한 글자 모양 바꾸기 - 크기와 색깔
"font" 태그를 이용하면 글자 크기와 색깔을 마음대로 바꿀 수 있습니다.


(1) 글자 크기 바꾸기 : <font size = 크기>~</font>
글자의 크기는 "size"라는 옵션을 넣어주면 됩니다.
그리고 조정 가능한 크기는 제일 작은 1부터 제일 큰 7까지입니다.
위의 <h>태그와는 반대 순서입니다.

다음을 보세요 : 다음은 <font  size=4>글자크기가 4</font>입니다.
==>다음은 글자크기가 4입니다.

다음을 보세요 : 다음은 <font  size=5>글자크기가 5</font>입니다.
==>다음은 글자크기가 5입니다.


(2) 글자 색깔 바꾸기 : <font color = "색깔">~</font>
글자의 색깔는 "color"라는 옵션을 넣어주면 됩니다.
그리고 "색깔" 부분에 red, blue, green, yellow, magenta, cyan, white, black을 써주면 원하는 색깔의 글씨를 쓸 수 있죠.

다음을 보세요 : 다음 문장에서 사용한 색은 <font color="red">빨간색</font>입니다.
==>다음 문장에서 사용한 색은 빨간색입니다.

두 번째 예제 : 다음 문장에서 사용한 색은 <font color="yellow">노랑</font>입니다.
==>다음 문장에서 사용한 색은 노랑입니다.


(3) 원하는 색깔 조합해서 사용하기
만약 원하는 색깔을 만들어서 쓰려면 <font color = "#RRGGBB ">~</font>를 쓰시면 됩니다. 빛의 3원색이 빨강(Red), 녹색(Green), 파랑(Blue)인 것 아시죠? #RRGGBB란 이 세가지 색을 얼마만큼 지정할 것인가를 지정해주는 것입니다. 각 색깔은 00부터 FF까지 쓸 수가 있는데, 진한 정도를 나타냅니다. 예를 들어 "#ff0000"라면 빨강색이 되죠.

다음을 보세요 : 다음 문장에서 사용한 색은 <font color="#ffff00">노랑</font>입니다.
==>다음 문장에서 사용한 색은 노랑입니다.

빛의 3원색에서 빨강과 녹색이 섞이면 노란색이 되기 때문입니다. 물론 세가지 색을 모두 주면 흰색이 되고, 모두 안주면 검정색이죠. 주의하실 점은 세 가지 색의 농도를 똑같이 주면 무조건 회색이 된다는 것입니다. 또한 검정색은 어떤 색도 없는 상태이므로 #000000이고, 흰색은 모두가 섞인 상태인 #ffffff입니다.

다음을 보세요 : 다음 문장에서 사용한 색은 <font color="#333333">진한 회색</font>입니다.
==>다음 문장에서 사용한 색은 진한 회색입니다.


종합편입니다.
다음 글자는 <font size=5>크기가 5</font>이고, 색깔이 <font color="blue">파란색</font>이고, <b>굵은 글자</b>입니다.
이들을 합하면 <font size=5 color="blue><b>>이런 글자</b></font>가 됩니다.
==>다음 글자는 크기가 5이고, 색깔이 파란색이고, 굵은 글자입니다.
이들을 합하면 이런 글자가 됩니다.
가장 많이 쓰는 세 가지 글자 모양입니다.


1. 글자 진하게 하기 : <b> ~ </b>
진한 글자를 영어로 Bold체라고 합니다. 그래서 태그도 "b"를 쓰지요.


이렇게 써보세요 : 글자를 <b>진하게</b> 합니다.
==> 글자를 진하게 합니다.



2. 이탤릭체 쓰기 : <i> ~ </i>
기울어진 글자를 영어로 Italic체라고 합니다. 그래서 태그도 "i"를 쓰지요.


이렇게 써보세요 : 글자를 <i>이탤릭체로</i> 바꿉니다.
==> 글자를 이탤릭체로 바꿉니다.



3. 밑줄있는 글자 쓰기 : <u> ~ </u>
밑줄은 underline이기 때문에 "u"를 씁니다.


이렇게 써보세요 : 글자에 <u>밑줄을</u>칩니다.
==> 글자에 밑줄을 칩니다.



자, 종합편입니다.
이제 글자를 <b>굵게,</b> <i>기울어지게,</i> 그리고 <u>밑줄까지 치면</u> 이렇게 <b><i><u>여러 효과가 들어간 글씨</u></i></b>가 됩니다.
=>
이제 글자를 굵게, 기울어지게, 그리고 밑줄까지 치면 이렇게 여러 효과가 들어간 글씨가 됩니다.

marquee를 이용하면 흐르는 문자열이나 그림을 만들 수 있습니다.
단, 익스플로러에서 지원합니다.

1. 흐르는 배너 : <marquee>배너 문자열</marquee>
marquee를 쓰면 문자열은 기본적으로 오른쪽에서 왼쪽으로 흐릅니다..

예제 : <marquee> 흐르는 문자열 </marquee>
==> 흐르는 문자열


2. 방향지정하기 : <marquee direction="up|down|right|left">배너 문자열</marquee>
"direction"이라는 옵션을 사용하면 흐르는 방향을 마음대로 조정할 수 있습니다. 오른쪽으로 흐르게 하려면 direction="right"이라고 쓰면 되죠.

예제 : <marquee direction="right"> 오른 쪽으로 흐르는 문자열 </marquee>
==> 오른 쪽으로 흐르는 문자열


3. 배너 영역 지정하기 : <marquee height=높이 width = 폭 크기>배너 문자열</marquee>
문자열이 흘러 다닐 영역을 지정합니다. 다음 예제를 보세요.

예제 : <marquee direction="right" width=150> 폭을 150으로 지정한 흐르는 문자열 </marquee>
==> 폭을 150으로 지정한 흐르는 문자열

특히 흐를 방향이 위나 아래인 경우, height로 높이를 지정해주는 것이 좋습니다. 만약 문자열이 흐르는 모습이 보이지 않을 경우에는 <br>을 주어서 영역을 확보시켜주어야 하는 경우도 있을 수 있습니다.

예제 : <marquee direction="down" height=30> 높이를 30으로 지정한 아래로 흐르는 문자열 </marquee>
==> 높이를 30으로 지정한 아래로 흐르는 문자열


4. 왔다갔다 하는 배너 만들기 : <marquee behavior="alternate">배너 문자열</marquee>

예제 : <marquee behavior="alternate"> 왔다갔다하는 문자열 </marquee>
==> 왔다갔다하는 문자열


5. 와서 멈추는 흐르는 문자열 : <marquee behavior="slide">배너 문자열</marquee>
만약 와서 멈추는 모습을 보지 못했다면, Reload해서 다시 관찰해보세요.

예제 : <marquee behavior="slide"> 가서 멈춥니다 </marquee>
==> 가서 멈춥니다


6. 흐르는 속도 조절하기 : <marquee scrollamount=숫자>배너 문자열</marquee>
숫자가 커질 수록 빨라집니다.

예제 : <marquee scrollamount=2> 속도가 2인 흐르는 문자열 </marquee>
==> 속도가 2인 흐르는 문자열


7. 지연시키기 : <marquee scrolldelay=숫자>배너 문자열</marquee>
일정시간 동안 지연시켰다가 흐르게 하는 배너입니다.

예제 : <marquee scrolldelay=200> 지연 시간 200인 흐르는 문자열 </marquee>
==> 지연 시간 200인 흐르는 문자열


8. 흐르는 횟수 지정하기 : <marquee loop=숫자>배너 문자열</marquee>
흐르는 반복 횟수를 지정하는 옵션은 loop입니다. 만약 횟수를 채웠다면, 더 이상 배너가 보이지 않습니다.

예제 : <marquee loop=3> 3회만 흐르고 사라지는 문자열 </marquee>
==> 3회만 흐르고 사라지는 문자열


9. 배너의 배경색 지정하기 : <marquee bgcolor="색깔">배너 문자열</marquee>

예제 : <marquee bgcolor="yellow"> 배경이 노란색인 흐르는 문자열 </marquee>
==> 배경이 노란색인 흐르는 문자열


10. 종합편 1 : 이미지를 이용한 흐르는 배너 만들기
이정환닷컴의 이미지를 이용하여 흐르는 배너를 만드는 예제입니다.
문자열 대신 이미지 링크를 이용한 방법이죠.

예제 : <marquee behavior="alternate"><img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg"></marquee>
==>


11. 종합편 2 : 이미지를 이용한 물결 배너 만들기
marquee를 2번 사용해서 방향을 두 개로 지정하면 물결처럼 흐르는 배너를 만들 수 있습니다.

예제 : <marquee behavior="alternate" direction="down" width=500 height=150> <marquee behavior="alternate" direction ="right">  <img src="http://www.leejeonghwan.com/cgi-bin/image/leejeonghwansmalllogo.jpg"></marquee></marquee>
==>

주의 : 방향 지정시 첫번째 marquee에서는 up/down을 지정하고, 두번째 marquee에서는 left/right를 지정해야 합니다.


웹문서를 통째로 보이게 하는 iframe태그사용법

<iframe src="http://www.leejeonghwan.com/cgi-bin/iboard.cgi" width=500 height=300></iframe>
위와 같이 하시고, 글을 써넣는 란의 문서종류에서 형식을 '부분 HTML'  을 지정하시면 보이고 싶은 웹문서가 아래와 같이 그대로 보이게 됩니다. 링크주소 부분만 바꾸어 주시면 되며, width 와 height 의 길이도 맘대로 조정하시면 됩니다.




                   




Copyright(c) Jeong-hwan Lee All Rights Reserved.
Contact Webmaster for more Information.