MARQUEE라는 태그를 이용하여 글자들을 애니메이션 시켜 볼수있답니다.

간단한 html 만으로 텍스트에 가벼운 움직임을 줄수 있습니다.

- 오른쪽에서 왼쪽으로 글씨가 쭈욱 지나가요...

<marquee>글자가 지나가요</marquee>

- width=600 값을주어 가로 600픽셀 내에서만 움직여요.height 나 퍼센트로 줄수도 있어요.

<marquee width=600>영역을 지정해주어요</marquee>

- behavior=alternate 라는 값을 주어 글자가 좌우로 왔따갔다 해요.

<marquee width=600 behavior=alternate>좌우로 움직여요</marquee>

- behavior=slide 라는 값을주어 오른쪽에서 왼쪽으로 한번만 오구 정지되요.

<marquee width=600 behavior=slide>글자가 멈춰요</marquee>

- direction=left/right/up/down 라는 값을 이용해 움직이는 방향을 지정해주어요.

<marquee width=600 direction=right>오른쪽으로 움직여요</marquee>

 : direction=up/down 을 적용시킬땐 height=100 정도의 세로값도 적용시켜 주세요~

-scrolldelay=1000 이라는 값을 주어 1초동안 멈췄다 지나가요... 계속....

<marquee width=600 scrolldelay=1000>글자가 멈췄다 다시 지나가요</marquee>

 : scrolldelay=1000 이 1초구요. 값을 많이 주면.. 점프하는것처럼 보여요..

-scrollamount 값을 변경시키며 속도를 지정해주어요.

<marquee width=600 scrollamount=50>글이 빨리지나가요</marquee>

이외에loop 를 이용해서 마퀴의 횟수를 지정해줄수 있어요..

기본 무한정 반복이니까.. loop=10 이라고 추가해주면 열번만 지나가면 사라져요.

bgcolor을 이용해서 글자가 지나가는 영역부분에 바탕색을 넣어줄수도 있어요.

*현재 테스트는 한줄 텍스트였지만...

실제에서 사용할땐 몇줄의 텍스트를 사용하는 경우가 많습니다.

그런 경우.. 글자가 위로 막~~ 지나가다가 놓치는 경우가 있겠죠..?

그럴때 읽는 사람의 편의를 위해올라가던 텍스트에 마우스를 올리면... 마퀴가 멈춥니다.마우스를 치우면.. 다시 움직이기 시작하게 하는 소스입니다.

onmouseover=stop() onmouseout=start()

marquee 소스안에 추가해주세요~

단. 이 소스는 자바스크립트이기때문에 html 소스만 적용되는 창말고..

자바스크립트도 적용이 가능한곳에서만 가능해요~ 대부분이 가능하죠~^^;;

* 모든 사항은 html 태그가 사용되는곳에서 테스트 해보시면 금방 차이를 알수가 있답니다.^^*

CSS를 활용해 간격을 조정해보지요~

보통 HTML 에서는 오른쪽, 왼쪽, 가운데.. 그럼.. 왼쪽에서 째금 더 들어가고.. 가운데긴 가운데인데.. 쫌 우측으로 기울고.. 그럴려면 CSS를 활용합시다..

- 좌측 들여쓰기(이미지도 가능)

<TDstyle="padding-left:10px;">내용이 쭈~~욱</TD>

해당 TD의 내용이 10PX 좌측에서 들여쓰기되요~

- 우측 들여쓰기(이미지도 가능)

<TD align="right" style="padding-right:10px;">내용이 쭈~~욱</TD>

해당 TD의 내용이 우측으로부터 10PX 띄여지게 되요~

내용은 기본 좌측으로 붙어있게 되니까.. 우측에서 떨어지게 할때만 align="right"를 넣어준거랍니다.

- 상단에서 째금 띄우기(이미지도 가능)

<TDvalign="top" style="padding-top:10px;">내용이 쭈~~욱</TD>

