'2008/01/18'에 해당되는 글 109건

  1. 2008.01.18 iframe / 투명 아이프레임 / 불투명 아이프레임
  2. 2008.01.18 이미지 하이퍼 링크시 border=0을 스타일시트로....
  3. 2008.01.18 SELECT 메뉴의 배경색 및 폰트색상을 다르게
  4. 2008.01.18 그림문자
  5. 2008.01.18 스타일 시트의 개념과 사용법
  6. 2008.01.18 테이블 프레임(frame) 형태 지정하기
  7. 2008.01.18 글자/단어 간격을 입맛대로 바꾸자.
  8. 2008.01.18 링크를 새창 or 현재창으로 선택해서 열게하자
  9. 2008.01.18 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동.
  10. 2008.01.18 프레임,타겟(Tartget),윈도우URL처리법~
  11. 2008.01.18 소스 한줄로 만들기
  12. 2008.01.18 이전글 응용태그(테이블 테두리 롤오버 효과?)
  13. 2008.01.18 테이블에 마우스 배경컬러 롤오버 효과
  14. 2008.01.18 마우스 오버시 이미지가 컬러가 변합니당!
  15. 2008.01.18 SUBMIT 버튼을 이미지로 바꾸기
  16. 2008.01.18 테이블 자체에 링크 걸기
  17. 2008.01.18 테이블 투명하게 하기
  18. 2008.01.18 스크롤바를 좌측으로 꾸미기
  19. 2008.01.18 문서의 수정된 날짜 자동으로 표시하기
  20. 2008.01.18 Textarea란?
  21. 2008.01.18 반 투명 테이블(은은한 분위기)
  22. 2008.01.18 배경음악 다른 곡으로 연속해서 듣기 - asx
  23. 2008.01.18 글씨 한 줄로 흩날리기 - 마퀴, marquee
  24. 2008.01.18 마퀴태그 응용
  25. 2008.01.18 이쁜거
  26. 2008.01.18 마퀴 태그를 이용한 공지 소스
  27. 2008.01.18 페이지 링크걸때 iframe이 아닌 다른 방법!!!
  28. 2008.01.18 칼라테이블
  29. 2008.01.18 테이블 공지 멈춤 / 시작 기능
  30. 2008.01.18 fieldset로 테이블 만들기

http://oxtag.com/html/ex/iframe/transparency_iframe.html


◈ 배경이 있는 곳에서 아이프레임을 사용 할 때 유용하게 쓰입니다.

◈ 불투명 아이프레임(IE 5.5 이상)

  → iframe 소스안에 style="filter: Alpha(Opacity=60);" 이 것만 추가하면 됩니다.

◈ 투명 아이프레임(IE 5.5 이상)

  → iframe 소스 안에 allowTransparency="true" 이 것을 추가하세요.

  → 그리고 아이프레임 내부에 들어갈 문서 body의 < > 안에 style="background-color:transparent" 를 추가하세요.
Posted by 알 수 없는 사용자
,
하이퍼 링크 그림 삽입시마다 border=0 을 안해도 됩니다.

그 방법은...

<style>
IMG {border: none;}
</style>

이케 스타일시트로 정의해주는거죠...
Posted by 알 수 없는 사용자
,











<select name="select">
<option selected style="background:#ffffff">배경색상을 다르게</option>
<option style="background:#CCFF66">네띠앙</option>
<option style="background:#FFCCFF">한미르</option>
<option style="background:#cccccc">네이버</option>
</select>


<select name="select"><option selected color=#0000ff>style="color:#000000">폰트색상을 다르게</option>
<option style="color:#CCFF00">네띠앙</option>
<option style="color:#FF00FF">한미르</option>
<option style="color:#3300FF">네이버</option>
</select>



위 드롭다운 메뉴에 링크를 거는 방법은 자바스크립트 게시판에서 하단에 검색 창에 select 라고 타이핑 후 검색해보세요.
Posted by 알 수 없는 사용자
,

그림문자

인터넷관련 2008. 1. 18. 14:09
그림문자를 이용한 암호화 기법입니다.

이소스는 일반문자를 그림문자로 변환을해주는(좀더 솔직히 말하면 변환까지는 아닌것 같습니다)소스입니다.
이 소스를 이용하여서 자신만의 글을 꾸미거나 상대방에게 의사전달을 할때 유용할것 같군요,,응용만 잘하면 많은곳에 사용이 될수두 있을것 같구요.. 이 그림문자로 만들어진 소스를 보는방법은 그림문자를 복사하여
메모장에 붙여넣기하여서 보면 그림문자가 지정하는 해당문자가 나옵니다.  

아래 태그를 복사해서 태그연습장에서 실행해보세요.
표안에 그림문자가 나오고 이걸 클릭하면 원래의 문자가 나옵니다.
그림문자가 나오지 안거나 한다면 자신의 컴에 WingDings라는 폰트체가 없어서 그럽니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.font_pic { font-family:WingDings; font-size:20pt; color:black}
</style>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<center>
<table border=1 cellspacing="0" bordercolor="#FF9900" bordercolordark="white" bordercolorlight="#FF9900"><form name="wd">
<tr>
  <td bgcolor="#b0c4de" colspan=10 align="center"><font size=-1><input type=text name="txt" size=2></font></td></tr></form>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' a'; return false">a</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' b'; return false">b</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' c'; return false">c</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' d'; return false">d</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' e'; return false">e</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' f'; return false">f</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' g'; return false">g</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' h'; return false">h</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' i'; return false">i</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' j'; return false">j</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' k'; return false">k</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' l'; return false">l</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' m'; return false">m</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' n'; return false">n</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' o'; return false">o</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' p'; return false">p</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' q'; return false">q</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' r'; return false">r</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' s'; return false">s</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' t'; return false">t</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' u'; return false">u</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' v'; return false">v</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' w'; return false">w</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' x'; return false">x</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' y'; return false">y</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' z'; return false">z</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' A'; return false">A</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' B'; return false">B</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' C'; return false">C</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' D'; return false">D</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' E'; return false">E</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' F'; return false">F</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' G'; return false">G</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' H'; return false">H</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' I'; return false">I</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' J'; return false">J</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' K'; return false">K</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' L'; return false">L</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' M'; return false">M</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' N'; return false">N</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' O'; return false">O</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' P'; return false">P</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' Q'; return false">Q</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' R'; return false">R</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' S'; return false">S</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' T'; return false">T</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' U'; return false">U</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' V'; return false">V</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' W'; return false">W</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' X'; return false">X</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' Y'; return false">Y</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' Z'; return false">Z</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' `'; return false">`</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 1'; return false">1</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 2'; return false">2</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 3'; return false">3</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 4'; return false">4</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 5'; return false">5</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 6'; return false">6</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 7'; return false">7</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 8'; return false">8</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 9'; return false">9</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' 0'; return false">0</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ~'; return false">~</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' !'; return false">!</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' @'; return false">@</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' #'; return false">#</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' $'; return false">$</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' %'; return false">%</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ^'; return false">^</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' &'; return false">&</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' *'; return false">*</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ('; return false">(</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' )'; return false">)</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' _'; return false">_</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' +'; return false">+</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' \\'; return false">\</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ['; return false">[</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ]'; return false">]</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' {'; return false">{</a></td>
