Living Like Human: 표 table 만드는 html tag

기본적인 table tag - 구글 블로그 1칸 가운데 위치 표 만드는 예시는 밑에 따로

1.기본	<table width="640" border="1" cellspacing="0"> <tbody> <tr height="30"> <td width="200"></td> <td></td> <td width="200"></td> </tr> </tbody> </table> 블로그 등에 한 칸만 삽입시 ------------------- <table width="640" border="1" cellspacing="0"> <tbody> <tr> <td > 내용 삽입 </td> </tr> </tbody> </table>	네이버 블로그 가로 740 px가 적당 cellspacing=0 은 외부선 없음 행의 높이가 30 첫행 첫셀 가로크기 200 (자동적으로 340=740-200-200) 첫행 3셀 가로크기 200
2. 배경색/ 선색/ 배경 이미지	* 원하는 곳에 배경색은 bgcolor=red/또는#0000 선색은 bordercolor=red/#0000 background="링크/이미지 파일명"
3.표 경계선	* border=1 만 있으면,px 1의 굵기로 내부선 1개/외부선 1개가 만들어져, 표 구분선이 2중선이 됨 cellspacing=0을 해야 단선으로 표가 그려짐 * border 를 생략하면 선이 없고,’border= ‘ 상태로 두면 기본값 2 로 설정됨
4. 표 정렬	* 표 자체의 화면상 정렬은 <table align=center> ` * 표 안에 데이터 정렬(위치) 설정은 <TD align=right valign=bottom> <TD align=center valign=middle> <TD align=center valign=top>
5. 멀티 미디어 삽입 (멀티 미디어) (멀티 미디어)	1. 배경음악 삽입하기 보통 배경음악은 <head></head> 사이에 삽입이 되곤 합니다. 이때 사용법은 <bgsound src="파일주소"> 입니다. ex) <head> <bgsound src="http://vonzone.hosting.paran.com/html/images/mysong.mp3"> </head> 음악 플레이어를 나오게 할 경우는 <body></body>사이에 <embed>태그를 사용합니다. <embed src="http://vonzone.hosting.paran.com/html/images/mysong.mp3"> ex)<body> <embed src="http://vonzone.hosting.paran.com/html/images/mysong.mp3"> </body> 2. 동영상, 플래시 파일 삽입하기 동영상 파일과 플래쉬 파일은 <embed>태그를 사용합니다. <embed src="파일주소"> ex)<embed src= "http://vonzone.hosting.paran.com/html/images/pretty.wmv" autostart> <embed src="http://vonzone.hosting.paran.com/html/images/gabo.swf"> ※ bgsound 태그의 경우 음악을 끄실 때는 키보드의 Esc 키를 눌러 주시면 됩니다. 그러나 bgsound는 익스플로러에서만 들리고 넷스케이프를 사용하시는 분들은 들을 수가 없지요. 공통으로 들리게 하려면 embed를 사용하세요. bgsound에서는 주로 mid(미디) 파일이나 wav 파일에 사용합니다.. mp3나 asx, asf 등의 파일도 사용이 가능하지만 이러한 파일은 embed 태그를 사용하는 것이 좋습니다. bgsound 태그에서 loop="숫자" 로 지정해 주면 숫자만큼 배경음악이 반복되구요 loop="infinite" 을 쓰면 계속 반복됩니다. embed 태그에서 loop="숫자"는 bgsound 태그의 loop와 같습니다. 그러므로 loop="true" 또는 loop="-1" 로 지정을 하면 계속 반복이 되겠지요. bgsound는 배경음악 태그라서 따로 지정해주지 않아도 되지만 embed 태그는 배경음악 뿐만 아니라 동영상이나 플래시 무비를 보여줄 때도 사용이 되기 때문에 가로(width)와 height(세로)의 수치가 필요합니다. mp3 파일도 embed 태그로 가능하지만 용량이 커서 속도도 느리고 음악이 끊기는 경우가 종종 있습니다. 가능하면 mp3 파일은 피하시고 asf나 wma 파일로 변환하여 사용하시는 것이 좋겠습니다. 참고로 embed는 1%만 로딩이 되도 음악이 나오구요 bgsound 는 100% 로딩이 되어야 음악이 나온답니다	volume="0" 볼륨을 최대로 hidden="true" 플레이어 숨김 loop="-1(또는 true)" 노래를 무한반복/false 확장자 음악(mp3,wma,mid) 플래시(swf) 동영상 avi,wmv,asf,asx,mpg,mpeg 플레이어 크기 조절 <embed src="images/ex.wmv" width="500" height="200"> * 플레이어 오른쪽클릭 금지하기 <embed src="images/ex.wmv" EnableContextMenu="false"> 소스방지태그와 오른쪽클릭금지 태그를 사용해도 동영상은 오른쪽 클릭이 가능해서 동영상주소를 가져갈 수 있습니다. 그래서 다운로드나 트래픽피해를 보는 경우가 많죠... 하지만 위의 태그를 쓰면 플레이어에서 오른쪽클릭을해도 반응이 없습니다. * 플레이어 상태바하단에 파일정보(재생음악의 제목과 저작권, 만든이 등의 정보)나타내기기 <embed src="images/ex.wmv" showstatusbar="1"> * 자동 재생 <embed src="images/ex.wmv" autostart="true"> false는 클릭해야 재생

========================================================================================================

1. <Embed> : Embed

- <EMBED> : 음악, 동영상, 플래시 파일을 삽입시켜 재생시켜주는 태그 (asf, wmv, mp3, swf 등)

- <EMBED SRC="경로"> : 재생하고자 하는 미디어 파일의 경로

- <EMBED WIDHT="가로" HEIGHT="세로"> : 미디어 플레이어의 가로세로 크기

- <EMBED HIDDEN="TRUE"> : 미디어 재생기의 감춤 여부를 결정 (TRUE : 보이기 / FALSE : 감추기)

- <EMBED AUTOSTART="TRUE" > : 자동으로 실행할 것인가를 결정 (TRUE : 실행 / FALSE : 멈춤)

- <EMBED SHOWSTATUSBAR="1"> : 상태바를 표시할것인지 여부 결정 (0 : 표시안함/ 1 : 표시)

- <EMBED LOOP="-1"> : 무한 반복 재생 (반복 회수 지정 / -1이면 무한 반복)

- <EMBED ENABLECONTEXTMENU="0"> : 오른쪽 마우스 클릭 할 수 없음.

- <EMBED HEIGHT="26"> : 트래커 안 보임 (기본값 45)

- <EMBED SHOWTRACKER"="0"> : 트래커 안 보임 (0 : 안 보임 / 1 : 보임)

- <EMBED VOLUME="0"> : 볼륨 크기 최대 (볼륨 범위 : -5000 ~ 0 / 기본값은 -600 / 최소 범위로 -5000 또는 그 이하로 작게 하여도 됨. 꼭 -5000일 필요는 없다. -10000, -7000을 넣어도 무방.)

2. 예제-1 (Embed를 사용한 mp3파일 재생)

[Source]

<html>

<head>

<title>

음악 동영상 플래시 삽입

</title>

</head>

<body>

</body>

</html>

[Result] => mp3파일사용시 용량이 크면 끊김 현상이 발생 할 수도 있으므로 작은 파일 사용

3. 예제-2 (Embed의 각종 옵션 사용한 미디어 플레이어의 컨트롤_1)

[Source]

<html>

<head>

<title>

Embed의 각종 옵션 사용한 미디어 플레이어의 컨트롤_1

</title>

</head>

<body>

</body>

</html>

[Result] => 결과 미디어를 캡쳐하여 보았다.

▲ 2번 검색 슬라이더의 경우 가로사이즈를 길게하였으므로 먼저 진행되는 것을 볼 수 있고, 5번 검색 슬라이더는 autostart를 false로 하였으므로 자동 실행이 되지 않고 멈춰있다. 6번 미디어 재생기는 "재생 중"임과 시간 등을 나타는 상태바 속성을 show로 하였으므로 다른 미디어와 차이를 보인다. 1, 3, 4번 플레이어의 경우에는 기본값 속성으로 생략하여도 무관한 옵션을 사용하였으므로 결과가 같게 되는 것이다. 이해를 돕기 위해 캡쳐 받았는데 도움이 쩜 되셨는지...

4. 예제-3 (Embed의 각종 옵션 사용한 미디어 플레이어의 컨트롤_2)

[Source]

<html>

<head>

<title>

Embed의 각종 옵션 사용한 미디어 플레이어의 컨트롤_2

</title>

</head>

<body>

</body>

</html>

[Result] => 결과 미디어를 캡쳐하여 보았다.

▲ 1의 경우 무한 반복 재생이므로 2,3,4,5,6은 재생 종료 했으나 계속 재생 됨. 5번의 볼륨은 최대 크기이

=================

아래와 같이 왼쪽이 들여쓰기한 것 같은 1칸 (실제로는 3칸= 좌.우 칸은 안보임=경계선 0)표를

입력하려면,

- 아래 표를 복사 해서 붙여 넣기 하고난 후 html 작성 페이지로 전환해서 아래 태그를 참조

하여 width를 적당히 조정

" 안녕하십니까 서울신용평가정보 사이렌24입니다.

고객님께서 받으신 문자가 서울신용평가정보에서 발송된 문자가 맞으십니까?
맞으시다면 당사의 회원가입이 되어있는 고객님들께 발송되는 무료 문자서비스 이며,

신용조회 가 되었거나 신용 등급 하락 으로 인해 받으시는 문자는 아니시고,

최근 한달 이내 신용카드를 개설하셨거나 카드해지를 하셨거나,

대출 이나 현금 서비스를 새롭게 받아보셨거나,

또는 매달 대출금 원금 , ( 이자 ) 상환하시는게 있다면

자동으로 발송되고있는 무료문자 서비스 입니다"

------------------

<col width="20"> 왼쪽칸 = 경계선 안보이게 밑에서 style="border: 0px 로 정정=마치 없는것처럼보임,넓이조정

</col><col width="500"> 가운데 = 내용 들어감 width 를 적당히 조정

</col><col width="50"> 맨오른쪽 =마치 없는 것 처럼 보임, width 를 총 3칸 640 내에서 적당히 조정

(없어도 되는 것 아닌가 ?)

</col>

</colgroup>

<tbody>

<td style="border: 0px 첫번째 칸

solid #000000; padding: 7px 7px 7px 7px; vertical-align: top;"><div dir="ltr" style="line-height: 1; margin-bottom: 0pt; margin-top: 0pt;">

</td>

<td style="border: 1px 첫번째 칸(본문 삽입)

solid #000000; padding: 7px 7px 7px 7px; vertical-align: top;">  " <span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">안녕하십니까 서울신용평가정보 사이렌24입니다.</span><br />

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">고객님께서 받으신 문자가 서울신용평가정보에서 발송된 문자가 맞으십니까?</span><br />

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">맞으시다면 당사의 회원가입이 되어있는 고객님들께 발송되는 무료 문자서비스 이며,</span></div>

<div>

<div>

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">최근 한달 이내 신용카드를 개설하셨거나 카드해지를 하셨거나,</span></div>

<div>

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">대출 이나 현금 서비스를 새롭게 받아보셨거나, </span></div>

<div>

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">또는 매달 대출금 원금 , ( 이자 ) 상환하시는게 있다면 </span></div>

<div>

<span style="background-color: white; color: #4d4d4d; font-family: Dotum; font-size: 12px; line-height: 17.328125px;">자동으로 발송되고있는 무료문자 서비스 입니다"</span></div>

</td>

</tr>

</tbody></table>

Living Like Human

Thursday, December 5, 2013

표 table 만드는 html tag

No comments:

Post a Comment