해당 TD의 내용이 valign="top" 이 적용되어 상단으로 딱 붙게 되구요..

 style="padding-top:10px;" 이 적용되어 상단으로부터 10px 떨어지게 됩니다.

- 하단에서 째금 띄우기(이미지도 가능)

<TDvalign="bottom" style="padding-bottom:10px;">내용이 쭈~~욱</TD>

해당 TD의 내용이 valign="bottom" 이 적용되어 하단으로 딱 붙게 되구요..

 style="padding-bottom:10px;" 이 적용되어 하단으로부터 10px 떨어지게 됩니다.

요기까지.. 간단하죠..?!^^*

HTML 에서의줄바꿈.. 즉, 엔터 역할을 하는것이지요..

HTML 모드에서 아무리 엔터를 수십번 쳐도 브라우저는 한줄도 안 띄어줍니다.ㅡㅡㅋ

즉, 엔터역할을 해줄 태그가 필요한것이지용..

<BR>.. 끝입니다.^^

엔터한번.. <BR> 태그 한번.. 엔터두번이면..?! <BR> 태그 두번을 써주면 됩니다.

<P>.. 요것도 있습니다.

요건 문단을 나누는 역할을 하는것인데요..

문단이라고 해봣자.. 엔터역할을 하는 <BR> 보다 조금 더 띄어준다고 생각하시면 됩니다.

단.<P> 태그는 두번세번써도 안먹어줍니다. 한번만..^^

잠깐~*

엔터를 아무리쳐도 브라우저는 못알아듣는것처럼 안들어 먹는게 하나 더 있죠..

바로 사이띄기..^^

두칸.. 세칸.. 이쁘게 띄어줘도 브라우저는 도통 알아듣질 않습니다.

바로 한칸만 인식하거든요.. 많이띄워도 오직 한칸..

이럴때사이띄기 역할을 해주는 태그&nbsp;요것입니다.

한번써주면 한칸.. 두번써주면 두칸.........열번써주면 열칸이겠죠..?!^^*

+ 폰트 색상 HTML 로 바꾸기 +

<font face="돋움" color="#666666" size=2>폰트 색상은..??</font>

색상을 적용시킬 부분의 시작부분과 끝부분에 코딩해줍니다.

색상은 blue, green... 머 이렇게 적용해주어도 되지만 색상코드를 이용해서 더욱 다양한

색상연출을 할수 있답니다. 색상표는 여기 저기서 쉽게 구할수 있어요~

+ 폰트 색상 CSS 로 바꾸기 +