</tr>
<tr>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' }'; return false">}</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ;'; return false">;</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' :'; return false">:</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' \''; return false">'</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' \'\''; return false">"</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ,'; return false">,</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' <'; return false"><</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' .'; return false">.</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' >'; return false">></a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' \/'; return false">/</a></td>
</tr>
<tr>
  <td bgcolor="#b0c4de" align="center" colspan=7><font size=-1>그림을 누르면 사용한 글자가 위의 폼에 나옵니다.</font></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' -'; return false">-</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' ='; return false">=</a></td>
  <td class=font_pic><a href="#" onClick="document.wd.txt.value=' \|'; return false">|</a></td>
</tr>
</TABLE>
</center>
</BODY>
</HTML>
Posted by 알 수 없는 사용자
,
□ 스타일 시트의 개념과 사용법 □

좌측 html강좌에 나온 스타일시트는 부족한 부분이 만아서 다솜지기님 홈에서 발췌해온 것입니다.
분량이 상당히 많기 때문에 천천히 읽어보도록 하세요. 만은 도움이 될겁니다.

스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 관리하기 쉽게 하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고
웹 페이지의 용량을 줄일 수 있다는데 있다. 또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼
링크의 형태를 다양화 시킬 수 있다.
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안될 부분의 하나이다.

스타일 시트를 선언하는 방법은 3가지가 있다.

첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>

두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>

세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>

CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.





□ 스타일 시트의 폰트 관련 속성 □

font-family

값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.

예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게  쓰인다.
               P{font-family:굴림,Arial}

font-style

값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}  

font-weight

값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}  

font-size

값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
         상대값- larger,smaller
         퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}





□ 스타일 시트의 색깔과 배경 관련 속성 □

color

값...........색깔이름,RGB값
설명......글씨의 색깔을 설정한다.RGB 값,십진수, 색깔의 고유 이름으로도 사용.
예제......EM{color:red}
        EM{color:rgb(255,0,0)}  

background

값...........transparent,색깔 이름,URL,RBG 값 등
설명......백그라운드 색깔 및 이미지를 설정한다.
예제......P{background:transparent}
        BODY{background:red}
        BODY{background(pcline.gif)}




□ 스타일 시트의 텍스트 문자 관련 속성 □

word-spacing

값..............normal,길이
설명......단어와 단어 사이의 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{word-spacing:0.4cm}  

letter-spacing

값...........normal,길이
설명......word-spacing과는 다르게,글자와 글자 사이에 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{letter-spacing:0.4cm}  

text-decoration

값...........none,underline,overline,line-through,blink
설명......글자 또는 문자열을 어떻게 꾸며줄까 하는 것이다.
               예를 들어, Link에 및줄을 없애고 싶다고 할 때
                text-decoration:none과 같은 용법을 사용할 수 있다.
예제......A:link{text-decoration:none}  

text-indent

값...........길이,퍼센트값
설명......얼마나 좌측에서 들여쓰기(indentation)를 할 것인가를
               설정한다.
예제......P{text-indent:3m}  

line-height

값...........숫자,길이,퍼센트값
설명......두줄 사이의 간격을 설정한다.
예제......DIV(line-height:1.2cm}






□ 스타일 시트의 레이아웃 관련 속성 □

margin-X

속성......margin-top, margin-right, margin-bottom, margin-left 등
값..........길이,퍼센트값,auto
설명......해당하는 내용의 위, 오른쪽, 아래, 왼쪽 등의 여백을 설정한다. 일반 워드 프로세서에서의 위아래, 좌우 여백 설정을 하는 것처럼 설정하면 된다.

예제......BODY{margin:1cm 2cm 3cm}

기타......여백 속성을 각각 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로도 묶어서 설정할 수 있다. 이 때 속성값은 네개를 가지는데, 순서는 Top, Right,Bottom,Left의순서이다. 만일 속성값이 하나라도 상하 좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 Top과 Botttom,두번째 값은 Right와 Left의 값이 된다. 만일 속성값이 세 개라면 모자라는 속성값은 반대쪽 즉,마지막의 속성값은 Left이므로 Right에 설정돼 있는 값으로 설정된다.  

padding-X

속성......padding-top,padding-right,padding-bottom,padding-left 등
값...........길이,퍼센트값,auto
설명......텍스트나 이미지 등에 있어서 border(테두리)와 내용간의 빈 공간을 얼마나 넣어줄 것인가 설정한다.
예제......H1{padding:1cm 2cm}
기타......margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할수 있다.  

border-X

속성......border-top,border-right,border-bottom,border-left
값...........thin,medim,thick,길이값,none,dotted,dashed,solid,double, groove,ridge,insert,outset
설명......border값을 얼마나 줄 것인가 설정한다.
예제.....P{border:solid}
기타.....margin과 마찬가지로 border라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.






□ 스타일 시트의 클래스와 id관련 속성 □

