마우스 대면 미리보기(툴팁)
[13] 툴 팁에 대하여 툴팁은 다른 말로 "도구설명"이라고도 합니다. 익스플로러나 워드프로세서 등의 프로그램들을 보면 도구단추들이 있는데, 이러한 도구단추들 위로 마우스를 가져가면 멈춤, 새로고침, 시작, 검색 등의 글자가 나타나 도구단추의 용도를 가르쳐줍니다. 툴팁은 바로 이러한 것을 말합니다. 다른 말로는 "풍선도움말"이라고도 하지요. 웹페이지에서의 툴팁은 주로 링크가 되어있는 텍스트나 이미지위에 마우스가 위치 할 때 링크되어 있는 페이지에 대한 정보를 제공해주는 것이 대부분입니다. 가장 간단한 방법 ▒ 이미지에 설명글 달기. <img src="그림주소" alt="설명글"> [ 사용 예시 ] 결과보기 ▒ 링크에 설명글 달기. <a href="링크주소" title="설명글"> 이미지에 설명글을 넣을때는 title을 사용합니다. title 뒤에 설명글을 넣어주면 링크에 마우스 오버 1~2초후에 설명글이 보입니다. [ 사용 예시 ] 결과보기 ▒ 텍스트(일반글)에 설명글 달기. <font size="2" title="설명글"> [ 사용 예시 ] 결과보기 ▒ Text Box에 설명글 달기. <input type="text" value="텍스트 박스글" title="설명글"> [ 사용 예시 ] 결과보기 ▒ Button에 설명글 달기. <input type="button" value="텍스트 박스글" title="설명글"> [ 사용 예시 ] 결과보기 2. 툴 팁 줄 바꾸기. alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용 할 수 없습니다. [ 사용 예시 1 ] 결과보기 [ 사용 예시 2 ] 결과보기 이상과 같이 모든 툴팁에 줄바꿈 하실때 를 넣어주면 줄바꿈이 됩니다. 3. 스타일 시트를 이용하는법. 스타일 속성 중 visibility를 이용해 보겠습니다. <style type="text/css">: 이 부분은 스타일시트를 이용해서 visibility의 초기값을 hidden으로 설정하고 있습니다. 스타일시트를 정의 할 때 visibility외에 앞에서 레이어를 만들면서 배운 position, top, left, width, height 등의 속성을 이용하면 툴팁이 나타나는 위치를 바꿀 수 있습니다. 다음은 링크를 만드는 <a> 태그 부분입니다. <a href="javascript:alert('툴팁 샘플입니다.');" 링크 하실 때는 javascript:alert('툴팁 샘플입니다.');대신 링크 주소를 넣어 주시면 됩니다. [ 사용 예시 ] 결과 보기> 자바 스크립트 소스를 분석 하기란 상당히 어렵습니다. 자바를 전문적으로 공부한 프로그래메가 아니면 자바소스를 만들지 못합니다. 우리는 그저 프로그래머가 만들어 놓은 자바 소스를 이용만 할수 있을 뿐입니다. 툴팁을 만들기 위해서 우선, 기본적으로 <body>와 </body> 사이에 아래 있는 div레이어와 JavaScript소스를 넣어야 합니다. <div style="position:absolute;z-index:1;visibility:hide" id="overDiv"></div> ▒ 고급 방법 <a href="링크주소" target=자신의 타겟트 설정 이렇게 넣어 주시면 됩니다. ① 평범한 툴팁. 위에 있는 소스 넣기를 마친 후, <a href="http://asanak.com.ne.kr/index.html" target=_blank 결과 보기 ; (아래의 글에 마우스를 가져가 보세요) ② 툴팁 흐르는글. 이번에는 marquee를 이용하여 둘팁의 글이 움직이게 만들어 봅시다. 결과 보기 (아래의 글에 마우스를 가져가 보세요) ③ 툴팁에 바탕색 넣기. 툴팁글에 바탕색도 넣어보죠. 결과 보기 (아래의 글에 마우스를 가져가 보세요) ④ 툴팁에 테두리 넣기. 툴팁글에 바탕색과 테두리도 넣어보죠. 결과 보기 (아래의 글에 마우스를 가져가 보세요) ⑤ 툴팁에 테두리, 그리고 상단과 하단의 바탕색이 다르게 넣기. 위에 있는 소스 넣기를 마친 후, 결과 보기 (아래의 글에 마우스를 가져가 보세요) 5. 간단하면서도 모든것을 표현 할 수도 있고 위치도 마음대로 먼저 아래의 소스를 <head>와</head> 사이에 넣으세요. <STYLE TYPE=text/css> .over {color:#1111cc; font-weight:bold; font-size:12px; text-decoration:none} .out {color:#DCDCDC; font-size:12px; text-decoration:none} </STYLE> .over는 마우스가 글에 올라갔을때 color:#1111cc 글색 font-weight:bold 글을 굵게 font-size:12pt 글자의 크기 text-decoration:none 링크의 밑줄을 삭제 하라는것이고. .out 은 마우스를 때었을때 color:#DCDCDC 글색 font-size:12pt 글자의 크기 text-decoration:none 링크의 밑줄을 삭제 하라는것 입니다. 이 부분을 홈에 맞게끔 수정해 주세요. 메모장에 작성하면 아래와 같이 됩니다. <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak1.innerHTML='<B>Go!!</B><br> asanak.com.';" onMouseOut="this.className='out'; asanak1.innerHTML='';">아름다운글 올리는 방법</a> <head>와</head>의 소스를 넣은후 <body>와 </body> 사이의 원하는 위치에 위의 1. 일반적인 툴팁. 소스를 넣습니다.
<head> <META HTTP-EQUIV="Content-Type" content="text/html; charset=EUC-KR"> <title>-툴팁-</title> <STYLE TYPE=text/css> .over {color:#FFFFCC; font-weight:bold; font-size:12px; text-decoration:none} .out {color:#DCDCDC; font-size:12px; text-decoration:none} </STYLE> </head> <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#000000"> <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak1.innerHTML='<B>Go!!v/B><br> asanak.com.';" onMouseOut="this.className='out'; asanak1.innerHTML='';">아름다운글 올리는 방법</a> <div id='asanak1' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요)
2. 툴팁 흐르는글. 이번에는 marquee를 이용하여 둘팁의 글이 움직이게 만들어 봅시다. 위에 있는 소스 넣기를 마친 후, <body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다. <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak2.innerHTML='<marquee width=200>Go!! asanak.com.</marquee>';" onMouseOut="this.className='out'; asanak2.innerHTML='';">아름다운글 올리는 방법</a> <div id='asanak2' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요) 아름다운글 올리는 방법 3. 툴팁에 바탕색 넣기. 툴팁글에 바탕색도 넣어보죠. p style=background-color:원하는 색상코드; 를 넣어 주시면 됩니다. 위에 있는 소스 넣기를 마친 후, <body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다. <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak3.innerHTML='<p style=background-color:708090;>Go!! asanak.com.</p>';" onMouseOut="this.className='out'; asanak3.innerHTML='';">아름다운글 올리는 방법</a> <div id='asanak3' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요)
4. 툴팁에 테두리 넣기. 툴팁글에 바탕색과 테두리도 넣어보죠. 일반 테이블 작성법과 같습니다. <body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다. 수정법 폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다 <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak4.innerHTML='<table border=1 cellspacing=0 cellpadding=3 width=250bordercolor=#74a6ab bgcolor=#444444><tr><td><font color=orange size=3><center>Go!!<br> asanak.com.</center></font></td></tr></table>';" onMouseOut="this.className='out'; asanak4.innerHTML='';">아름다운글 올리는 방법</a> <div id='asanak4' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요)
5. 툴팁에 테두리, 그리고 상단과 하단의 바탕색이 다르게 넣기. 위에 있는 소스 넣기를 마친 후, <body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다. 수정법 폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다 <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak5.innerHTML='<table border=1 cellspacing=0 cellpadding=3 width=200 bordercolor=#74a6ab bgcolor=#444444><tr><td align=center><font color=orange size=3>Go!!</font></td></tr><tr><td bgcolor=#666666 align=center><font color=#ffffee> asanak.com.</font></td></tr></table>';" onMouseOut="this.className='out'; asanak5.innerHTML='';">아름다운글 올리는 방법</a> <div id='asanak5' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요)
6. 이미지 넣기. 5번은 중앙에 선이 있습니다. 이 선을 삭제하고 이미지도 넣어서 풍선 도움말을 만들어 보죠. <a href="http://asanak.com" target="_blank" onfocus="this.blur()" onMouseOver="this.className='over'; asanak6.innerHTML='<table border=1 cellspacing=0 cellpadding=3 width=180 bordercolor=#74a6ab bgcolor=#000000><tr><td align=center><table border=0 cellspacing=0 cellpadding=3 width=180><tr><td align=center bgcolor=#666666><font color=orange size=3>Go!!</font></td></tr><tr><td width=180 height=52 align=center><img src=rose.gif width=52 height=52 align=left><font color=#ffffee><br> asanak.com.</font></td></tr></table></td></tr></table>';" onMouseOut="this.className='out'; asanak6.innerHTML='';"> <img src=rose.gif border=0> 아름다운글 올리는 방법 </a> <div id='asanak6' style="margin-left:150;"> </div> 결과 보기 (아래의 글에 마우스를 가져가 보세요)
[14] <input>, <form> - 버턴 만들기 1. 간단한 버튼 만들기 아래 소스에 주소와 버튼에 들어갈 이름만 고쳐 쓰면 된다. (버튼응용에서 연결까지) 2. 토글 버턴 만들기 토글버턴이란 하나의 버턴으로 두가지의 기능을 수행 하는 것입니다. ▒ 토글버턴 1 토글버턴 1은 자바스크립트 없이 가장 간단하게 만들 수 있는 것입니다만 단점은 한 번 밖에 사용 할 수 없다는 것 입니다. 예제보기: 아래 보이기를 클릭해 보세요. ♣ 보이기 ♣ 숨기기 안녕 하세요?
토글버턴 예제 1번 입니다. 아래 소스를 복사해 사용 하세요
글자의 색상은 #HideText 의 color:#40FFC0; 와 #ShowText의 color:#FFF982;를 수정하면 됩니다. 3. Form에 대한 개요 여기서는 간단히 Form이란 무엇인가에 대해 생각해 보도록 합니다. 그럼 CGI에 대해 간단히 알아볼까요? CGI는 Common Gateway Interface의 약자입니다. Common은 공통의, 공용의.. 이런 뜻을 갖고 있고, Gateway란 문, 출입구, 통로 그리고 interface는 경계면, 접점, 공유영역이란 뜻을 갖고 있습니다. CGI는 C, C++ 같은 컴파일 언어로 만들 수 있구요, Perl 같이 컴파일 과정 없이 사용되는 인터프리터 언어로 만들 수도 있어요. 단지 C, C++, Perl 등 만으로 가능한 것은 아니구요. 대부분의 언어로 구현이 가능합니다. 여기 하고 있는 프로젝트는 코볼로 했구요. 쉽게 접할 수 있는 CGI 프로그램은 방명록이나 게시판, 카운터, 순위 사이트 등이 있어요. 접해보신 분들이 계실테지만 게시판 중 Korea Famous CGI Server에서 제공하는 크레이지 보드는 C로 짠 게시판이고 Way-Board는 Perl로 되어있어요. 1) Form Tag
2) Form의 종류
3) 텍스트(text)
사용은 Form Tag와 함께 사용해야 합니다.
모양은 텍스트 입력과 같습니다. 아래의 소스와 형식을 참조하세요. <FORM> 4) 비밀번호
사용법은 text input과 동일합니다. 단지 차이가 있다면 type을 password로 주었다는 것입니다. 여러분 어느 사이트에 회원으로 가입하고 로그온 할 경우 아이디와 비밀번호 넣지요? 그리고 비밀번호에 키보드로 비밀번호를 입력하면 "*******" 와 같은 형태로 나타나죠? 이게 바로 password input을 사용한 것입니다. <FORM action="mail.cgi" method="post"><font size="2"> 사용된 항목은 위에서 설명한 것 처럼 text input과 동일합니다. 위에 아이디와 비밀번호를 적어보세요. 아이디는 입력한 문자가 나타나는데 비밀번호에는 "******"라고 적힐 겁니다. 5) Submit
입력창 (text input과 password input 등)에 입력된 값을 서버로 전송하기 위한 버튼의 형태입니다. value 값을 지정하지 않으면 아마 버튼 Label이 "쿼리 전송" 이라고 나타날 겁니다. Form에 입력된 내용을 보낸다는 뜻으로 이해 하세요. 검색엔진이나 어느 사이트에 가입할 경우 "가입" 이나 "Search" 라는 버튼을 클릭하죠? 다음과 같이 하면 그렇게 나타납니다. <INPUT type="submit" value="확인"> 또는 <INPUT type="submit" value="Search">
Form에 입력된 내용을 Clear할 경우에 사용하는 버튼의 형태입니다. 방명록이나 가입양식에서 입력된 내용을 Clear 하고자 할 경우 입력항목이 많은데 일일이 지우면 불편하죠? 이 버튼 하나면 한방에 끝납니다. <FORM action="mail.cgi" method="post"> <FORM action="mail.cgi" method="post"><font size="2">
7) 체크 박스(Check Box)
input tag는 변함 없이, 단지 type이 checkbox
<html> 당신이 좋아하는 음식을 모두 선택하세요? 그런데 보니까 위에 보면 체크박스가 7개 있는데, 이름은 딸랑 두 개네요. 체크될 그룹마다 하나의 이름으로 주어야 합니다. 항목에 따라 적당히 이름을 주면 됩니다. 8) 라디오 버튼(Radio Button)
라디오 버튼은 주로 투표할 경우 많이 사용됩니다. 대부분 설명이 체크박스와 비슷합니다.
그럼 위의 예를 라디오 버튼으로 바꿔볼까요? <html> 당신이 좋아하는 음식을 모두 선택하세요? <html> 먹고 싶은 과일을 하나만 선택하세요. <html> 먹고 싶은 과일을 전부 다 선택하세요. |
'공부 > HTML CSS' 카테고리의 다른 글
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0) | 2011.08.19 |
---|---|
html 색상코드 표 (0) | 2011.08.08 |
HTML TABLE 총정리 (0) | 2011.06.13 |
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기
게시판이나 리스트를 보여 줄때 텍스트가 너무 길어지면 보기 흉한 경우가 있다.
이때는 대부분 ASP나 PHP를 이용해서 (스크립트를 이용해서) 잘라주고 끝에 ... 을 부쳐주는 경우가 있다.
게시판이나 메인페이지에서 공지사항을 보여 줄때 두줄이상이면 디자인이 깨져서 보기 흉하다.
이때 사용할 수 있는 것이 다음 방법입니다.
<table width="100%" style="TABLE-layout:fixed">
<tr>
<td style="width:100%;overflow:hidden;text-overflow:ellipsis;"><nobr>긴텍스트</nobr></td>
</tr>
</table>
위처럼 text-overflow 의 ellipsis 를 사용하면 되는데 이는 overflow 와 항상 같이 사용해야 하며 <nobr>을 반드시 사용해야합니다.
table 의 TABLE-layout:fixed 도 반드시 있어야 합니다.
그리고 table과 td도 각각 width를 지정해 주는것이 좋습니다.
단 이 방법은 익스플로어 6+에서만 가능합니다. -_-;
Firefox에서 사용하면 ... 은 나오지 않습니다.
문자열이 길은데 ... 으로 자르지 않고 줄을 넘기려면
<table width="100%">
<tr>
<td style="width:100%;word-break:break-all;">긴텍스트</td>
</tr>
</table>
이것도 익스플로어 6+에서만 가능합니다.
'공부 > HTML CSS' 카테고리의 다른 글
마우스 대면 미리보기(툴팁) (1) | 2011.12.19 |
---|---|
html 색상코드 표 (0) | 2011.08.08 |
HTML TABLE 총정리 (0) | 2011.06.13 |
html 색상코드 표
원하는 색깔을 드래그해서 복사하십시오. | |||||||||
#93DAFF | #98DFFF | #9DE4FF | #A2E9FF | #A7EEFF | #ACF3FF | #B0F7FF | #B4FBFF | #B9FFFF | #C0FFFF |
#87CEFA | #91D8FA | #A5D8FA | #AFDDFA | #B9E2FA | #C3E7FA | #CDECFA | #D7F1FA | #E1F6FA | #EBFBFF |
#00BFFF | #0AC9FF | #14D3FF | #1EDDFF | #28E7FF | #32F1FF | #3CFBFF | #46FFFF | #96FFFF | #C8FFFF |
#00A5FF | #00AFFF | #00B9FF | #00C3FF | #00CDFF | #00D7FF | #00E1FF | #00EBFF | #00F5FF | #00FFFF |
#1EA4FF | #28AEFF | #32B8FF | #3CC2FF | #46CCFF | #50D6FF | #5AE0FF | #6EE0FF | #6EEAFF | #78F3FF |
#1E90FF | #289AFF | #32A4FF | #3CAEFF | #46B8FF | #50C2FF | #5ACCFF | #64D6FF | #6EE0FF | #78EAFF |
#96A5FF | #A0AFFF | #AAB9FF | #B4C3FF | #BECDFF | #C8D7FF | #D2E1FF | #DCEBFF | #E8F5FF | #F4FFFF |
#86A5FF | #90AFFF | #9AB9FF | #A4C3FF | #AECDFF | #B8D7FF | #CCE1FF | #E0EBFF | #EBF5FF | #F9FFFF |
#6495ED | #6E9FED | #78A9ED | #82B3ED | #8CBDED | #96C7ED | #A0D1F7 | #AADBFF | #B4E5FF | #BEEFFF |
#0078FF | #0A82FF | #148CFF | #1E96FF | #28A0FF | #32AAFF | #3CB4FF | #46BEFF | #50C8FF | #5AD2FF |
#0064FF | #0A6EFF | #1478FF | #1E82FF | #288CFF | #3296FF | #3CA0FF | #46AAFF | #50B4FF | #5ABEFF |
#0000FF | #3232FF | #5050FF | #646EFF | #6478FF | #6482FF | #648CFF | #6496FF | #64A0FF | #64AAFF |
#4169E1 | #4B73E1 | #557DE1 | #5F87E1 | #6991E1 | #739BE1 | #7DA5E1 | #87AFEB | #91B9F5 | #9BC3FF |
#0064CD | #0A6ECD | #1478CD | #1E82CD | #288CD2 | #3296D7 | #3CA0E1 | #46AAEB | #50B4F5 | #5ABEF5 |
#5A5AFF | #6464FF | #6E6EFF | #7878FF | #8282FF | #8C8CFF | #A0A0FF | #B4B4FF | #C8C8FF | #D2D2FF |
#7B68EE | #8572EE | #8F7CEE | #9986EE | #A390EE | #AD9AEE | #B7A4EE | #C1AEEE | #CBB8EE | #D5C2EE |
#6A5ACD | #7E6ECD | #8878CD | #9282CD | #9C8CCD | #A696CD | #B0A0CD | #BAAAD7 | #C4B4E1 | #CEBEE1 |
#0000CD | #2828CD | #4646CD | #6464CD | #6E6ED7 | #7878E1 | #8282EB | #8C8CF5 | #9696FF | #A0A0FF |
#00008C | #14148C | #28288C | #3C3C8C | #50508C | #646496 | #7878AA | #8C8CBE | #A0A0C8 | #B4B4DC |
#483D8B | #52478B | #5C518B | #665B8B | #70658B | #7A6F95 | #84799F | #8E83A9 | #988DB3 | #A297BD |
#000069 | #1E3269 | #323C73 | #3C467D | #3C5087 | #3C5A91 | #46649B | #506EA5 | #5A78AF | #6482B9 |
#3DFF92 | #47FF9C | #51FFA6 | #5BFFB0 | #65FFBA | #6FFFC4 | #79FFCE | #75FFCA | #7AFFCF | #7FFFD4 |
#55EE94 | #5FEE9E | #69EEA8 | #73EEB2 | #7DEEBC | #87EEC6 | #91F8D0 | #9BFFDA | #A5FFE4 | #AFFFEE |
#66CDAA | #70D2B4 | #7AD7BE | #84DCC8 | #8EE1D2 | #98EBDC | #9DF0E1 | #A2F5E6 | #A7FAEB | #ACFFEF |
#AAEBAA | #B4F0B4 | #BEF5BE | #C8FAC8 | #D2FFD2 | #DCFFDC | #E1FFE1 | #E6FFE6 | #EBFFEB | #F0FFF0 |
#80E12A | #8AE634 | #94EB3E | #9EF048 | #A8F552 | #B2FA5C | #BCFF66 | #C1FF6B | #C6FF70 | #CBFF75 |
#52E252 | #5CE75C | #66EC66 | #70F170 | #7AF67A | #84FB84 | #89FB89 | #8EFB8E | #93FB93 | #98FB98 |
#64CD3C | #6ED746 | #78E150 | #82EB5A | #8CF064 | #96F56E | #9BFA73 | #A0FA78 | #A5FA7D | #AAFA82 |
#13C7A3 | #18CCA8 | #1DD1AD | #22D6B2 | #27DBB7 | #2CE0BC | #31E0C1 | #36E0C6 | #3BE0CB | #40E0D0 |
#46B4B4 | #50BEBE | #5AC8C8 | #64D2D2 | #6EDCDC | #73E1E1 | #78E6E6 | #7DEBEB | #82F0F0 | #87F5F5 |
#20B2AA | #2ABCB4 | #34C6BE | #3ED0C8 | #48DAD2 | #52E4DC | #57E9E1 | #5CEEE6 | #61F3EB | #66F8F0 |
#5F9EA0 | #69A8AA | #73B2B4 | #7DBCBE | #87C6C8 | #91D0D2 | #96D5D7 | #9BDADC | #A0DFE1 | #A5E3E6 |
#3CB371 | #46BD7B | #50C785 | #5AD18F | #64DB99 | #6EE5A3 | #73EAA8 | #78EFAD | #7DF4B2 | #82F9B7 |
#2E8B57 | #389561 | #429F6B | #4CA975 | #56B37F | #60BD89 | #65C28E | #6AC793 | #6FCC98 | #74D19D |
#228B22 | #2C952C | #369F36 | #40A940 | #4AB34A | #54BD54 | #5EC75E | #63CC63 | #68D168 | #6DD66D |
#497649 | #538053 | #5D8A5D | #679467 | #719E71 | #7BA87B | #80AD80 | #85B285 | #8AB78A | #8FBC8F |
#006400 | #0A6E0A | #147814 | #1E821E | #288C28 | #329632 | #3CA03C | #41A541 | #46AA46 | #4BAF4B |
#008C8C | #0A9696 | #14A0A0 | #1EAAAA | #28B4B4 | #32BEBE | #37C3C3 | #3CC8C8 | #41CDCD | #46D2D2 |
#008080 | #0A8A8A | #149494 | #1E9E9E | #28A8A8 | #32B2B2 | #37B7B7 | #3CBCBC | #41C1C1 | #46C6C6 |
|
|
#ffffff |
#fff8ff |
#ffefff |
#ffe8ff |
#fffff8 |
#fff8f8 |
#ffeff8 |
#ffe8f8 |
#ffffef |
#fff8ef |
#ffefef |
#ffe8ef |
#ffffe8 |
#fff8e8 |
#ffefe8 |
#ffe8e8 |
#ffffdf |
#fff8df |
#ffefdf |
#ffe8df |
#ffffd8 |
#fff8d8 |
#ffefd8 |
#ffe8d8 |
#ffffcf |
#fff8cf |
#ffefcf |
#ffe8cf |
#f8ffff |
#f8f8ff |
#f8efff |
#f8e8ff |
#f8fff8 |
#f8f8f8 |
#f8eff8 |
#f8e8f8 |
#f8ffef |
#f8f8ef |
#f8efef |
#f8e8ef |
#f8ffe8 |
#f8f8e8 |
#f8efe8 |
#f8e8e8 |
#f8ffdf |
#f8f8df |
#f8efdf |
#f8e8df |
#f8ffd8 |
#f8f8d8 |
#f8efd8 |
#f8e8d8 |
#f8ffcf |
#f8f8cf |
#f8efcf |
#f8e8cf |
#efffff |
#eff8ff |
#efefff |
#efe8ff |
#effff8 |
#eff8f8 |
#efeff8 |
#efe8f8 |
#efffef |
#eff8ef |
#efefef |
#efe8ef |
#efffe8 |
#eff8e8 |
#efefe8 |
#efe8e8 |
#efffdf |
#eff8df |
#efefdf |
#efe8df |
#efffd8 |
#eff8d8 |
#efefd8 |
#efe8d8 |
#efffcf |
#eff8cf |
#efefcf |
#efe8cf |
#e8ffff |
#e8f8ff |
#e8efff |
#e8e8ff |
#e8fff8 |
#e8f8f8 |
#e8eff8 |
#e8e8f8 |
#e8ffef |
#e8f8ef |
#e8efef |
#e8e8ef |
#e8ffe8 |
#e8f8e8 |
#e8efe8 |
#e8e8e8 |
#e8ffdf |
#e8f8df |
#e8efdf |
#e8e8df |
#e8ffd8 |
#e8f8d8 |
#e8efd8 |
#e8e8d8 |
#e8ffcf |
#e8f8cf |
#e8efcf |
#e8e8cf |
#dfffff |
#dff8ff |
#dfefff |
#dfe8ff |
#dffff8 |
#dff8f8 |
#dfeff8 |
#dfe8f8 |
#dfffef |
#dff8ef |
#dfefef |
#dfe8ef |
#dfffe8 |
#dff8e8 |
#dfefe8 |
#dfe8e8 |
#dfffdf |
#dff8df |
#dfefdf |
#dfe8df |
#dfffd8 |
#dff8d8 |
#dfefd8 |
#dfe8d8 |
#dfffcf |
#dff8cf |
#dfefcf |
#dfe8cf |
#d8ffff |
#d8f8ff |
#d8efff |
#d8e8ff |
#d8fff8 |
#d8f8f8 |
#d8eff8 |
#d8e8f8 |
#d8ffef |
#d8f8ef |
#d8efef |
#d8e8ef |
#d8ffe8 |
#d8f8e8 |
#d8efe8 |
#d8e8e8 |
#d8ffdf |
#d8f8df |
#d8efdf |
#d8e8df |
#d8ffd8 |
#d8f8d8 |
#d8efd8 |
#d8e8d8 |
#d8ffcf |
#d8f8cf |
#d8efcf |
#d8e8cf |
#cfffff |
#cff8ff |
#cfefff |
#cfe8ff |
#cffff8 |
#cff8f8 |
#cfeff8 |
#cfe8f8 |
#cfffef |
#cff8ef |
#cfefef |
#cfe8ef |
#cfffe8 |
#cff8e8 |
#cfefe8 |
#cfe8e8 |
#cfffdf |
#cff8df |
#cfefdf |
#cfe8df |
#cfffd8 |
#cff8d8 |
#cfefd8 |
#cfe8d8 |
#cfffcf |
#cff8cf |
#cfefcf |
#cfe8cf |
ddbbbb | eecccc | ffdddd |
ddc3bb | eed4cc | ffe5dd |
ddccbb | eeddcc | ffeedd |
ddd4bb | eee5cc | fff6dd |
ddddbb | eeeecc | ffffdd |
d4ddbb | e5eecc | f6ffdd |
ccddbb | ddeecc | eeffdd |
c3ddbb | d4eecc | e5ffdd |
bbddbb | cceecc | ddffdd |
bbddc3 | cceed4 | ddffe5 |
bbddcc | cceedd | ddffee |
bbddd4 | cceee5 | ddfff6 |
bbdddd | cceeee | ddffff |
bbd4dd | cce5ee | ddf6ff |
bbccdd | ccddee | ddeeff |
bbc3dd | ccd4ee | dde5ff |
bbbbdd | ccccee | ddddff |
c3bbdd | d4ccee | e5ddff |
ccbbdd | ddccee | eeddff |
d4bbdd | e5ccee | f6ddff |
ddbbdd | eeccee | ffddff |
ddbbd4 | eecce5 | ffddf6 |
ddbbcc | eeccdd | ffddee |
ddbbc3 | eeccd4 | ffdde5 |
#FFF56E | #FFFA78 | #FFFA82 | #FFFF8C | #FFFF96 |
#FFE650 | #FFEB5A | #FFF064 | #FFF56E | #FFF978 |
#FFD232 | #FFD73C | #FFDC46 | #FFE150 | #FFE65A |
#FFC300 | #FFC800 | #FFCD00 | #FFD200 | #FFD700 |
#FF9100 | #FF9B00 | #FFA500 | #FFAF00 | #FFB900 |
#FFDBC1 | #FFE0C6 | #FFE5CB | #FFEAD0 | #FFEFD5 |
#FFD0A1 | #FFD5A6 | #FFDAAB | #FFDFB0 | #FFE4B5 |
#FFA98F | #FFB399 | #FFBDA3 | #FFC7AD | #FFD1B7 |
#FF9E7D | #FFA887 | #FFB291 | #FFBC9B | #FFC6A5 |
#E1B771 | #E6C17B | #EBC680 | #F0CB85 | #F5D08A |
#E19B50 | #E6A55A | #EBAA5F | #EBAF64 | #F0B469 |
#CD853F | #CD8F49 | #D29953 | #D7A35D | #DCAD67 |
#D2691E | #D27328 | #D27D32 | #D7873C | #DC9146 |
#FFDCE1 | #FFE1E6 | #FFE6EB | #FFEBF0 | #FFF0F5 |
#FFCFDA | #FFD4DF | #FFD9E4 | #FFDEE9 | #FFE3EE |
#FFB6C1 | #FFBBC6 | #FFC0CB | #FFC5D0 | #FFCAD5 |
#FF9E9B | #FFAAAF | #FFB4B9 | #FFBEC3 | #FFC8CD |
#FF88A7 | #FF92B1 | #FF9CBB | #FFA6C5 | #FFB0CF |
#FF5675 | #FF607F | #FF6A89 | #FF7493 | #FF7E9D |
#FFAAFF | #FFBEFF | #FFC8FF | #FFD2FF | #FFDCFF |
#FFAFE6 | #FFB4EB | #FFB9F0 | #FFBEF5 | #FFC3FA |
#FF82FF | #FF8CFF | #FF96FF | #FFA0FF | #FFAAFF |
#FF46C5 | #FF50CF | #FF5AD9 | #FF64E3 | #FF6EED |
#3DFF92 | #47FF9C | #51FFA6 | #5BFFB0 | #65FFBA |
#6FFFC4 | #79FFCE | #75FFCA | #A5FFE4 | #AFFFEE |
#98EBDC | #9DF0E1 | #A2F5E6 | #A7FAEB | #ACFFEF |
#AAEBAA | #B4F0B4 | #BEF5BE | #C8FAC8 | #D2FFD2 |
#DCFFDC | #E1FFE1 | #E6FFE6 | #EBFFEB | #F0FFF0 |
#80E12A | #8AE634 | #94EB3E | #9EF048 | #A8F552 |
#B2FA5C | #BCFF66 | #C1FF6B | #C6FF70 | #CBFF75 |
#228B22 | #2C952C | #369F36 | #40A940 | #4AB34A |
#54BD54 | #5EC75E | #63CC63 | #68D168 | #6DD66D |
#008C8C | #0A9696 | #14A0A0 | #1EAAAA | #28B4B4 |
#32BEBE | #37C3C3 | #3CC8C8 | #41CDCD | #46D2D2 |
#ACF3FF | #B0F7FF | #B4FBFF | #B9FFFF | #C0FFFF |
#32F1FF | #3CFBFF | #46FFFF | #96FFFF | #C8FFFF |
#00D7FF | #00E1FF | #00EBFF | #00F5FF | #00FFFF |
#93DAFF | #98DFFF | #9DE4FF | #A2E9FF | #A7EEFF |
#00BFFF | #0AC9FF | #14D3FF | #1EDDFF | #28E7FF |
#00A5FF | #00AFFF | #00B9FF | #00C3FF | #00CDFF |
#BECDFF | #C8D7FF | #D2E1FF | #DCEBFF | #E8F5FF |
#90AFFF | #9AB9FF | #A4C3FF | #AECDFF | #B8D7FF |
#6495ED | #6E9FED | #78A9ED | #82B3ED | #8CBDED |
#96C7ED | #A0D1F7 | #AADBFF | #B4E5FF | #BEEFFF |
#0078FF | #0A82FF | #148CFF | #1E96FF | #28A0FF |
#32AAFF | #3CB4FF | #46BEFF | #50C8FF | #5AD2FF |
#0078FF | #0A82FF | #148CFF | #1E96FF | #28A0FF |
#FFFFFF | #F4F4F4 | #DDDDDD |
#C0C0C0 | #ADADAD | #ADADAD |
#989898 | #808080 | #666666 |
#4B4B4B | #262626 | #000000 |
#FFF7F7 | #FFECEC | #FFCCCC |
#FF9999 | #FF6666 | #E54C4C |
#FF0000 | #E60000 | #CC0000 |
#B30000 | #990000 | #660000 |
#EFDCDC | #DEB8B8 | #CE9595 |
#AF5050 | #8C4040 | #7B3838 |
#660000 | #590D0D | #4C1919 |
#430909 | #391313 | #231010 |
#FF967E | #FF6947 | #FF4419 |
#FF3000 | #E62B00 | #B82200 |
#FFCE9F | #FFA147 | #FF8A19 |
#FF7E00 | #E87100 | #CC6400 |
#C58A52 | #AD733A | #7F654C |
#80542B | #603F20 | #6B5540 |
#FFEFBF | #FFDC74 | #FFD047 |
#FFC519 | #FFC000 | #F3B600 |
#F2F9E8 | #D9EFB9 | #C4E693 |
#ABDC65 | #90D133 | #74C600 |
#69B319 | #61A500 | #549000 |
#549000 | #264200 | #182605 |
#F2F8F8 | #D6E9E7 | #9ECCC7 |
#79B9B1 | #268F81 | #006F61 |
#EDF9FF | #CEEEFF | #65CBFF |
#00A0F3 | #0080C6 | #0060FF |
#0092E0 | #0060FF | #0060FF |
#003A9D | #003A9D | #0F3067 |
#FFD6ED | #FFA2D6 | #FF82C8 |
#FF59B6 | #FF2DA4 | #E60081 |
#FFE2FE | #FFB9FC | #FF71F8 |
#FF00F6 | #BD00B6 | #9C0095 |
#E7DCEF | #CAB2DB | #B594CD |
#9D71BD | #68269A | #4D0088 |
색상코드표
|
'공부 > HTML CSS' 카테고리의 다른 글
마우스 대면 미리보기(툴팁) (1) | 2011.12.19 |
---|---|
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0) | 2011.08.19 |
HTML TABLE 총정리 (0) | 2011.06.13 |
HTML TABLE 총정리
출처 : http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=AflE1+jL2y9YvOZQ6wm7ukI48DEQncLq&qb=dGFibGUgYm9yZGVy&pid=fbb3lsoQsCdsscDF4sdsss--439291&sid=SGGzQJN8YUgAAGCWO5Y
▣원어 : TABLE / 시작태그:필요 함 / 종료태그:필요 함
본문 내에 표를 만드는 태그입니다.
가장 많이 쓰이는 태그 이며, 홈페이지 내에서 많은 응용력을 필요로 합니다. 이 태그만 잘 사용해도 홈페이지 분위기가 확~~아주 중요한 태그입니다.
▣속성
• align="값" (값 = left / center / right)
-----표의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• backgroungd="이미지 파일 경로"
-----배경이 될 이미지 파일의 경로를 지정해 줍니다. 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0, 3.0 이상
• border="픽셀"
-----표의 외곽선의 두께를 설정하며, 값이 "0"이면 외곽선이 보이지 않습니다.
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• cellpadding="픽셀"
-----셀 경계와 셀 안의 내용과의 간격을 지정 3.0, 3.0 이상
• cellspacing="픽셀"
-----셀과 셀 사이의 간격을 지정 3.0, 3.0 이상
• cols="숫자"
-----표에 들어갈 열의 개수를 지정 4.0, 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• frame="값" (값 = above / below / border / hsides / Lhs / rhs / vside / void)
-----표 외곽선의 형태를 지정 border="1" 이상일 때 사용할 수 있습니다. 3.0 이상
above | 바깥쪽 경계선 중 윗쪽만 나타남 |
below | 바깥쪽 경계선 중 아래쪽만 나타남 |
border | 기본적인 외곽선 |
hsides | 바깥쪽 경계선 중 위아래만 나타남 |
Lhs | 바깥쪽 경계선 중 왼쪽만 나타남 |
rhs | 바깥쪽 경계선 중 오른쪽만 나타남 |
vside | 바깥쪽 경계선 중 좌우만 나타남 |
void | 외곽선이 나타 나지 않습니다. |
• height="픽셀"
-----표의 높이를 설정
• hspace="픽셀"
-----표 위아래로 표 외곽 내용들과의 간격을 설정합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rules="값" (값 = cols / rows / none / all / group)
-----표에서 셀 사이에 경계선을 설정합니다. 3.0 이상
cols | 열 사이의 경계선만 그린다. |
rows | 행들 사이의 경계선만 그린다. |
none | 표 외곽선을 제외한 내부 셀 경계를 모두 지운다. |
all | 표 외곽선을 포함한 내부 셀 경계를 모두 그린다. |
group | <TBODY>, <TFOOT>등 그룹들 안의 경계선을설정 |
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• width="픽셀/(%)"
-----표의 너비를 설정 하며, 브라우저를 대비한 비율을 퍼센트로 사용 하기도 합니다.
예제:
<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table style="border: #000000 1px solid"> <caption align="TOP">style="border: #000000 1px solid"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="0"> <caption align="TOP">BORDER="0"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1"> <caption align="TOP">BORDER="1"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="4"> <caption align="TOP">BORDER="4"</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> </body> </html> |
결과:
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" width="500" bgcolor="#999999"> <caption align="TOP">WIDTH="500" bgcolor="#999999"</caption> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>x</td><td>y</td><td>z</td></tr> </table> <p> <table border="1" width=80%> <caption align="TOP">WIDTH=80% (500px의 80%)</caption> <tr><td>a</td><td>b</td><td>c</td></tr> <tr><td>x</td><td>y</td><td>z</td></tr> </table> </body> </html> |
결과:
|
<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" > <caption align="TOP">FRAME 속성을 사용하지 않을 때 </caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=VOID> <caption align="TOP">FRAME=VOID</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=BORDER> <caption align="TOP">FRAME=BORDER</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=ABOVE> <caption align="TOP">FRAME=ABOVE</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=BELOW> <caption align="TOP">FRAME=BELOW</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> </body> </html> |
결과:
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
<html> <head> <title>TABLE 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" frame=HSIDES> <caption align="TOP">FRAME=HSIDES</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=LHS> <caption align="TOP">FRAME=LHS</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=RHS> <caption align="TOP">FRAME=RHS</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" frame=VSIDES> <caption align="TOP">FRAME=VSIDES</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr> </table> <p> <table border="1" BOX> <caption align="TOP">FRAME=BOX</caption> <tr><td width="150">a</td><td width="150">b</td><td width="150">c</td> </tr> <tr><td width="150">x</td><td width="150">y</td><td width="150">z</td> </tr> </table> </body> </html> |
결과:
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
a | b | c |
x | y | z |
▣원어 : Table Row / 시작태그:필요 함 / 종료태그:필요 없음
표의 행을 만드는 태그 입니다.
<TABLE>안에 들어가며 <TR>태그가 들어갈 때 마다 행이 바뀌고 이 태그 안에는 <TD>가 들어가 셀을 만들어 줍니다.
▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----한 행의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상
예제:
<html> <head> <title>TR 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> 표에 행을 삽입한다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀐다.<p> <table border="1"> <caption align="TOP">TR 태그의 정렬방식</caption> <tr align="left" valign="top"> <th colspan="3" align="CENTER">정렬방식</th> </tr> <tr align="left" valign="top"> <td width="200" height="50">LEFT, TOP</td> <td width="200" height="50" valign="middle">LEFT, MIDDLE</td> <td width="200" height="50" valign="bottom">LEFT, BOTTOM</td> </tr> <tr align="center" valign="middle"> <td width="200" height="50" valign="top">CENTER, TOP</td> <td width="200" height="50">CENTER, MIDDLE</td> <td width="200" height="50" valign="bottom">CENTER, BOTTOM</td> </tr> <tr align="right" valign="bottom"> <td width="200" height="50" valign="top">RIGHT, TOP</td> <td width="200" height="50" valign="middle">RIGHT, MIDDLE</td> <td width="200" height="50">RIGHT, BOTTOM</td> </tr> </table> </body> </html> |
결과:
표에 행을 삽입 합니다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀝니다.
정렬방식 | ||
---|---|---|
LEFT, TOP | LEFT, MIDDLE | LEFT, BOTTOM |
CENTER, TOP | CENTER, MIDDLE | CENTER, BOTTOM |
RIGHT, TOP | RIGHT, MIDDLE | RIGHT, BOTTOM |
▣원어 : Table Data cell / 시작태그:필요 함 / 종료태그:필요 없음
표 내에 셀을 삽입 하며, <TD> 태그는 반드시 <TR> 태그 안에 들어가야 합니다.
▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rowspan="숫자"
----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용. 3.0, 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상
예제:
<html> <head> <title>TD 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP">셀의 배경으로 그림</caption> <tr> <td width="170" align="left" valign="top">a </td> <td width="170" align="center" valign="middle">b </td> <td width="170" align="right" valign="bottom">c </td> </tr> <tr> <td width="170" height="50" background="image1.gif"> </td> <td width="170" height="50" background="image2.gif"> </td> <td width="170" height="50" background="image3.gif" > </td> </tr> </table> <p> <table border="1"> <caption align="TOP">셀의 배경으로 색 </caption> <tr> <td width="170" height="50" align="left" valign="top">왼쪽 위 정렬</td> <td width="170" height="50" align="center" valign="middle">가운데 정렬</td> <td width="170" height="50" align="right" valign="bottom">오른쪽 아래 정렬</td> </tr> <tr> <td width="170" height="50" bgcolor="#CCCCCC" align="left" valign="top">a</td> <td width="170" height="50" bgcolor="#66CCFF" align="center" valign="center">b</td> <td width="170" height="50" bgcolor="#FFCCCC" align="right" valign="bottom">c</td> </tr> </table> </body> </html> |
결과:
a | b | c |
왼쪽 위 정렬 | 가운데 정렬 | 오른쪽 아래 정렬 |
a | b | c |
▣원어 : Table BODY / 시작태그:필요 없음 / 종료태그:필요 없음
Table FOOTer / 시작태그:필요 함 / 종료태그:필요 없음
Table HEADer / 시작태그:필요 함 / 종료태그:필요 없음
테이블을 머리말, 본문, 꼬리말로 나누었을 때 <THEAD>는 머리말, <TBODY>는 본문에 해당하며 그리고 <TFOOT>는 꼬리말에 해당 합니다. 이 태그는 시작 태그만 사용해도 무방합니다.
▣속성
• align="값" (값 = left / center / right / justify / char)
-----들어갈 내용의 정렬 상태를 설정 합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0 이상
예제:
<html> <head> <title>T(HEAD, BODY, FOOT)태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1" width=500> <caption>TBODY 태그</caption> <thead> <tr bgcolor="#FF9999"><td>THEAD<td>THEAD<td>THEAD</tr> <tfoot> <tr bgcolor="#99CCFF"><td>TFOOT<td>TFOOT<td>TFOOT</tr> <tbody> <tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr> <tr bgcolor="#0099CC"><td colspan="3">TBODY</tr> </tbody> <tbody> <tr bgcolor="#0099CC"><td colspan="3">TBODY</tr> <tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr> </tbody> </table> </body> </html> |
결과를 보면 TFOOT은 먼저 기술 하여도 제일 마지막에 나타나고 TBODY는 본문에 해당하는 중간에 나타납니다.
THEAD | THEAD | THEAD |
TFOOT | TFOOT | TFOOT |
TBODY | TBODY | TBODY |
TBODY | ||
TBODY | ||
TBODY | TBODY | TBODY |
▣원어 : Table Header cell / 시작태그:필요 함 / 종료태그:필요 없음
보통은 표에 가장 윗 줄에 위치하며 각 열의 제목을 나타낼 때 쓰며, 태그자 적용되면 글꼴이 굵게 되고 가운데 정렬이 됩니다.
▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rowspan="숫자"
-----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용 3.0, 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상
예제:
<html> <head> <title>TH 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP">TH 태그와 TD 태그 비교</caption> <tr> <th>TH</th> <th>TH</th> <th>TH</th> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> <tr> <td width="150">TD</td> <td width="150">TD</td> <td width="150">TD</td> </tr> </table> </body> </html> |
결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.
TH | TH | TH |
---|---|---|
TD | TD | TD |
TD | TD | TD |
TD | TD | TD |
▣원어 : table CAPTION / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <TABLE>태그 내에서만 사용 되며, 테이블에 대한 제목이나 설명을 기재 할 때 사용합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.
▣속성
• align="값" (값 = top / bottom / left / right)
-----caption 태그의 내용의 정렬 방식을 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
예제:
<html> <head> <title>CAPTION 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="top">CAPTION</caption> <tr> <td width="150">TOP</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="bottom">CAPTION</caption> <tr> <td width="150">BOTTOM</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="left">CAPTION</caption> <tr> <td width="150">LEFT</td> <td width="150">caption 정렬 방식</td> </tr> </table><p> <table border="1"> <caption align="right">CAPTION</caption> <tr> <td width="150">RIGHT</td> <td width="150">caption 정렬 방식</td> </tr> </table> </body> </html> |
결과는 caption 태그의 정렬 방식입니다.
TOP | caption 정렬 방식 |
BOTTOM | caption 정렬 방식 |
LEFT | caption 정렬 방식 |
RIGHT | caption 정렬 방식 |
▣원어 : table COLumn GROUP / 시작태그:필요 함 / 종료태그:필요 없음
테이블의 그룹에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.
▣속성
• align="값" (값 = top / bottom / left / right)
-----colgroup태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상
예제:
<html> <head> <title>COLGROUP 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border="1"> <caption align="TOP"> COLGROUP 태그 </caption> <colgroup> <col align="left"> <col align="center"> <colgroup span="2" align="right"> <tr> <td width="200">Align="Left"</td> <td width="200">Align="Center"</td> <td width="200">Align="Right"</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> <tr> <td width="200">a</td> <td width="200">b</td> <td width="200">c</td> </tr> </table> </body> </html> |
결과:
Align="Left" | Align="Center" | Align="Right" |
a | b | c |
a | b | c |
a | b | c |
▣원어 : table COLumn / 시작태그:필요 함 / 종료태그:사용 금지
각 열에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.
▣속성
• align="값" (값 = top / bottom / left / right)
-----col태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상
예제:
<html> <head> <title>COL 태그</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> </head> <body bgcolor="white"> <table border=1> <caption align="top">COL 태그</caption> <colgroup> <col align="right"> <col align="center"> <tr> <td width="300">ALIGN="RIGHT"</td> <td width="300">ALIGN="CENTER"</td> </tr> </table> </body> </html> |
결과를 보면 다음과 같습니다...^^
ALIGN="RIGHT" | ALIGN="CENTER" |
'공부 > HTML CSS' 카테고리의 다른 글
마우스 대면 미리보기(툴팁) (1) | 2011.12.19 |
---|---|
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0) | 2011.08.19 |
html 색상코드 표 (0) | 2011.08.08 |