<style type="text/css">

     .type01{font:12px 돋움; color:#666666;}

     .type02{font:16px 돋움; color:#996699;}

</style>

스타일내에 위와 같은식으로 정의를 해두고 적당할때 꺼내서 사용합니다.

<tableclass="type01"....요렇게.. 그럼.. 해당 TABLE 에서 type01 로 정의된속성이 적용됩니다.

<tdclass="type02"........요렇게.. 그럼.. 해당 TD 에서 type02 로 정의된속성이 적용됩니다.

내용 줄 맞추기~

- 사용 예..

(혼자서는 사용할수 없어요.. 아.. 사용할수 없는건 아니구 다른것들과 함께 사용해요~^^)

<P align="center">

내용........

</P>

P 태그안에 내용들만 가운데 정렬을 해줘요~

<TABLE align="right">테이블안의 내용

<TR align="right">TR 안의 내용

<TD align="right">TD 안의 내용

..... 등등 요렇게 다른 태그안에 함께 사용해주세요..

align="left" 는 구지 해주지 않아도 되요.. 기본설정이 좌측정렬이라 안해줘도 되거등요..

상하로 정렬할땐..

valign="top"    ---->    요건 상단으로 딱 붙게되구욤.

valign="bottom" --->  요건 하단으로 딱 붙게되구욤.

간단간단...^^*

- 테이블의 테두리 색

<table border=1 bordercolor="#CCCCCC" cellspacing=0>

   <tr>...............이하 생략^^

cellspacing 값에 0을 주지않으면.. 테두리가 두겹으로 안이쁘기때문에 준거랍니다.^^

- 테이블의 배경색

<table border=1bgcolor="#CCCCCC"cellspacing=0>

   <tr>

      <td>1-1셀</td>

      <td>1-2셀</td>

   </tr>

   <tr>

      <tdbgcolor="#000000">2-1셀</td>

      <td>2-2셀</td>

   </tr>

   <trbgcolor="#C0B15D">

      <td>3-1셀</td>

      <td>3-2셀</td>

   </tr>

</table>

table, tr,td 에 각각 배경색을 넣은것이구요.

색말고 배경을 이미지로 깔고 싶을땐..

bgcolor="칼라코드" 대신background="이미지주소"

이렇게 하시면 됩니다.^^

색상을 사용하실땐 색의 명칭을 직접입력해도 되요.. white, green, red 등등..

그렇지만.. 좀더 다양한 색표현은 칼라코드를 직접사용하는게 좋답니다.

칼라코드는 포토샾같은 그래픽툴에서 찾아볼수도 있고 제 블로그에 다른분 블로그에서 가져온

색상표도 있으니 참고하세요~^_^

잠깐...^^;

border=1 로 설정을 했을때 테이블의 테두리가 좀 뭉뚝하구 보기 안좋죠..?!

앏고 슬림한 선으로 표현하고 싶을땐.....

이렇게 해보세요.. 한 예일뿐.. 방법은 많답니다..^_^

<table border=0 cellpadding=0cellspacing=1 bgcolor="#ff9900">

   <tr bgcolor="#ffffff"><td>1-1셀영역</td></tr>

   <tr bgcolor="#ffffff"><td>2-1셀영역</td></tr>

</table>

좀 더 깔끔한 테이블을 만들기 위한 필수소스~

어떤것이라는 설명보다는 소스를 보세요~^_^

cellpadding 과 cellspacing

기본 깔끔한 테이블을 만들기 위해선 두개다 '0'이란 값을 주어야 하며,

이값은 주지 않아도 설정되는 기본값이 아닙니다.

또, 필요에 다라 그 값을 조절해주는것도 필요하답니다.

cellpadding..이란?! 셀의 선과 내용과의 간격

cellspacing..이란?! 셀과 셀 사이의 간격

조금 까다로워보이지만.. 이건 몇번 테스트를 해보면 정확히 알 수 있을거에요~

<table border=1 cellpadding=0 cellspacing=0>

<tr>

   <td>1-1번셀</td>

   <td>1-2번셀</td>

</tr>

   <td>2-1번셀/td>

   <td>2-2번셀</td>

</tr>

</table>

사용예입니다. 이건 기본인데... 정확히 파악하기 위해서..

첫번째,  cellspacing=0 을 뺀것과 비교하세요.

두번째,  cellspacing=0 에서 0값을 늘려서 비교하세요.

세번째,  cellpadding=0 에서 0값을 늘려서 비교하세요.

정확히 이해가 가실겁니다.

- 사용 예제 샘플 -   

테이블을 만들다 보면.. 사용되어 지고 또 사용되어야할 팁들에 관한 내용입니다.

테이블을 꾸미고 정렬하는 소스입니다.

1. 테이블을 크기정하기

<table border=1 width=500 height=400>

   <tr height=100>

      <td width=250>250*100size</td>

      <td width=150>150*100size</td>

   </tr>

   <tr height=300>

      <td>250*300size</td>

      <td>150*300size</td>

   </tr>

</table>

전체 테이블의 크기를width=500 (가로사이즈), height=400 (세로사이즈)이렇게 지정해줍니다.

또, tr의 세로값과 td의 가로값을 지정해줍니다. 따로 지정해주지않으면..

각 셀에 포함되어지는 내용에 따라 그냥 지멋대로 지정되게 됩니다.

또 전체 테이블의 가로값이 400이라면.. 그 안에 들어가는 tr의 세로값 또한 당연히 전부 합했을때

400이 넘지 않아야 하겠죠..

또 1행의 1열의 가로값이 250이라면.. 2행의 1열값은 물론 같은 열이므로 가로 250이 자동으로 주어지겠죠..^^

2. 테이블의 테두리 라인 지정하기

테이블의 테두리는 tr, td에 따로 지정되어 지지 않습니다. table 에 테두리를 지정할 수 있으며,

테이블의 테두리는 각 tr,td 에도 똑같이 지정됩니다.

<tableborder=1> 테이블의 테두리 1이 주어집니다.

<tableborder=0> 테이블의 테두리 0이 주어집니다. 즉, 보이지 않는거죠..

테두리 값은 0~ 큰 수를 넣어주면 됩니다.

그렇지만 이런 방법은 거의 사용하지 않습니다. 왜냐.. 두껍고 안이쁘니까요..^^;

얇은 테두리를 나타내는 방법은 많습니다. 그건 차차 테이블이 익숙해지면 자기만의 테크닉이 생길것입니다.^_^

이미지같은걸 작업하다보면.. 이미지를 자르기 좀 애매한부분들도 있고..

가끔 구지 자르기 귀찮을때도 있고..^^;

통이미지의 부분 부분을영역으로 지정해서 링크하는 방법입니다.

<img usemap="#map1" src="imgTest.gif" border=0>

<map name="map1">

<area href="gogo1.htm" shape="rect" coords="5, 3, 20, 70" onfocus="this.blur()">

<area href="gogo2.htm" shape="rect" coords="50, 100, 120, 120" onfocus="this.blur()">

</map>

사용할 이미지의맵의 이름 "#map1"로 표기하고..

아랫줄에 map1 에 대한 정의들이 나옵니다.

맵에 대한 내용은 아래에 있어도 되고.. 위쪽에 있어도 상관없습니다.

coords="5, 3, 20, 70" 이 부분만 잘 활용하면 됩니다.

영역을 표시해주는데요..

5는 좌측시작 좌표점, 3은 상단시작 좌표점, 20은 우측끝 좌표점, 70은 하단끝 좌표점..

그럼.. 유용하게..^_^

우리모두 유용하게 사용해보자구용~^_^

텍스트나 이미지에 마우스를 올리면설명글이 뜨게 되는 소스입니다.

보통 텍스트의 경우

<font title="텍스트에 설명글">나는 텍스트</font>

링크 텍스트의 경우

<a href="#" title="링크걸린 텍스트에 설명글">나는 링크텍스트</a>

이미지의 경우

<img src="img.gif" border=0 alt="이미지에 설명글">

폼인 경우

<inuput type="text" title="폼에 설명글">.. 버튼의 경우도 같습니다.

테이블을 사용할때 첨에 이해가 잘 안가시면..엑셀을 생각하시면 편합니다.

셀이란 의미가 많이 비슷하거든요..^^

또 테이블을 만들때 1행에서는 1열만 있어야 하고 2행에선 2열이 있어야 하는경우..

표를 그린다 생각해보면.. 당연히 필요한 일이겠죠..?!

테이블에서 열을 합쳐주는 소스입니다.

3행 3열의 테이블이 있습니다. 긍데 1행은 뻥 뚫어서 1열로 만들고..

2행에서 2열까지를 하나로 만들고 1열은 그대로 두려고 합니다.

소스를 보세요.

 

<table border=1>

   <tr>

      <tdcolspan=3>3열에서 벽을 허물고 1열로 합침!</td>

   </tr>

   <tr>

      <tdcolspan=2>2열에서 벽을 허물고 1열로 합침!</td>

      <td>기존의 1열</td>

   </tr>

   <tr>

      <td>기존 첫번째 열</td>

      <td>기존 두번째 열</td>

      <td>기존 세번째 열</td>

   </tr>

</table>

 

여기에서 새로운 소스 'colspan' 이것이 열을 합쳐주는 역할을 합니다.

열 두개를 합쳐준것이니까 colspan=2 라고 코딩해줍니다.

 

  ▼ 테이블 보기