스타일 시트를 정의 할때 상황에 따라 다른 스타일을 적용하고 싶을 때가 있을겁니다.
특정 부분마다 다른 스타일시트를 적용하고 싶을때 클래스나 id속성을 이용합니다.
즉 특정 부분만 묶어서 사용한다고 보심 편합니다.

# 클래스 속성
각각 다른 a 태그 설정으로 구분하여 줍니다.
   a.a1 { ~ }
   a.a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
   class="a1"
   class="a2"

ex)
<head>
<style type="text/css">
font { color:red }
font.style1 { color:blue }
font.style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font class="style1"> 클래스 속성을 이용한 폰트 태그 스타일 </font><br>
<font class="style2"> 클래스 속성을 이용한 폰트 태그 스타일 2 </font><br>
</body>


# id속성
id속성을 사용할 경우는 id속성 선택자 "#" 을 사용합니다.
   a#a1 { ~ }
   a#a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
   id="a1"
   id="a2"

ex)
<head>
<style type="text/css">
font { color:red }
font#style1 { color:blue }
font#style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font id="style1">id 속성을 이용한 폰트 태그 스타일</font><br>
<font id="style2">id 속성을 이용한 폰트 태그 스타일 2</font><br>
</body>






□ 스타일 시트의 문맥 선택자 □

p 태그안의 b 태그가 사용되는 공간은 빨간색으로 표현하고싶다.
이럴 때 쓰는 방법입니다.
이때 사용하는 스타일 시트를 "문맥선택자"라고 합니다.
사용법은 아래와 같습니다.

<head>
<style type="text/css">
p b { color:red }
</style>
</head>
<body>
<p> 안녕하세요! <b>♡카멜롯™♡의 소스천국 태그피아</b></p>
</body>
Posted by 알 수 없는 사용자
,
★ 테이블 프레임
테입블 안에 frame=아래의속성들 중 하나를 추가해서 <table frame=속성>의
형식으로 해주시면 다양한 형태의 테이블을 만드실 수 있습니다.

속성 : void, above, below, hsides, vsides, lhs, rhs

아래처럼 테이블 태그 안에 넣어보시면 쉽게 알 수 있을 겁니다.

<table frame=void>
<table frame=above>
<table frame=below>
<table frame=hsides>
<table frame=vsides>
<table frame=lhs>
<table frame=rhs>


테이블형태 조정하기 속성 void, above, below, hsides, vsides, lhs, rhs
.. ..
.. ..
.. ..

<table frame=void>

.. ..
.. ..
.. ..

<table frame=above>

.. ..
.. ..
.. ..

<table frame=below>

.. ..
.. ..
.. ..

<table frame=hsides>

.. ..
.. ..
.. ..

<table frame=vsides>

.. ..
.. ..
.. ..

<table frame=lhs>

.. ..
.. ..
.. ..

<table frame=rhs>

Posted by 알 수 없는 사용자
,
style="" 태그안에 아래를 넣으세요!
word-spacing:숫자
letter-spacing:숫자

예) style="word-spacing:3; letter-spacing:5;"

[적용]
<font style="word-spacing:3 ; letter-spacing:5">Hi~ ♡ Camelot™의 태그피아 ♡</font>

[적용하지 않은 일반글꼴]
♡ Camelot™의 태그피아 ♡

word-spacing 는 단어사이의 간격
letter-spacing 는 글자사이의 간격을 지정할수있습니다.



특별한 부분만 간격을 만들고자 할때  
   
부분적인 간격이 필요한 곳 앞에 아래와 같이 넣는다.

<p style="margin-left:20mm;">소스천국</p>

:: 왼쪽에서 20mm띄어서 글이 들어간다.
:: 일반텍스트나 이미지를 넣어도 좋고, 기호나 테이블에도 적용가능하다
Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/link_target.php


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function hyperlinks(target)
{
  if (target) where = "_blank";
  else where = "_self";
  for (var i=0; i<=(document.links.length-1); i++)
  {
  document.links[i].target = where;
  }
}

</script>

스크립트를 head  사이에 넣습니다.
아래는 body아래로.


<input type="checkbox" name="targetnew" onclick="hyperlinks(this.checked)"> 새창으로 열기


<a href="http://naver.com">링크명</a>

<a href="http://daum.net">링크명</a>

Posted by 알 수 없는 사용자
,
어느 사이트를 가면 회원가입 폼에서 탭키나 마우스를 인풋박스에 찍지 안아도
글자수를 맞게 입력하면 자동으로 다음으로 넘어가죠. 그 태그입니다.
예제는 링크를 클릭하세요. 위 링크된 것은 예전에 썼던 것인데 요즘은 사용하지 안고 있는
영화관? 입니다. 주민등록 앞자리 6자리를 입력하면 자동으로 다음 인풋태그로 넘어갑니다.

<html>
<head>
<title></title>
<script language="javascript">
function moveNext(varControl, varNext)                
{
if(varControl.value.length == varControl.maxLength)    
{
varNext.focus();
varNext.select();
}
}
</script>
</head>
<body>
<input type="" name="jumin1" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin2);">
<input type="" name="jumin2" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin3);">
<input type="" name="jumin3" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin4);">
<input type="password" name="jumin4" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin1);">
</body>
</html>
Posted by 알 수 없는 사용자
,
프레임을 쓰실때 생각할 것 세가지
1. frame_name.location = 'url.php';
   또는 frame_name.location.href = 'url.php';
   또는 frame_name.location.replace('url.php')
2. parent.frame_name.location = 'url.php';
3. opener.parent.frame_name.location = 'url.php';

새창을 열게해준 창의 주소를 바꾸고 새창을 끈다.
<script>
  opener.location.href = 'url.php';
  self.close();
</script>

새창을 열게해준 창의 주소를 새로고침하고 새창을 끈다
<script>
  opener.location.reload();
  self.close();
</script>

다른 프래임의 주소를 바꾸게 하려면
<script>
  frame_name.location.href = 'url.php';
</script>

프래임 구조상 상위 프래임의 주소를 바꾸게 하려면
<script>
  parent.location.href = 'url.php';
</script>

타겟이 지정된 프레임을 바꾼다.(타겟하나)
<script>
  parent.target(타겟).location.href = 'url.php';
</script>

타겟이 지정된 프레임을 바꾼다.(타겟둘)
<script>
  parent.target1(타겟1).location.href = 'url1.php';
  parent.target2(타겟2).location.href = 'url2.php';
</script>

타겟이 지정된 프레임을 바꾼다.(타겟셋)
<script>
  parent.target1(타겟1).location.href = 'url1.php';
  parent.target2(타겟2).location.href = 'url2.php';
  parent.target3(타겟3).location.href = 'url3.php';
</script>

타겟이 지정된 프레임두개를 클릭으로 바꾸려면
<script>
function target_frame(url1, url2)
{
  parent.top_frame.location.href = url1;
  parent.main_frame.location.href = url2;
}
</script>
<a href="javascript:target_frame('main_menu.html', '$go_url');"> 확인 </a>

로그인페이지 에선
<script>
  parent.top_frame.location.href = '../main.html'; //main.html는 로그인페이지 보다 상위디렉토리에 있다.
  parent.main_frame.location.href = '$go_url';
</script>

로그인페이지를 새창으로 띄웠다면
<script>
  opener.parent.top_frame.location.href = '../main.html';
  opener.parent.main_frame.location.href = '$go_url';
  self.close();
</script>
Posted by 알 수 없는 사용자
,
Posted by 알 수 없는 사용자
,

<table cellpadding="0" cellspacing="0" width="300" align=center>
<tr>
<td bgcolor="#ff9900" align="center" onmouseover="this.style.backgroundColor='#ff00ff'" onmouseout="this.style.backgroundColor=''">
<table width="100%" cellpadding="3" cellspacing="1">
<tr>
<td bgcolor=#fcfcfc valign="top" align=center>
마우스를 올려보세요. 테두리 색 바뀌죠.
</td>
</tr>
</table>
</td>
</tr>
</table>
Posted by 알 수 없는 사용자
,



 





Red Green
Blue
Purple


소스 :
<table border="1" cellpadding="0" cellspacing="0" bordercolor="gray">
<tr>
<td width="240" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''" align=center> Red</td>
<td width="240" onmouseover="this.style.backgroundColor='green'" onmouseout="this.style.backgroundColor=''" align=center> Green</td>  
</tr>
<tr>
<td width="240" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" align=center> Blue</td>
<td width="240" onmouseover="this.style.backgroundColor='purple'" onmouseout="this.style.backgroundColor=''" align=center>
Purple</td>
</tr>
</table>

Posted by 알 수 없는 사용자
,

마우스를 천사 이미지에 대보세요.




<img src="이미지 경로" style="filter:gray()" onmouseout="this.style.filter='gray'" onmouseover="this.style.filter=''">
Posted by 알 수 없는 사용자
,

일반적인 전송버튼인


<input type=submit value=' 전 송 '>


을 예쁜 이미지로 대체하려면 아래 같이 하시면 됩니다.


<input type=image src="이미지 주소" align=top border=0 alt='Click!'>


실행화면 :
Posted by 알 수 없는 사용자
,



소스보기 하셔서 퍼가세요. 태그피아 대문에 이 소스가 적용이 되었습니다.
테이블의 테두리를 감추고 가로/세로 크기를 100%로 해서 아무곳이나 클릭하면 메인으로 들어오죠.

후후 아래 예제는 예전의 계정에 있을때 만든거라서 현재의 태그피아 대문에 쓰인거와는 조금 다릅니다.
현재는 대문에 보이는 문서 전체에 링크를 걸었죠. 이 소스를 바디 시작태그에 넣으시면 됩니다.



<html>
<head>
<title>테이블 링크</title>

<script language="JavaScript">
<!--
function Tagpia_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable)
{
  toolbar_str = toolbar ? 'yes' : 'no';
  menubar_str = menubar ? 'yes' : 'no';
  statusbar_str = statusbar ? 'yes' : 'no';
  scrollbar_str = scrollbar ? 'yes' : 'no';
  resizable_str = resizable ? 'yes' : 'no';
  window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar='+toolbar_str+',menubar='+menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str+',resizable='+resizable_str);
}

//-->
</script>
<!-- 위 소스는 새창을 열때 환경 설정 부분입니다. 수정 하실 수 있는 분들은 고쳐서 쓰시구요.
     그렇지 못한 분들은 그냥 쓰시기를 바랍니다. -->


</head>

<body bgcolor='#CCCCCC' text='black' link='blue' vlink='purple' alink='red'>


<table border=1 cellpadding=0 cellspacing=0 width=650 bordercolor=teal align=center OnMouseOver="this.style.cursor='hand'; this.style.backgroundColor='orange';"
      Onmouseout = "this.style.backgroundColor='#FFFFFF';"
      OnClick="Tagpia_open_window('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1);" bgcolor="#FFFFFF">
    <tr>
      <td align=center  height=22 align=center width="303">
       
           
            <p align="center"><font color=teal size="2">여기에는 글 내용을 적습니다.</font>
        </td>
        <td width="341">
           
            <p align="center"><font size="2" color="fuchsia">이 태그는 테이블 자체에 링크를 시킨것입니다.</font>
        </td>
    </tr>
    <tr>
        <td width="646" colspan="2">
           
            <p align="center"><font size="2" color="blue">테이블의 아무 곳이나 클릭해보세요. 그럼 연결된 url로 이동 됩니다.</font>
        </td>
    </tr>
</table>

<!--
     위의 태그 중 ('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1) 이 부분은 수정해서 사용하세요.
     새 창으로 띄울 경우는 newtable은 새창의 이름이기 때문에 여러분의 홈을 프레임 나눴다면 프레임 명이 아닌 적당한 이름을
     지정해주시구요. 프레임 안에 띄울려면 프레임명을 쓰면 됩니다. 그리구 뒤의 숫자는 대충 아시겠죠. 이것은 프레임 안에
     새창이 열리게 할 경우는 필요 없는 부분이구요. 새창으로 띄울 경우는 상단의 스크립트 부분을 보시면 순서대로 이니까
     수정하시면 됩니다. url 다음의 0,0,은 좌표 값입니다. 좌측에서 0px, top에서 0px에 띄워지겠죠. 그리구 뒤의 900, 600는
     새창의 가로/세로 크기 지정이구요. 다음의 숫자들은 절대 값인 0과 1을 갖습니다. 0은 yes 1은 no입니다. 0, 1, 0, 1, 1를
     순서대로 위 스크립트를 보시면 알겠지만 첫번째가 툴바, 두번째가 메뉴바..... 이런식으로 됩니다. 이걸 0과 1로 설정을
     해주시면 됩니다. (새창 띄우기의 방법을 자세히 배우고 싶으신 분은 좌측의 소스천국>강좌&팁란에 가보세요.
   

     OnMouseOver="this.style.cursor='hand'; this.style.backgroundColor='orange';"
     Onmouseout = "this.style.backgroundColor='#FFFFFF';"
     OnClick="Tagpia_open_window('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1);"
     이 부분은 현재 table 전체에 넣어줬죠. 각 셀에 따로 링크를 거실려면 tr에 넣으셔두 되구 td에 넣어두 됩니다.
     tr에 넣으면 그 줄의 셀 전체에 링크가 걸리구 td에 넣으면 당연히 한 칸에만 링크가 걸리겠죠.
 -->

</body>
</html>

Posted by 알 수 없는 사용자
,




<table bgcolor=원하시는 색깔  style='filter: Alpha(Opacity=70)'>

Opacity=70 에서 숫자만 바꾸시면 정말 이쁩니다... 숫자가 높을수록 불투명해져여..











Posted by 알 수 없는 사용자
,
Html 문서의 시작 부분에 넣으세요.

무댜게 간단합니다.

<HTML dir=rtl>

위 태그를 사용시 문서가 거울을 보는 것처럼 뒤집히죠.

아래 처럼 하시면 스크롤바만 왼쪽에 위치합니다.

<html dir="rtl">
<head>
<title>Test</title></head>
<body>
<div dir="ltr">
스크롤바가 왼쪽에 있지요?
여기에 내용을 쓰세요.
</div>
</body>
</html>

Posted by 알 수 없는 사용자
,

홈페이지를 자주 업데이트하다 보면 페이지가 수정된 날짜를
수시로 바꾸어야 하는 번거로움이 있을 수 있습니다.
이때 유용한 방법으로 다음의 태그를 원하는 곳에 삽입만
하면 나중에 이 문장이 삽입된 문서가 업데이트 되었다면
자동으로 업데이트한 수정된 시간을 명시하여 줍니다.


<script>
<!--
document.write("Last Modified: "+document.lastModified+"")
//-->
</script>


위의 내용중 document.write("")안의 내용을 바꾸셔도 됩니다.
예를 들어 Last Modified 를 최종수정날짜 라고 바꾸면 출력에
최종수정날짜 : ... 라고 나타납니다.

Posted by 알 수 없는 사용자
,

Textarea란?

인터넷관련 2008. 1. 18. 14:07
Textarea가 뭔지 모르시는 분들을 위해서 올립니다.
Textarea란 Html 문서 안에 태그를 사용하지 안구 예를 들면 저 같이
예제와 소스를 설명할 때 한 문서에서 Textarea 안의 내용은 텍스트 형식으로
출력을 시키는 것을 말합니다. 즉, 특수문자를 사용하지 안고도 태그를 안 먹히게
하는 방법이고, 소스 양이 만을 경우 이 안에 집어 넣습니다.
아래 예제를 보시면 이해가 빠를 것 입니다.

이건 그냥 태그를 쓴 거구요.

여기는 기냥 태그를 써서 글자에 컬러와
사이즈를 지정을 했습니다.
흠 뭘 쓰징.
별루 할말이 없당.
에고....^^;;



요건 Textarea 안에 태그를 쓴 것입니다.



-----------------------------------
여기서 부터는 Textarea의 소스입니다.
<textarea name="textfield" cols="20" rows="10">
<font color=red size=2>여기는 기냥 태그를 써서 글자에 컬러와

사이즈를 지정을 했습니다.

흠 뭘 쓰징.

별루 할말이 없당.

에고....^^;;</font>

</textarea>
-----------------------------------
cols는 가로 크기 이구요.
rows는 세로 크기 입니다.

주의 : Textarea 태그를 쓰실 경우 중요한 부분입니다.
꼭!!! 태그 명령어를 끝내는 </textarea>를 써줘야 됩니다.
이걸 쓰지 안으면 밑으로 다 태그가 먹지 안습니다.
일반 문서에 작성 하실 때는 괜찮지만(수정이 가능) 이런 게시판에 쓸 경우
수정하는 메뉴가 위에 있는 경우는 괜찮습니다. 하지만 슈퍼 보드 게시판 같은 무료 게시판인 경우
수정 메뉴가 글 작성후 출력하는 화면 아래에 나오기 때문에 이걸 써주지 안으면
절대 수정을 할 수가 없습니다. 왜냐면 모두 텍스트 형식으로 출력이 되기 때문에...
그리구 한 번 작성하고 다시 수정을 할 경우 첨 끝내기 </textarea>이게 사라져
버립니다. 이유는 잘 모르겠구요. 수정을 할 때는 다시 이걸 써주어야 됩니다.
꼭 기억하세요. 제가 요거 때문에 실수를 만이 한게 있죠. 소스 올려 놓은거 중에
출력 화면의 하단이 사라져 버린게 몇 개 있는데 수정 하다가 요걸 안써줘서 그런 겁니다...^^;;
Posted by 알 수 없는 사용자
,


http://oxtag.com/html/ex/clarity_table.html


 

배경이 비치는
반투명 테이블

 

 

뒷 부분의      
배경 이미지가
 연하게 비치죠?


배경그림이 테이블위로 비치는 반투명 테이블입니다.
은은한 분위기를 내고자 할 때 사용하면 좋겠죠.
일단 배경그림이 있는 전체문서에서 문서의 알맞은 곳에 위의 소스를 적용
시켜서 만들어도 이쁘구요. 혹은 위에서 보는 것처럼 일단 나모에서 표만들기
로 표를 한 개나 두 개정도 만든다음 각 '셀속성'으로 들어가서 배경삽입하는
곳에 바탕으로 깔고 싶은 배경이나 또는 이쁜 이미지를 삽입한 후 다시 그
테이블 안에 마우스 커서를 두고 위치를 표시해둔뒤,나모의 html 상태로 들어
가서 표시된 그 부분에 위의 테이블소스를 삽입해주시면 됩니다.

위의 소스도 각자 나름대로 변화시켜 적용해보세요.

색상도 바꾸고 테이블사이즈(
width="150" height="120")와 글씨모양(size="2"
face="돋움")
도 바꾸어보세요.
'
Opacity=60'  라고 되어있는부분에서는 수치를 늘일수록 더 연해집니다.
또, border:1 solid 라고 되어있는 부분에서 'solid' 대신에 'dotted'를 넣으면
점선테두리가 생깁니다.  

나름대로 더이쁘게 변화시켜보세요.
   

아래 소스를 보시고 수정해 보세요.

<table border="0">
    <tr>
        <td width="187" height="132" background="../img/rose.gif">
            <p align="center">&nbsp;<table  width="120" height="70" style='background-color:#FFFFFF; filter: Alpha(Opacity=60);'>
  <tr>
                    <td><p align="center"><font color="red" size="2" face="돋움">배경이 비치는<br>반투명 테이블</font>
  </td></tr>
</table>        </td>
        <td width="26" height="132">
            <p>&nbsp;</p>
        </td>
        <td width="187" height="132" background="../img/train.gif">
            <p align="center">&nbsp;<table  width="120" height="70" style='background-color:#FFFFFF; border:1 dotted #63BEFC; filter: Alpha(Opacity=50);'>
  <tr><td width="206"><p align="center"><font color="#572EFD" size="2" face="돋움">뒷
                                    부분의 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>배경
                                    이미지가<br>&nbsp;연하게 비치죠?</font>
  </td></tr>
</table>        </td>
    </tr>
</table>


 
Posted by 알 수 없는 사용자
,

제 홈에서 찾아 보시면 이거 말구두 자바 스크립트를 이용해서 배경음악을
랜덤으로 듣는 방법이 있구요. 다른 방법은 아래 처럼 간단하게 cd나 테이프 처럼
들을 수 있습니다. 어케 하나면 그대루 따라하세요.
일단 배경음악으루 넣고 싶은 음악 파일 주소를 메모장에 아래처럼 넣으세요.
(스트리밍 서버에서 배경음악 찾기는 아래 게시판을 찾아보면 나와있습니다.)

mmst://hotvod.sbs.co.kr/music/ko/f7327.asf
mmst://hotvod.sbs.co.kr/music/ko/f7398.asf
mmst://hotvod.sbs.co.kr/music/ko/f7407.asf
mmst://hotvod.sbs.co.kr/music/ko/f7408.asf
mmst://hotvod.sbs.co.kr/music/ko/f7402.asf
mmst://hotvod.sbs.co.kr/music/ko/f7405.asf
mmst://hotvod.sbs.co.kr/music/ko/f7250.asf

위 소스를 메모장에 복사해서 넣으시거나 여러분이 찾아서 넣으신후
이름을 아무거나 알아볼 수 있게 정해서 확장자를 asx로 저장하세요.
예를 들면 이름을 music라고 정하면 music.asx하고 엔터하면 되겠죠.
그런 후 이걸 웹상에 업로드 시킵니다. 그 다음은 embed태그를 사용해야겠죠.
<embed src="업로드 시킨 주소/music.asx" autostart=true hidden=true>
위 태그 처럼 하신후 웹 페이지에 삽입하시면 됩니다. embed 속성은 왼쪽
HTML의 음악태그를 참조하세요. autostart는 로딩 되자마자 바로 시작할 것인지
아닌지를 결정하구요. hidden은 음악 조절판을 보일 것인가 말것인가를 설정합니다.

'인터넷관련' 카테고리의 다른 글

스크롤바를 좌측으로 꾸미기  (0) 2008.01.18
문서의 수정된 날짜 자동으로 표시하기  (0) 2008.01.18
Textarea란?  (0) 2008.01.18
반 투명 테이블(은은한 분위기)  (0) 2008.01.18
글씨 한 줄로 흩날리기 - 마퀴, marquee  (0) 2008.01.18
마퀴태그 응용  (0) 2008.01.18
이쁜거  (0) 2008.01.18
마퀴 태그를 이용한 공지 소스  (0) 2008.01.18
Posted by 알 수 없는 사용자
,


☆하이 ★하이 ☆하이 ★하이 ☆ 하이★하이 ☆하이 ★하이 ☆하이 ★하이 ☆ 하이

조금만 기다려 보세요. 응용만 잘 하면 멋지게 사용할 수 있습니다.
꽤 쓸만한데요. 홈피나 까페 꾸미실때 응용하면 아주 멋진 홈이 되지안을까....

소스 : <MARQUEE DIRECTION=RIGHT>☆하이 <MARQUEE DIRECTION=RIGHT>★하이 <MARQUEE DIRECTION=RIGHT>☆하이 <MARQUEE DIRECTION=RIGHT>★하이 <MARQUEE DIRECTION=RIGHT>☆ 하이★하이 <MARQUEE DIRECTION=RIGHT>☆하이 <MARQUEE DIRECTION=RIGHT>★하이 <MARQUEE DIRECTION=RIGHT>☆하이 <MARQUEE DIRECTION=RIGHT>★하이 <MARQUEE DIRECTION=RIGHT>☆ 하이 </MARQUEE> </MARQUEE></MARQUEE></MARQUEE> </MARQUEE></MARQUEE></MARQUEE> </MARQUEE></MARQUEE></MARQUEE>


Posted by 알 수 없는 사용자
,

  ☆★☆~소스천국~★☆★
▶▷▶태그피아~~^^*◁◀◁


<font size=7 face=굴림체 color=blue><marquee direction=right>☆★☆~소스천국~★☆★
<font color=ff00ff size=2 face=굴림체><marquee direction=left>▶▷▶태그피아~~^^*◁◀◁
</marquee></font></marquee></font>

Posted by 알 수 없는 사용자
,

이쁜거

인터넷관련 2008. 1. 18. 14:07


바탕화면이 흰색일 경우 무지 이쁩니다.


            。°♥·˚· . ·.˚ . . . * ♡ . o . °· ° . o . °. ☆ .  . *♡ . o . °. *

         ♡ ′′ ° ♡ o . ♡ . o . °. *

       ☆′♡

      ♥′
    | |
◑┻┻━━━━┑┍━━━━┑┍━━━━┑ ☆
ㅐ▣▣▨▨▨▨││▣▣▣▣││▣▣▣▣│ ∞
 ★///≒●≒●≒●≒●≒●≒≒●≒≒●≒≒●






소스 :<marquee>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br /> <font color="maroon">。&deg;♥&middot;˚&middot; . &middot;.˚ . . . * ♡ . o . &deg;&middot; &deg; . o . &deg;. ☆ . &nbsp;. *♡ . o . &deg;. *<br /></font><br /> &nbsp; &nbsp; &nbsp; &nbsp; <font color="blue"><br /> ♡ ′′ &deg; ♡ o . ♡ . o . &deg;. * <br /><br /> </font><br /> &nbsp; &nbsp; &nbsp; <font color="fuchsia">☆′♡ <br /><br /> </font><br /> &nbsp; &nbsp; &nbsp;<font color="#993333">♥′</font> <br /><br /> &nbsp; &nbsp;<FONT color=#00bfff>| |</FONT> <br /><br /> <FONT color=orange>◑┻┻━━━━┑┍━━━━┑┍━━━━┑ ☆ </FONT><br /><br /> <FONT color=skyblue>ㅐ▣▣▨▨▨▨││▣▣▣▣││▣▣▣▣│ ∞ </FONT><br /><br /> <FONT color=pink>&nbsp;★///≒●≒●≒●≒●≒●≒≒●≒≒●≒≒● </FONT></marquee><br /> <hr color=brown>





♡♡♡♡..안녕..♡♡♡♡
♡ ┏━┓┏━┓┏━┓.♡
♡.┃▒┗┛▒┃┃▒┃.♡
♡.┃▒┏┓▒┃┃▒┃.♡
♡.┗━┛┗━┛┗━┛.♡
♡♡♡♡..안녕..♡♡♡♡





소스 :<marquee>♡♡♡♡..안녕..♡♡♡♡<br /><br /> ♡ ┏━┓┏━┓┏━┓.♡<br />♡.┃▒┗┛▒┃┃▒┃.♡<br /><br /> ♡.┃▒┏┓▒┃┃▒┃.♡<br />♡.┗━┛┗━┛┗━┛.♡<br /><br /> ♡♡♡♡..안녕..♡♡♡♡</marquee>

Posted by 알 수 없는 사용자
,

공지로 이용하셔두 되구 다른거루 꾸며두 멋지겠죠.
테이블 컬러나 테두리 컬러도 잘 응용해 보세요. 테두리를 없애두 되구...
테이블 태그를 모르신다면 왼쪽 HTML 강좌에 테이블 태그를 참조하시구요.
자 소스 나갑니다.



★ 이걸 이용해두 멋진 홈을 꾸밀 수 있겠는데요. ★




<table align=center border="1" cellpadding="3" cellspacing="0" width="500" bgcolor="white"> <tr><td bgcolor=white><p> <marquee behavior=alternate><font size="2" color="navy"> <b>★ 이걸 이용해두 멋진 홈을 꾸밀 수 있겠는데요. ★</marquee></b></font></p> </td></tr></table>

Posted by 알 수 없는 사용자
,


<object type="text/x-scriptlet" width=100% height="800" data="http://hacoo.tistory.com">

위 태그를 복사하셔서 태그 연습장에 넣어 보세요.

iframe과 같은 효과를 같죠....^^

수정할 부분은 가로 세로 크기와 URL만 하시면 되겠죠.

'인터넷관련' 카테고리의 다른 글

글씨 한 줄로 흩날리기 - 마퀴, marquee  (0) 2008.01.18
마퀴태그 응용  (0) 2008.01.18
이쁜거  (0) 2008.01.18
마퀴 태그를 이용한 공지 소스  (0) 2008.01.18
칼라테이블  (0) 2008.01.18
테이블 공지 멈춤 / 시작 기능  (0) 2008.01.18
fieldset로 테이블 만들기  (0) 2008.01.18
각종 커서 모양  (0) 2008.01.18
Posted by 알 수 없는 사용자
,

칼라테이블

인터넷관련 2008. 1. 18. 14:06
게시판이 테이블 태그를 소화하지 못하는것 같네요.
아래는 너무 크게 나왔죠. 소스복사해서 태그연습장에서 실행해보세요.



-칼라테이블-핑크버전-



♡소스천국 태그피아는 카멜롯의 홈♡
♡태그피아 소스는 무한 공유♡


 




-칼라테이블-그린버전-


♡가시기전엔 꼬옥 방명록에♡

♡도장 꾸욱 찍는거 아시지여♡





-칼라테이블-레드버전-


♡태그피아 홈에는 초보자를 위한♡
♡기초태그 강좌를 수록했습니당♡





-칼라테이블-블루버전-


♡카멜롯의 태그피아♡
♡태그고수는 사절입니다..헤♡






-칼라테이블-오렌지버전-


♡즐겨찾기에 추가해 놓으세욤♡

♡구럼 온제든징 필요할때 오실 수 있져♡





<table align="center" border="1" cellspacing="0" width="292" height="0" bordercolordark="white" bordercolorlight="#FF99CC">
<tr> <td width="286" bgcolor="#FF99CC" bordercolor="#FF99CC"><p align="center"><span style="font-size:10pt;">
<font color="white">-칼라테이블-핑크버전-</font></span></p> </td> </tr> <tr> <td width="286"> <p align="center">
<font color="#FF99CC"><span style="font-size:10pt;"> </span></font></p> <p align="center"><font color="#FF99CC">
<span style="font-size:10pt;">♡소스천국 태그피아는 카멜롯의 홈♡<br>♡태그피아 소스는 무한 공유♡</span></font></p>
<p align="center"><font color="#FF99CC"><span style="font-size:10pt;"> </span></font></p> </td> </tr> </table>  
<Br>
<table align="center" border="1" cellspacing="0" width="292" bordercolordark="white" bordercolorlight="green">
<tr> <td width="533" bgcolor="green"> <p align="center"><font color="white"><span style="font-size:10pt;">
-칼라테이블-그린버전-</span></font></p> </td> </tr> <tr> <td width="533"> <p align="center"><span style="font-size:10pt;">
</span></p> <p align="center"><span style="font-size:10pt;"><font color="green">♡가시기전엔 꼬옥 방명록에♡<br>
♡도장 꾸욱 찍는거 아시지여♡</font></span></p> <p> </p> </td> </tr> </table>
<Br>
<table align="center" border="1" cellspacing="0" width="292" bordercolordark="white" bordercolorlight="red"> <tr>
<td width="964" bgcolor="red"> <p align="center"><font color="white"><span style="font-size:10pt;">-칼라테이블-레드버전-
</span></font></p> </td> </tr> <tr> <td width="964"> <p><span style="font-size:10pt;"> </span></p> <p align="center">
<span style="font-size:10pt;"><font color="red">♡태그피아 홈에는 초보자를 위한♡<br>♡기초태그 강좌를 수록했습니당♡</font>
</span></p> <p> </p> </td> </tr> </table>
<Br>
<table align="center" border="1" cellspacing="0" width="292" bordercolordark="white" bordercolorlight="blue"> <tr>
<td width="964" bgcolor="blue"> <p align="center"><font color="white"><span style="font-size:10pt;">-칼라테이블-블루버전-
</span></font></p> </td> </tr> <tr> <td width="964"> <p><span style="font-size:10pt;"> </span></p> <p align="center">
<font color="blue"><span style="font-size:10pt;">♡카멜롯의 태그피아♡<br>♡태그고수는 사절입니다..헤♡</span></font></p>
<p align="center"><font color="blue"><span style="font-size:10pt;"> </span></font></p> </td> </tr> </table>
<Br>
<table align="center" border="1" cellspacing="0" width="292" bordercolordark="white" bordercolorlight="#FF9933"> <tr>
<td width="964" bgcolor="#FF9933"> <p align="center"><font color="white"><span style="font-size:10pt;">-칼라테이블-오렌지버전-
</span></font></p> </td> </tr> <tr> <td width="964"> <p align="center"><font color="#FF9933"><span style="font-size:10pt;">
</span></font></p> <p align="center"><font color="#FF9933"><span style="font-size:10pt;">♡즐겨찾기에 추가해 놓으세욤♡
<br>♡구럼 온제든징 필요할때 오실 수 있져♡</span></font></p> <p align="center"><font color="#FF9933">
<span style="font-size:10pt;"> </span></font></p> </td> </tr> </table>

'인터넷관련' 카테고리의 다른 글

마퀴태그 응용  (0) 2008.01.18
이쁜거  (0) 2008.01.18
마퀴 태그를 이용한 공지 소스  (0) 2008.01.18
페이지 링크걸때 iframe이 아닌 다른 방법!!!  (0) 2008.01.18
테이블 공지 멈춤 / 시작 기능  (0) 2008.01.18
fieldset로 테이블 만들기  (0) 2008.01.18
각종 커서 모양  (0) 2008.01.18
클릭하면 커지는 이미지  (0) 2008.01.18
Posted by 알 수 없는 사용자
,







날이 쌀쌀해졌죠.



감기 져쉼 하시구요



새해 복 만이 받으세요.



그럼....^^



바바이









◇시작◇ | ◇멈춰◇



<table><tr><td align=center>
<marquee id="scroller" direction=up scrollamount=4 width=200 height=200 style="background color:#FFFFFF;border:3px solid #FFE5E5">
<br>
<center><font color="red">
<br>
날이 쌀쌀해졌죠.<br>
<br>
감기 져쉼 하시구요<br>
<br>
새해 복 만이 받으세요.<br>
<br>
그럼....^^<br>
<br>
바바이</font>
<br>
</center>
<br>
</marquee>
<br>
<a href="javascript:scroller.start()" onfocus=this.blur()>◇시작◇</a> | <a href="javascript:scroller.stop()" onfocus=this.blur()>◇멈춰◇</a>
</td></tr></table>

'인터넷관련' 카테고리의 다른 글

이쁜거  (0) 2008.01.18
마퀴 태그를 이용한 공지 소스  (0) 2008.01.18
페이지 링크걸때 iframe이 아닌 다른 방법!!!  (0) 2008.01.18
칼라테이블  (0) 2008.01.18
fieldset로 테이블 만들기  (0) 2008.01.18
각종 커서 모양  (0) 2008.01.18
클릭하면 커지는 이미지  (0) 2008.01.18
배경이미지 고정시키기  (0) 2008.01.18
Posted by 알 수 없는 사용자
,
textarea의 테이블 형식은 태그가 먹지 안는다는 것은 아시죠.
혹시 textarea가 머지 하시는 분들은 제가 올린 소스 중에 양이 만은 것들은
박스 비스무리 하게 생겨가지구 스크롤바가 있는 박스 보셨죠. 이게
태그가 먹히지 안게 textarea를 쓴겁니다.
하지만 아래 fieldset는 태그가 당연히 먹힙니다.

여기는
제목


테이블이 아닌 fieldset으로 box 만들기

오늘은 4월1일 엘리옷이 잔인하다고
이름지은 달이다.
정말 그럴까?  붉은 목련이 우아하게 피고, 물오른 꽃가지가
이제 막 봉우리를 터트릴려는데...

<body>와</body>사이에 넣습니다.
border:1 는 박스 테두리 굵기,navy 는 박스 테두리색,
width:400; height:350; padding:15 는 가로, 세로, 박스 내부 여백이죠...


<fieldset style="border:1
solid navy; background-image: url(이미지 경로); background-repeat: no-repeat;
background-position: right bottom; width:400; height:350;
padding:15"><legend align="center">여기는 제목</legend>요기는
내용</fieldset>



Posted by 알 수 없는 사용자
,