'공부/HTML CSS' 카테고리의 글 목록

공부/HTML CSS +4

Loading..마우스 대면 미리보기(툴팁)1
2011.12.19

뷰어로 보기
Loading..테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기
2011.08.19

뷰어로 보기
Loading..html 색상코드 표
2011.08.08

뷰어로 보기
Loading..HTML TABLE 총정리
2011.06.13

뷰어로 보기

마우스 대면 미리보기(툴팁)

공부/HTML CSS2011. 12. 19. 16:04

뷰어
댓글로
이전글
다음글

[13] 툴 팁에 대하여

툴팁은 다른 말로 "도구설명"이라고도 합니다. 익스플로러나 워드프로세서 등의 프로그램들을 보면 도구단추들이 있는데, 이러한 도구단추들 위로 마우스를 가져가면 멈춤, 새로고침, 시작, 검색 등의 글자가 나타나 도구단추의 용도를 가르쳐줍니다. 툴팁은 바로 이러한 것을 말합니다. 다른 말로는 "풍선도움말"이라고도 하지요. 웹페이지에서의 툴팁은 주로 링크가 되어있는 텍스트나 이미지위에 마우스가 위치 할 때 링크되어 있는 페이지에 대한 정보를 제공해주는 것이 대부분입니다.
툴팁에는 수없이 많은 형태가 있습니다. 일반 태그를 이용하는 간단한 방법에서 부터 dhtml과 css, 자바 스크립트를 이용한 다양한 방법이 있습니다.

가장 간단한 방법

▒ 이미지에 설명글 달기.

<img src="그림주소" alt="설명글">
이미지에 설명글을 넣을 때는 alt를 사용합니다.
alt 뒤에 설명글을 넣어주면 이미지에 마우스가 올라간 후 1~2초 후에 설명글이 보입니다.

[ 사용 예시 ]
<img src="rose.gif" alt="장미 그림">

결과보기
아래 그림에 마우스를 가져가 보신 후 잠시 기다려 보세요.
장미 그림

▒ 링크에 설명글 달기.

<a href="링크주소" title="설명글"> 이미지에 설명글을 넣을때는 title을 사용합니다. title 뒤에 설명글을 넣어주면 링크에 마우스 오버 1~2초후에 설명글이 보입니다.

[ 사용 예시 ]
<a href="sanj.htm" target=_blank title="부산일보 산행정보로 갑니다"> 부산일보 산행정보</a>

결과보기
(아래에 마우스를...)
아름다운글 올리는방법

▒ 텍스트(일반글)에 설명글 달기.

<font size="2" title="설명글">
Text에 설명글을 넣을때도 title을 사용합니다.
title 뒤에 설명글을 넣어주면 Text에 마우스 오버 1~2초후에 설명글이 보입니다.

[ 사용 예시 ]
<font size="2" title="CURSOR:hand" style="CURSOR:hand;">
이글은 일반 Text 에서 Tooltip을 보여 주는 예제글 입니다.
이글위에 마우스를 가져 가시면 CURSOR:hand 라는 풍선 도움말이 보이실 것입니다.
바로 나오지 않는 분은 잠시만 기다려 보세요.
CURSOR:hand 라고 작은 풍선 도움말 보이세요?</a>

결과보기
(아래에 마우스를...)
이글은 일반 Text 에서 Tooltip을 보여 주는 예제글 입니다. 이글위에 마우스를 가져 가시면 CURSOR:hand 라는 풍선 도움말이 보이실것입니다. 바로 나오지 안는분은 잠시만 가다려 보세요. CURSOR:hand 라고 작은 풍선 도움말 보이세요?

▒ Text Box에 설명글 달기.

<input type="text" value="텍스트 박스글" title="설명글">
Text Box에 설명글을 넣을때도 역시 title을 사용합니다.

[ 사용 예시 ]
<input type="text" value="Text Box Tooltip" style="CURSOR:hand;" title="Text Box 툴팁입니다">

결과보기
(아래에 마우스를...)

▒ Button에 설명글 달기.

<input type="button" value="텍스트 박스글" title="설명글">
Text Box에 설명글을 넣을 때도 역시 title을 사용합니다.

[ 사용 예시 ]
<input type="button" value="버턴툴팁" style="CURSOR:hand;" title="버턴에도 풍선도움말이 됩니다">

결과보기
(아래에 마우스를...)

2. 툴 팁 줄 바꾸기.

alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용 할 수 없습니다.
alt 나 title의 줄바꿈은  을 넣어야 합니다.

[ 사용 예시 1 ]
<img src="rose.gif" alt="이것은장미 그림입니다">

결과보기
아래 그림에 마우스를 가져가 보신 후 잠시 기다려 보세요.
이것은
장미 그림
입니다

[ 사용 예시 2 ]
<a href="http://asanak.com.ne.kr/asanak.htm" target=_blank title="게시판에 글을 올릴 때또는메일을 멋있게 보내고자 할 때는
오셔서 아름다운 글 올리는 방법을 보세요.
이 링크를 클릭하면 홈으로 갑니다">
아름다운글 올리는방법</a>

결과보기
(아래에 마우스를...)
아름다운글 올리는방법

이상과 같이 모든 툴팁에 줄바꿈 하실때 를 넣어주면 줄바꿈이 됩니다.

3. 스타일 시트를 이용하는법.

스타일 속성 중 visibility를 이용해 보겠습니다.
visibility란 어떠한 부분을 보여주거나 숨기거나 하는 것을 결정하는 속성입니다.
visibility의 값을 visible이라 하면 보여주고, hidden이라 하면 감춥니다.
소스는 아래와 같습니다.

이 부분은 스타일시트를 이용해서 visibility의 초기값을 hidden으로 설정하고 있습니다.
스타일시트이기 때문에 <style> 태그로 둘러싸고 있으며 <head> 태그 내에 써주어야 합니다.
#표시는 스타일을 선언할 때만 써주고 나중에 사용할 때는 쓰지 않습니다.

스타일시트를 정의 할 때 visibility외에 앞에서 레이어를 만들면서 배운 position, top, left, width, height 등의 속성을 이용하면 툴팁이 나타나는 위치를 바꿀 수 있습니다.

다음은 링크를 만드는 <a> 태그 부분입니다.

<a href="javascript:alert('툴팁 샘플입니다.');"
onmouseover="tooltip.style.visibility='visible';"
onmouseout="tooltip.style.visibility='hidden';">이곳에 마우스를</a>
<span id=tooltip>이것이 툴팁입니다.</span>

링크 하실 때는 javascript:alert('툴팁 샘플입니다.');대신 링크 주소를 넣어 주시면 됩니다.

[ 사용 예시 ]
<html>
<head>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=EUC-KR">
<title>아름다운글 올리는 방법-툴팁2-</title>
<STYLE TYPE=text/css>
#tooltip {visibility:hidden;}
</STYLE>
</head>
<body>
<a href="javascript:alert('툴팁 샘플입니다.');"
onmouseover="tooltip.style.visibility='visible';"
onmouseout="tooltip.style.visibility='hidden';">이곳에 마우스를</a>
<span id=tooltip>이것이 툴팁입니다.</span>

결과 보기>
이곳에 마우스를

이것이 툴팁입니다.

4. 자바 스크립트를 이용한 툴팁

자바 스크립트 소스를 분석 하기란 상당히 어렵습니다. 자바를 전문적으로 공부한 프로그래메가 아니면 자바소스를 만들지 못합니다. 우리는 그저 프로그래머가 만들어 놓은 자바 소스를 이용만 할수 있을 뿐입니다.

툴팁을 만들기 위해서 우선, 기본적으로 <body>와 </body> 사이에 아래 있는 div레이어와 JavaScript소스를 넣어야 합니다.

<div style="position:absolute;z-index:1;visibility:hide" id="overDiv"></div>
<script language="JavaScript">

</script>

▒ 고급 방법

<a href="링크주소" target=자신의 타겟트 설정
onmouseover="dcc('<div style=margin-left:10;margin-top:10>
툴팁 설명글.</div>','','20')" onmouseout="nd()">링크</a>

이렇게 넣어 주시면 됩니다.

① 평범한 툴팁.

위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
소스중 http://asanak.com.ne.kr/index.html은 여러분의 링크 주소로 바꾸어 주시고 target=_blank 의 타겟트 설정도 홈에 맞게 수정해 줘야 합니다.

<a href="http://asanak.com.ne.kr/index.html" target=_blank
onmouseover="dcc('<div style=margin-left:10;margin-top:10;>
sample 1 <br>이것은 일반적인 툴팁 입니다.</div>','','20')"
onmouseout="nd()">아름다운글 올리는 방법</a>

결과 보기 ; (아래의 글에 마우스를 가져가 보세요)

② 툴팁 흐르는글.

이번에는 marquee를 이용하여 둘팁의 글이 움직이게 만들어 봅시다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.

<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> sample 2 <br><marquee width=250>툴팁의 설명글이 옆으로 흐릅니다.</marquee></div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>

결과 보기 (아래의 글에 마우스를 가져가 보세요)

③ 툴팁에 바탕색 넣기.

툴팁글에 바탕색도 넣어보죠.
font 에style=background-color:원하는 색상코드; 를 넣어 주시면 됩니다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.

<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> <font color=#ffffcc size=3 style=background-color:708090;>바탕색이 있는 툴팁박스</div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>

결과 보기 (아래의 글에 마우스를 가져가 보세요)

④ 툴팁에 테두리 넣기.

툴팁글에 바탕색과 테두리도 넣어보죠.
일반 테이블 작성법과 같습니다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
수정법
폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다

<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> <table border=1 cellspacing=0 cellpadding=3 width=250 bordercolor=#74a6ab bgcolor=#444444><tr><td><font color=orange size=3><center>SAMPLE4<br>테두리가 있는 툴팁박스 입니다</td></tr></table></div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>

결과 보기 (아래의 글에 마우스를 가져가 보세요)

⑤ 툴팁에 테두리, 그리고 상단과 하단의 바탕색이 다르게 넣기.

위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.

수정법
폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다

<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> <table border=1 cellspacing=0 cellpadding=3 width=250 bordercolor=#74a6ab bgcolor=#444444><tr><td><font color=orange size=3><center>SAMPLE5</td></tr><tr><td bgcolor=999999><font color=#000000 size=3><center>상단과 하단의 배경색이 다른 툴팁박스</td></tr></table></div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>

결과 보기 (아래의 글에 마우스를 가져가 보세요)

이방법을 응용하면 여러가지 방법이 나올수 있습니다.
JavaScript 는 js 파일로 만들어 링크해도 됩니다.

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 링크의 밑줄을 삭제 하라는것 입니다.

이 부분을 홈에 맞게끔 수정해 주세요.

메모장에 작성하면 아래와 같이 됩니다. 


                                                <head>
                <script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":814431,"name":"finerss","title":"finerss's world!","isDormancy":true,"nickName":"finerss","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://finerss.tistory.com/category/%25EA%25B3%25B5%25EB%25B6%2580/HTML%2520CSS","DEFAULT_URL":"https://finerss.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"};
window.T.entryInfo = null;
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};

window.TistoryBlog = {
    basePath: "",
    url: "https://finerss.tistory.com",
    tistoryUrl: "https://finerss.tistory.com",
    manageUrl: "https://finerss.tistory.com/manage",
    token: "yk8U20zlukPq0/n3LB43tj19FKSQrO/hbecLa3RZkPa2SVFgIFNR0PpCsWj3KJeo"
};
var servicePath = "";
var blogURL = "";</script>

                
                
                
<META HTTP-EQUIV="Content-Type" content="text/html; charset=EUC-KR">
<title>-툴팁-</title>
<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>

                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

                
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/>
<link rel="canonical" href="https://finerss.tistory.com"/>

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":0,"item":{"@id":"https://finerss.tistory.com/entry/%EB%A7%88%EC%9A%B0%EC%8A%A4-%EB%8C%80%EB%A9%B4-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0%ED%88%B4%ED%8C%81","name":"마우스 대면 미리보기(툴팁)"}},{"@type":"ListItem","position":1,"item":{"@id":"https://finerss.tistory.com/entry/%ED%85%8C%EC%9D%B4%EB%B8%94DIV%ED%83%9C%EA%B7%B8%EC%97%90%EC%84%9C-%EA%B8%80%EC%9E%90%EA%B8%B8%EC%96%B4%EC%A7%80%EB%A9%B4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%9E%98%EB%9D%BC%EC%A3%BC%EA%B3%A0-%EB%84%A3%EA%B8%B0","name":"테이블/DIV태그에서  글자길어지면 자동으로 잘라주고 ...넣기"}},{"@type":"ListItem","position":2,"item":{"@id":"https://finerss.tistory.com/entry/html-%EC%83%89%EC%83%81%EC%BD%94%EB%93%9C-%ED%91%9C","name":"html 색상코드 표"}},{"@type":"ListItem","position":3,"item":{"@id":"https://finerss.tistory.com/entry/HTML-TABLE-%EC%B4%9D%EC%A0%95%EB%A6%AC","name":"HTML TABLE 총정리"}}]}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script>

                
                </head>
   예를 보면서 설명을 하겠습니다.
  
   1. 일반적인 툴팁.

<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>
<div id='asanak1' style="margin-left:150;"> </div>

       
      <head>와</head>의 소스를 넣은후
      <body>와 </body> 사이의 원하는 위치에 위의  1. 일반적인 툴팁. 소스를 넣습니다.
 수정할 부분 소스 설명 
http://asanak.com 링크할 주소입니다. 여러분의 주소로 고쳐야 겟죠. 
target="_blank" target 설정 입니다.
onfocus="this.blur()" 링크를 클릭하면 생기는 점선을 나타나지 않게하는 소스 입니다.
<B>Go!!</B><br> asanak.com. 풍선도움말의 내용
margin-left:150 풍선 도움말의 위치. 각자의 홈에 맞게 수치를 조절 하세요
&nbsp; 윈도우의 에러를 방지 하기위한 공백 문자 

메모장에 완성된소스는 아래와 같이 됩니다.

<html>
<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. 간단한 버튼 만들기

아래 소스에 주소와 버튼에 들어갈 이름만 고쳐 쓰면 된다.
<form action="주소" target="_blank">
<input type="submit" value="태그연습"> </form>
스타일시트로 응용해서 이쁜 색 버튼을 만들 수도 있다.

<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:pink; border:1 solid red;size= 30;height:20px"></style> 를 쓰면,

<input type="button" value="이쁜 버튼" style="color:white; font-size: 9pt;
background-color:00ccff; border:1 solid blue;size= 30;height:20px"></style>를 쓰면,

(버튼응용에서 연결까지)
<form action="연결시킬주소" target="_blank"> <input type="submit" value="버튼이름" style="color:white; font-size: 9pt; background-color:pink; border:1 solid red;size= 30;height:20px"></style></form>

2. 토글 버턴 만들기

토글버턴이란 하나의 버턴으로 두가지의 기능을 수행 하는 것입니다.

▒ 토글버턴 1

토글버턴 1은 자바스크립트 없이 가장 간단하게 만들 수 있는 것입니다만 단점은 한 번 밖에 사용 할 수 없다는 것 입니다.

예제보기: 아래 보이기를 클릭해 보세요.

♣ 보이기

♣ 숨기기

안녕 하세요?
토글버턴 예제 1번 입니다.

아래 소스를 복사해 사용 하세요

<STYLE ID="First" TYPE="text/css"> #ShowText {display:none} #HideText {color:#40FFC0; cursor:hand;} .DIV1 {display:none} </STYLE> <STYLE ID="Second" TYPE="text/css" DISABLED> #HideText {display:none} #ShowText {color:#FFF982; cursor:hand;} </STYLE> <P ID="HideText" ONCLICK="document.styleSheets['Second'].disabled =false; document.styleSheets['First'].disabled =true;">♣ 보이기</P> <P ID="ShowText" ONCLICK="document.styleSheets['Second'].disabled=true; document.styleSheets['First'].disabled=false;">♣ 숨기기</P> <DIV class=DIV1> 안녕 하세요?<br> 토글버턴 예제 1번 입니다. </DIV>

글자의 색상은 #HideText 의 color:#40FFC0; 와 #ShowText의 color:#FFF982;를 수정하면 됩니다.
♣ 보이기 ♣ 숨기기는 이미지로 대체 하여도 되고 나오는 내용 또한 어떤것이던 보이게 할수 있습니다

3. Form에 대한 개요

여기서는 간단히 Form이란 무엇인가에 대해 생각해 보도록 합니다.
대부분 Form은 Java Script, CGI와 함께 사용하게 됩니다. 회원제 사이트에 가면 이름, 주민등록 번호, 남녀 구분, 주소... 등등 입력하는 양식이 있죠? 이게 바로 Form으로 작성된 겁니다. 이것 저것 입력한 후 "확인" 버튼을 클릭하면 그 정보가 서버의 데이터 베이스에 전달되게 되는데, 이러한 정보를 데이터 베이스나 파일로 저장하는 작업을 해주는 것이 CGI라고 합니다. 검색엔진에서 원하는 단어를 넣고 검색을 하면 원하는 사이트가 나타나죠? 그것도 CGI를 이용한 것이랍니다.

그럼 CGI에 대해 간단히 알아볼까요? CGI는 Common Gateway Interface의 약자입니다. Common은 공통의, 공용의.. 이런 뜻을 갖고 있고, Gateway란 문, 출입구, 통로 그리고 interface는 경계면, 접점, 공유영역이란 뜻을 갖고 있습니다.
좀 더 어렵게 이야기 하자면 클라이언트 사용자와 서버 간에서 서로 필요한 정보를 서로 공유할 수 있도록 도와주는 것을 CGI라고 합니다.

CGI는 C, C++ 같은 컴파일 언어로 만들 수 있구요, Perl 같이 컴파일 과정 없이 사용되는 인터프리터 언어로 만들 수도 있어요. 단지 C, C++, Perl 등 만으로 가능한 것은 아니구요. 대부분의 언어로 구현이 가능합니다. 여기 하고 있는 프로젝트는 코볼로 했구요. 쉽게 접할 수 있는 CGI 프로그램은 방명록이나 게시판, 카운터, 순위 사이트 등이 있어요. 접해보신 분들이 계실테지만 게시판 중 Korea Famous CGI Server에서 제공하는 크레이지 보드는 C로 짠 게시판이고 Way-Board는 Perl로 되어있어요.

1) Form Tag

모든 입력 양식(Form)의 시작과 끝을 나타냅니다.
action="CGI Program Name" - 서버에서 실행될 CGI 프로그램을 나타냅니다. Perl로 된 것이라면 action="/cgi-bin/abc.cgi" 나 action="http://www.abc.com/cgi-bin/abc.cgi" 와 같은 형태가 될 것입니다.
method = "post or get" - 입력된 정보를 처리하는 방식을 나타냅니다.
method = "post" - 입력된 내용들이 서버에 있는 데이터베이스나 파일에 저장될 경우에는 대부분 post 방식을 사용합니다. 게시판이나 방명록이 주로 여기에 속합니다.
method = "get" - 입력된 내용들이 방문객에게 보여질 경우에 주로 사용됩니다. 카운터나 검색엔진이 주로 여기에 속하겠죠. 한 번 소스 보기로 보세요. Client에서 Server로 보내지는 정보는 URL 형태로 전달되어 보안문제가 그대로 드러나기도 하고, 한번에 보낼 수 있는 정보가 256 byte로 한정되어 있습니다.

2) Form의 종류
Form의 종류에는

텍스트(text)
암호(password)
체크박스(checkbox)
라디오버튼(radio button)
텍스트 영역(text area)
선택목록(list box)

와 같은 것들이 있습니다.

3) 텍스트(text)

사용은 Form Tag와 함께 사용해야 합니다.

type - type="text" 라고 하면 입력되는 형식을 텍스트 형태로 처리하겠다는 것을 뜻하는 것입니다.
name - 프로그래밍할 때 변수를 지정하는 것과 같은 원리입니다. name 이라는 항목으로 text input에 이름을 주어 서버에서 작동하는 프로그램에 전달하기 위해서 사용합니다. name을 주면 페이지가 로딩될 때 자바 스크립트 등을 이용해서 원하는 text input에 focus를 줄 수도 있습니다.
size - text의 길이를 n byte 만큼 글자가 들어갈 길이로 하겠다는 것입니다. text 모양의 길이를 나타냅니다.
maxlength - text에 들어갈 수 있는 실제 글자의 길이를 byte로 정합니다. text에 들어갈 수 있는 실제 문자의 길이를 정합니다.
value - 서버로 넘길 값입니다. text input에 사용자가 입력한 값입니다.
아래의 예에서 메일 주소 항목을 보면 메일 주소는 text input의 길이를 25 byte 만큼하고 최대로 들어갈 수 있는 글자를 25 byte로 한정하겠다는 이야기입니다. 25 바이트란 영문자나 숫자 25개가 들어갈 수 있는 길이를 말합니다. 참고로 한글은 한 자가 2byte를 차지합니다.
그리고 value에 미리 값을 셋팅했습니다. Default로 값이 들어있어야 할 경우 아래와 같이 사용하면 편리합니다.

모양은 텍스트 입력과 같습니다. 아래의 소스와 형식을 참조하세요.

<FORM>
<font size="2">
받는 사람 메일 주소 :
<INPUT type="text" name="r_email" size="25" maxlength="25">
<br>
받는 사람 이름 :
<INPUT type="text" name="r_name" size="10" maxlength="10">
<br>
보내는 사람 메일 주소:
<INPUT type="text" name="s_email" size="25" maxlength="25" value=" ">
<br>
보내는 사람 이름 :
<INPUT type="text" name="s_name" size="10" maxlength="10" value="한마음">
</font>
</FORM>asanak@com.ne.kr

4) 비밀번호

사용법은 text input과 동일합니다. 단지 차이가 있다면 type을 password로 주었다는 것입니다. 여러분 어느 사이트에 회원으로 가입하고 로그온 할 경우 아이디와 비밀번호 넣지요? 그리고 비밀번호에 키보드로 비밀번호를 입력하면 "*******" 와 같은 형태로 나타나죠? 이게 바로 password input을 사용한 것입니다.

사용된 항목은 위에서 설명한 것 처럼 text input과 동일합니다. 위에 아이디와 비밀번호를 적어보세요. 아이디는 입력한 문자가 나타나는데 비밀번호에는 "******"라고 적힐 겁니다.

5) Submit

<INPUT type="> submit" value="버튼 이름>

입력창 (text input과 password input 등)에 입력된 값을 서버로 전송하기 위한 버튼의 형태입니다. value 값을 지정하지 않으면 아마 버튼 Label이 "쿼리 전송" 이라고 나타날 겁니다. Form에 입력된 내용을 보낸다는 뜻으로 이해 하세요.

검색엔진이나 어느 사이트에 가입할 경우 "가입" 이나 "Search" 라는 버튼을 클릭하죠? 다음과 같이 하면 그렇게 나타납니다.

6) Reset

Form에 입력된 내용을 Clear할 경우에 사용하는 버튼의 형태입니다. 방명록이나 가입양식에서 입력된 내용을 Clear 하고자 할 경우 입력항목이 많은데 일일이 지우면 불편하죠? 이 버튼 하나면 한방에 끝납니다.

7) 체크 박스(Check Box)

input tag는 변함 없이, 단지 type이 checkbox

체크박스(Checkbox)는 다중 선택이 가능합니다. 이것이 뒤에 설명할 라디오 버튼(Radio Button)과 다른 점이죠.
체크박스(Checkbox)의 크기는 앞에서 다룬 텍스트나 암호처럼 그 크기를 지정할 수가 없습니다.
name - 이름입니다. 담배를 좋아하는 아버지가 아기를 낳았는데 첫째는 한갑, 둘째는 두갑... 막내는 보루 라구 이름을 짓듯이 앞에 네모난 체크박스 달고 다니는 이것도 이름을 줍니다.
value - 서버로 보내거나 실질적인 연산을 할 경우 사용되는 값입니다. 앞에서 Submit, Reset 버튼에도 value가 있었는데 버튼에 나타나는 텍스트를 나타냈었습니다.
* 체크박스에서는 각 value값을 다 다르게 줘야합니다.
checked - Default로 체크되게 하고 싶을 경우 사용합니다. 밑의 예제에서 차가 젤 비싼 것 같아서 거기다가 기본으로 체크해 뒀습니다.

<html>
<head>
<title> 체크 박스 </title>
</head>
<body>
<font size="2">
당신이 좋아하는 음식을 모두 선택하세요?<p>
<form action="hahaha.cgi" method="post">
<input type="checkbox" name="food" value="apple">
사과 
<input type="checkbox" name="food" value="banana">
바나나  
<input type="checkbox" name="food" value="orange">
오렌지 
<input type="checkbox" name="food" value="pizza">
피자
<p>
당신이 받고 싶은 선물을 모두 선택하세요?<p>
<input type="checkbox" name="present" value="doll">
인형 
<input type="checkbox" name="present" value="car" checked>
자동차 
<input type="checkbox" name="present" value="computer">
컴퓨터
<p>
음.. 이제 서버로 자료를 보낼까요??<p>
<input type="submit" value="보내 버려^^*">
   
<input type="reset" value="다시 골라???">
</form>
</font>
</body>
</html>

당신이 좋아하는 음식을 모두 선택하세요?

그런데 보니까 위에 보면 체크박스가 7개 있는데, 이름은 딸랑 두 개네요. 체크될 그룹마다 하나의 이름으로 주어야 합니다. 항목에 따라 적당히 이름을 주면 됩니다.

8) 라디오 버튼(Radio Button)

라디오 버튼은 주로 투표할 경우 많이 사용됩니다. 대부분 설명이 체크박스와 비슷합니다.

라이오 버튼은 체크박스(Checkbox)와는 달리 딱~ 한 개만 선택할 수 있습니다. 한 개라 함은 name이 같은 것 중 하나만 선택할 수 있다는 것을 의미합니다. 이제 같은 name을 여러 개의 체크박스나 라디오 버튼에 주는 이유를 좀 아시겠죠?
라디오 버튼 역시 체크박스처럼 크기를 앞에서 다룬 텍스트나 암호처럼 그 크기를 지정할 수가 없습니다.
name - 이름입니다. 체크박스와 설명이 동일합니다.
value - 체크박스와 동일합니다.
checked - 체크박스와 마찬가지입니다.
그런데 체크박스에서는 여러 개에 Default로 Checked라는 옵션을 줄 수 있지만 라디오 버튼에서는 한 개만 지정하세요. 두 세 개 지정해도 첨에는 지정을 될런지도 모릅니다. 그런데 의미가 없습니다.

그럼 위의 예를 라디오 버튼으로 바꿔볼까요?

<html>
<head>
<title> 체크 박스 </title>
</head>
<body>
<font size="2">
당신이 좋아하는 음식을 모두 선택하세요?<p>
<form action="hahaha.cgi" method="post">
<input type="radio" name="food" value="apple">
사과 
<input type="radio" name="food" value="banana">
바나나  
<input type="radio" name="food" value="orange">
오렌지 
<input type="radio" name="food" value="pizza">
피자
<p>
당신이 받고 싶은 선물을 모두 선택하세요?<p>
<input type="radio" name="present" value="doll">
인형 
<input type="radio" name="present" value="car" checked>
자동차 
<input type="radio" name="present" value="computer">
컴퓨터
<p>
음.. 이제 서버로 자료를 보낼까요??<p>
<input type="submit" value="보내 버려^^*">
   
<input type="reset" value="다시 골라???">
</form>
</font>
</body>
</html>

당신이 좋아하는 음식을 모두 선택하세요?

사과 바나나 오렌지 피자

당신이 받고 싶은 선물을 모두 선택하세요?

인형 자동차 컴퓨터

음.. 이제 서버로 자료를 보낼까요??

체크박스나 라디오 버튼이 어떻게 사용되는지 이해가 가죠?

9) 선택목록(List Box or Drop Down List Box)

리스트 박스나 드롭다운 리스트 박스에 대한 내용입니다.

<SELECTname="이름" size="n" multiple> <OPTION value="값"> 항목 1
...
<OPTION value="값"> 항목 n
</SELECT>

size와 multiple을 생략하고 SELECT Tag에 name만 주면 드롭다운 리스트 박스가 됩니다.
size="n" - 리스트 박스에서 화면에 보일 항목의 갯수를 의미합니다. 물론 "n" 보다 많은 항목이 들어있다면 스크롤 바가 생기게 됩니다.
multiple - 리스트 박스에서 한번에 여러 개의 목록을 선택할 수 있게 하는 옵션입니다. Ctrl 키를 누른 상태에서 마우스로 콕콕 누르면 선택이 되지요. 아니면 Shift 키를 누른 상태에서 선택을 할 수도 있습니다.
<SELECT> ...</SELECT> tag 사이에는 항상 하나 이상의 <OPTION> Tag가 들어가야 합니다.
<OPTION value="값"> 항목 - value는 서버로 넘길 값을 의미하고 항목은 리스트 박스나 드롭다운 리스트 박스에 나타날 목록(항목)을 의미합니다.

<html>
<head>
<title> 드롭다운 리스트 박스 </title>
</head>
<body>
<font size="2">
드롭다운 리스트 박스입니다. 한 개만 선택이 가능합니다.
리스트를 클릭하면 목록이 나타납니다.<p>
<form action="list.cgi" method="post">
<select name="fruit">
<option value="apple"> 사과
<option value="banana"> 바나나
<option value="orange"> 오렌지
</select>
<p>
</form>
</font>
</body>

드롭다운 리스트 박스입니다. 한 개만 선택이 가능합니다. 리스트를 클릭하면 목록이 나타납니다.

<html>
<head>
<title> 리스트 박스 </title>
</head>
<body>
<font size="2">
먹고 싶은 과일을 하나만 선택하세요.<p>
<form action="list.cgi" method="post">
<select name="fruit" size="3">
<option value="apple"> 사과
<option value="banana"> 바나나
<option value="melon"> 메론
<option value="watermelon"> 수박
<option value="orange"> 오렌지
<option value="strawberry"> 오렌지
</select>
<p>
</form>
</font>
</body>

먹고 싶은 과일을 하나만 선택하세요.

<html>
<head>
<title> 리스트 박스 </title>
</head>
<body>
<font size="2">
먹고 싶은 과일을 전부 다 선택하세요.<p>
<form action="list.cgi" method="post">
<select name="fruit" size="3" multiple>
<option value="apple"> 사과
<option value="banana"> 바나나
<option value="melon"> 메론
<option value="watermelon"> 수박
<option value="orange"> 오렌지
<option value="strawberry"> 오렌지
</select>
<p>
</form>
</font>
</body>

먹고 싶은 과일을 전부 다 선택하세요.

저작자표시 비영리 변경금지

'공부 > HTML CSS' 카테고리의 다른 글

테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0)	2011.08.19
html 색상코드 표 (0)	2011.08.08
HTML TABLE 총정리 (0)	2011.06.13

테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기

공부/HTML CSS2011. 8. 19. 13:48

뷰어
댓글로
이전글
다음글

게시판이나 리스트를 보여 줄때 텍스트가 너무 길어지면 보기 흉한 경우가 있다.

이때는 대부분 ASP나 PHP를 이용해서 (스크립트를 이용해서) 잘라주고 끝에 ... 을 부쳐주는 경우가 있다.

게시판이나 메인페이지에서 공지사항을 보여 줄때 두줄이상이면 디자인이 깨져서 보기 흉하다.

이때 사용할 수 있는 것이 다음 방법입니다.

<tr>

</tr>

</table>

위처럼 text-overflow 의 ellipsis 를 사용하면 되는데 이는 overflow 와 항상 같이 사용해야 하며 <nobr>을 반드시 사용해야합니다.

table 의 TABLE-layout:fixed 도 반드시 있어야 합니다.

그리고 table과 td도 각각 width를 지정해 주는것이 좋습니다.

단 이 방법은 익스플로어 6+에서만 가능합니다. -_-;

Firefox에서 사용하면 ... 은 나오지 않습니다.

문자열이 길은데 ... 으로 자르지 않고 줄을 넘기려면

<tr>

</tr>

</table>

이것도 익스플로어 6+에서만 가능합니다.

저작자표시 비영리 변경금지

'공부 > HTML CSS' 카테고리의 다른 글

마우스 대면 미리보기(툴팁) (1)	2011.12.19
html 색상코드 표 (0)	2011.08.08
HTML TABLE 총정리 (0)	2011.06.13

html 색상코드 표

공부/HTML CSS2011. 8. 8. 16:32

뷰어
댓글로
이전글
다음글

원하는 색깔을 드래그해서 복사하십시오.
#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

#FFB6C1	#FFBBC6	#FFC0CB	#FFC5D0	#FFCAD5	#FFCFDA	#FFD4DF	#FFD9E4	#FFDEE9	#FFE3EE
#FFAAAF	#FFB4B9	#FFBEC3	#FFC8CD	#FFD2D7	#FFDCE1	#FFE1E6	#FFE6EB	#FFEBF0	#FFF0F5
#FF9E9B	#FFA8A5	#FFB2AF	#FFBCB9	#FFC6C3	#FFD0CD	#FFD5D2	#FFDAD7	#FFDFDC	#FFE4E1
#FF7A85	#FF848F	#FF8E99	#FF98A3	#FFA2AD	#FFACB7	#FFB1BC	#FFB6C1	#FFBBC6	#FFC0CB
#FF5675	#FF607F	#FF6A89	#FF7493	#FF7E9D	#FF88A7	#FF92B1	#FF9CBB	#FFA6C5	#FFB0CF

#FF82FF	#FF8CFF	#FF96FF	#FFA0FF	#FFAAFF	#FFB4FF	#FFBEFF	#FFC8FF	#FFD2FF	#FFDCFF
#FF7DB4	#FF87BE	#FF91C8	#FF9BD2	#FFA5DC	#FFAFE6	#FFB4EB	#FFB9F0	#FFBEF5	#FFC3FA
#FF69B4	#FF73BE	#FF7DC8	#FF87D2	#FF91DC	#FF9BE6	#FFA5F0	#FFAAF5	#FFAFFA	#FFB4FF
#FF1493	#FF1E9D	#FF28A7	#FF32B1	#FF3CBB	#FF46C5	#FF50CF	#FF5AD9	#FF64E3	#FF6EED

#DB7093	#DB7A9D	#DB84A7	#E08EB1	#E598BB	#EAA2C5	#EAB1D4	#EFACCF	#F4BBDE	#F4B6D9
#D7567F	#DC6089	#E16A93	#E6749D	#EB7EA7	#F088B1	#F592BB	#FA9CC5	#FFA6CF	#FFB0D9
#C71585	#C71F8F	#C73399	#C73DA3	#CC47AD	#D151B7	#D65BC1	#E065CB	#EA6FD5	#F479DF

#CD1039	#CD1F48	#CD2E57	#CD3861	#CD426B	#D24C75	#D7567F	#DC6089	#E16A93	#E6749D
#B9062F	#B91A4D	#BE2457	#C32E61	#C8386B	#CD4275	#D24C7F	#D75689	#DC6093	#E16A9D

#FAEB78	#FAF082	#FAF58C	#FAFA96	#FAFAA0	#FAFAAA	#FAFAB4	#FAFABE	#FAFAD2	#FAFAD2
#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFFA78	#FFFA82	#FFFF8C	#FFFF96
#FFC81E	#FFD228	#FFD732	#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFF978
#FFB400	#FFBE0A	#FFC314	#FFC81E	#FFCD28	#FFD232	#FFD73C	#FFDC46	#FFE150	#FFE65A

#FDCD8C	#FDD296	#FDD7A0	#FDDCAA	#FDE1B4	#FDE6BE	#FDEBC8	#FDF5D2	#FDF5DC	#FDF5E6
#FAC87D	#FACD87	#FAD291	#FAD79B	#FADCA5	#FAE1AF	#FAE6B9	#FAEBC3	#FAEBCD	#FAEBD7
#FFA500	#FFAF0A	#FFB914	#FFC31E	#FFCD28	#FFD732	#FFDC37	#FFE13C	#FFE641	#FFEB46
#FF9100	#FF9B00	#FFA500	#FFAF00	#FFB900	#FFC300	#FFC800	#FFCD00	#FFD200	#FFD700
#FF8200	#FF8C0A	#FF9614	#FFA01E	#FFAA28	#FFB432	#FFB937	#FFBE3C	#FFC341	#FFC846

#FFA98F	#FFB399	#FFBDA3	#FFC7AD	#FFD1B7	#FFDBC1	#FFE0C6	#FFE5CB	#FFEAD0	#FFEFD5
#FFA374	#FFAD7E	#FFB788	#FFC192	#FFCB9C	#FFD0A1	#FFD5A6	#FFDAAB	#FFDFB0	#FFE4B5
#FF9473	#FF9E7D	#FFA887	#FFB291	#FFBC9B	#FFC6A5	#FFD0AF	#FFD0AF	#FFD5B4	#FFDAB9
#FF7F50	#FF895A	#FF9364	#FF9D6E	#FFA778	#FFB182	#FFBB8C	#FFC091	#FFC596	#FFCA9B

#CD853F	#CD8F49	#D29953	#D7A35D	#DCAD67	#E1B771	#E6C17B	#EBC680	#F0CB85	#F5D08A
#D2691E	#D27328	#D27D32	#D7873C	#DC9146	#E19B50	#E6A55A	#EBAA5F	#EBAF64	#F0B469
#AE5E1A	#B86824	#C2722E	#CC7C38	#D68642	#E0904C	#E59551	#EA9A56	#EF9F5B	#F4A460
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#957745	#9F814F	#A48654	#A98B59	#AE905E

#FF9696	#FFA0A0	#FFAAAA	#FFB4B4	#FFBEBE	#FFC8C8	#FFD2D2	#FFDCDC	#FFE6E6	#FFF0F0
#F08080	#F08A8A	#F09494	#F59E9E	#FAA8A8	#FAB2B2	#FAB7B7	#FABCBC	#FAC1C1	#FAC6C6
#F56E6E	#F57878	#F58282	#F58C8C	#F59696	#F5A0A0	#F5AAAA	#FAB4B4	#FABEBE	#FAC8C8
#F06464	#F06E6E	#F07878	#F08282	#F08C8C	#F09696	#F4A0A0	#F4AAAA	#F4B4B4	#FEBEBE

#FF0000	#FF3232	#FF4646	#FF5050	#FF5A5A	#FF6464	#FF6E6E	#FF7878	#FF8282	#FF8C8C
#EB0000	#EB3232	#EB4646	#EB5050	#EB5A5A	#EB6464	#F06E6E	#F57878	#FA8282	#FA8C8C
#CD0000	#CD3C3C	#CD4646	#CD5050	#D25A5A	#D76464	#DC6E6E	#E17878	#E68282	#EB8C8C

#CD5C5C	#CD6666	#CD7070	#CD7A7A	#D28484	#D78E8E	#DC9898	#E6A2A2	#EBACAC	#F0B6B6
#B90000	#B93232	#B93C3C	#B94646	#B95050	#BE5A5A	#C35F5F	#C86464	#CD6969	#D26E6E
#B22222	#B24040	#B24A4A	#B25454	#B75E5E	#BC6868	#C17272	#CB7776	#CB7C7C	#D08180
#A52A2A	#AA3E3E	#AF4848	#B45252	#BE5C5C	#C36666	#CD7070	#CD7A7A	#D28484	#D78E8E
#800000	#803232	#853C3C	#8F4646	#945050	#9E5A5A	#A36464	#AD6E6E	#B77878	#C18282

#CD853F	#CD8B45	#CD904A	#D2954F	#D29A54	#D79F59	#D7A45E	#E1A963	#E1AE68	#E6B36D
#DB631F	#E56D29	#E57733	#EA813D	#EF8B47	#EF904C	#F49551	#F49A56	#F49F5B	#F4A460
#D2691E	#D27328	#D77D32	#D7873C	#DC9146	#E19B50	#E6A055	#EBA55A	#F0AA5F	#F5AF64
#A0522D	#A05C37	#A06641	#A5704B	#AA7A55	#B4845F	#B98E69	#C39873	#CDA27D	#D7AC87
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#9A7745	#A4814F	#AE8B59	#B89563	#C29F6D

#DA70D6	#DF75DB	#E47AE0	#E97FE5	#EE84EA	#F389EF	#F88EF4	#FD93F9	#FF98FE	#FF9DFF
#BA55D3	#BF5AD8	#C45FDD	#C964E2	#CE69E7	#D36EEC	#D873F1	#DD78F6	#E27DFB	#E782FF
#9932CC	#9E37D1	#A33CD6	#A841DB	#AD46E0	#B24BE5	#B750EA	#BC55EF	#C15AF4	#C65FF9
#9400D3	#9905D8	#9E0ADD	#A30FE2	#A814E7	#AD19EC	#B21EF1	#B723F6	#BC28FB	#C12DFF

#942894	#9E329E	#A83CA8	#B246B2	#BC50BC	#C65AC6	#D064D0	#DA6EDA	#E478E4	#EE82EE
#8c008c	#960a96	#a014a0	#aa1eaa	#b428b4	#be32be	#c83cc8	#d246d2	#dc50dc	#e65ae6
#800080	#8a0a8a	#941494	#9e1e9e	#a828a8	#b232b2	#bc3cbc	#c646c6	#d050d0	#da5ada
#834683	#8d508d	#975a97	#a164a1	#ab6eab	#b578b5	#bf82bf	#c98cc9	#d396d3	#dda0dd

#828282	#8c8c8c	#969696	#a0a0a0	#aaaaaa	#b4b4b4	#bebebe	#c8c8c8	#d2d2d2	#dcdcdc
#000000	#282828	#323232	#3c3c3c	#464646	#505050	#5a5a5a	#646464	#6e6e6e	#787878

컬러 이름	16진수
red	#FF0000
crimson	#DC143C
firebrick	#B22222
maroon	#800000
darkred	#8B0000
brown	#A52A2A
sienna	#A0522D
saddlebrown	#8B4513
indianred	#CD5C5C
rosybrown	#BC8F8F
lightcoral	#F08080
salmon	#FA8072
darksalmon	#E9967A
coral	#FF7F50
tomato	#FF6347
sandybrown	#F4A460
lightsalmon	#FFA07A
peru	#CD853F
chocolate	#D2691E
orangered	#FF4500
orange	#FFA500
darkorange	#FF8C00
tan	#D2B48C
peachpuff	#FFDAB9
bisque	#FFE4C4
moccasin	#FFE4B5
navajowhite	#FFDEAD
wheat	#F5DEB3
burlywood	#DEB887
darkgoldenrod	#B8860B
goldenrod	#DAA520
gold	#FFD700
yellow	#FFFF00
lightgoldenrodyellow	#FAFAD2
palegoldenrod	#EEE8AA
khaki	#F0E68C
darkkhaki	#BDB76B
lawngreen	#7CFC00
greenyellow	#ADFF2F
chartreuse	#7FFF00
lime	#00FF00
limegreen	#32CD32
yellowgreen	#9ACD32
olive	#808000
olivedrab	#6B8E23
darkolivegreen	#556B2F
forestgreen	#228B22
darkgreen	#006400
green	#008000
seagreen	#2E8B57
mediumseagreen	#3CB371
darkseagreen	#8FBC8F
lightgreen	#90EE90
palegreen	#98FB98
springgreen	#00FF7F
mediumspringgreen	#00FA9A
teal	#008080
darkcyan	#008B8B
lightseagreen	#20B2AA
mediumaquamarine	#66CDAA
cadetblue	#5F9EA0
steelblue	#4682B4
aquamarine	#7FFFD4
powderblue	#B0E0E6
paleturquoise	#AFEEEE
lightblue	#ADD8E6
lightsteelblue	#B0C4DE
skyblue	#87CEEB
lightskyblue	#87CEFA
mediumturquoise	#48D1CC
turquoise	#40E0D0
darkturquoise	#00CED1
aqua	#00FFFF
cyan	#00FFFF
deepskyblue	#00BFFF
dodgerblue	#1E90FF
cornflowerblue	#6495ED
royalblue	#4169E1
blue	#0000FF
mediumblue	#0000CD
navy	#000080
darkblue	#00008B
midnightblue	#191970
darkslateblue	#483D8B
slateblue	#6A5ACD
mediumslateblue	#7B68EE
mediumpurple	#9370DB
darkorchid	#9932CC
darkviolet	#9400D3
blueviolet	#8A2BE2
mediumorchid	#BA55D3
plum	#DDA0DD
lavender	#E6E6FA
thistle	#D8BFD8
orchid	#DA70D6
violet	#EE82EE
indigo	#4B0082
darkmagenta	#8B008B
purple	#800080
mediumvioletred	#C71585
deeppink	#FF1493
fuchsia	#FF00FF
magenta	#FF00FF
hotpink	#FF69B4
palevioletred	#DB7093
lightpink	#FFB6C1
pink	#FFC0CB
mistyrose	#FFE4E1
blanchedalmond	#FFEBCD
lightyellow	#FFFFE0
cornsilk	#FFF8DC
antiquewhite	#FAEBD7
papayawhip	#FFEFD5
lemonchiffon	#FFFACD
beige	#F5F5DC
linen	#FAF0E6
oldlace	#FDF5E6
lightcyan	#E0FFFF
aliceblue	#F0F8FF
whitesmoke	#F5F5F5
lavenderblush	#FFF0F5
floralwhite	#FFFAF0
mintcream	#F5FFFA
ghostwhite	#F8F8FF
honeydew	#F0FFF0
seashell	#FFF5EE
ivory	#FFFFF0
azure	#F0FFFF
snow	#FFFAFA
white	#FFFFFF
gainsboro	#DCDCDC
lightgrey	#D3D3D3
silver	#C0C0C0
darkgray	#A9A9A9
lightslategray	#778899
slategray	#708090
gray	#808080
dimgray	#696969
darkslategray	#2F4F4F
black	#000000

#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

색상코드표

snow #FFFAFA

ghostwhite #F8F8FF

whitesmoke #F5F5F5

gainsboro #DCDCDC

floralwhite #FFFAF0

oldlace #FDF5E6

linen #FAF0E6

antiquewhite #FAEBD7

papayawhip #FFEFD5

blanchedalmond #FFEBCD

bisque #FFE4C4

peachpuff #FFDAB9

navajowhite #FFDEAD

moccasin #FFE4B5

cornsilk #FFF8DC

ivory #FFFFF0

lemonchiffon #FFFACD

seashell #FFF5EE

honeydew #F0FFF0

mintcream #F5FFFA

azure #F0FFFF

aliceblue #F0F8FF

lavender #E6E6FA

lavenderblush #FFF0F5

mistyrose #FFE4E1

white #FFFFFF

black #000000

darkslategrey #2F4F4F

dimgrey #696969

slategrey #708090

lightslategrey #778899

grey #BEBEBE

lightgrey #D3D3D3

midnightblue #191970

navyblue #000080

navy #000080

cornflowerblue #6495ED

darkslateblue #483D8B

slateblue #6A5ACD

mediumslateblue #7B68EE

lightslateblue #8470FF

mediumblue #0000CD

royalblue #4169E1

blue #0000FF

dodgerblue #1E90FF

deepskyblue #00BFFF

skyblue #87CEEB

lightskyblue #87CEFA

steelblue #4682B4

lightsteelblue #B0C4DE

lightblue #ADD8E6

powderblue #B0E0E6

paleturquoise #AFEEEE

darkturquoise #00CED1

mediumturquoise #48D1CC

turquoise #40E0D0

cyan #00FFFF

lightcyan #E0FFFF

cadetblue #5F9EA0

mediumaquamarine #66CDAA

aquamarine #7FFFD4

darkgreen #006400

darkolivegreen #556B2F

darkseagreen #8FBC8F

seagreen #2E8B57

mediumseagreen #3CB371

lightseagreen #20B2AA

palegreen #98FB98

springgreen #00FF7F

lawngreen #7CFC00

green #00FF00

chartreuse #7FFF00

mediumspringgreen #00FA9A

greenyellow #ADFF2F

limegreen #32CD32

yellowgreen #9ACD32

forestgreen #228B22

olivedrab #6B8E23

darkkhaki #BDB76B

khaki #F0E68C

palegoldenrod #EEE8AA

lightgoldenrodyellow #FAFAD2

lightyellow #FFFFE0

yellow #FFFF00

gold #FFD700

lightgoldenrod #EEDD82

goldenrod #DAA520

darkgoldenrod #B8860B

rosybrown #BC8F8F

indianred #CD5C5C

saddlebrown #8B4513

sienna #A0522D

peru #CD853F

burlywood #DEB887

beige #F5F5DC

wheat #F5DEB3

sandybrown #F4A460

tan #D2B48C

chocolate #D2691E

firebrick #B22222

brown #A52A2A

darksalmon #E9967A

salmon #FA8072

lightsalmon #FFA07A

orange #FFA500

darkorange #FF8C00

coral #FF7F50

lightcoral #F08080

tomato #FF6347

orangered #FF4500

red #FF0000

hotpink #FF69B4

deeppink #FF1493

pink #FFC0CB

lightpink #FFB6C1

palevioletred #DB7093

maroon #B03060

mediumvioletred #C71585

violetred #D02090

magenta #FF00FF

violet #EE82EE

plum #DDA0DD

orchid #DA70D6

mediumorchid #BA55D3

darkorchid #9932CC

darkviolet #9400D3

blueviolet #8A2BE2

purple #A020F0

mediumpurple #9370DB

thistle #D8BFD8

snow1 #FFFAFA

snow2 #EEE9E9

snow3 #CDC9C9

snow4 #8B8989

seashell1 #FFF5EE

seashell2 #EEE5DE

seashell3 #CDC5BF

seashell4 #8B8682

AntiqueWhite1 #FFEFDB

AntiqueWhite2 #EEDFCC

AntiqueWhite3 #CDC0B0

AntiqueWhite4 #8B8378

bisque1 #FFE4C4

bisque2 #EED5B7

bisque3 #CDB79E

bisque4 #8B7D6B

PeachPuff1 #FFDAB9

PeachPuff2 #EECBAD

PeachPuff3 #CDAF95

PeachPuff4 #8B7765

NavajoWhite1 #FFDEAD

NavajoWhite2 #EECFA1

NavajoWhite3 #CDB38B

NavajoWhite4 #8B795E

LemonChiffon1 #FFFACD

LemonChiffon2 #EEE9BF

LemonChiffon3 #CDC9A5

LemonChiffon4 #8B8970

cornsilk1 #FFF8DC

cornsilk2 #EEE8CD

cornsilk3 #CDC8B1

cornsilk4 #8B8878

ivory1 #FFFFF0

ivory2 #EEEEE0

ivory3 #CDCDC1

ivory4 #8B8B83

honeydew1 #F0FFF0

honeydew2 #E0EEE0

honeydew3 #C1CDC1

honeydew4 #838B83

LavenderBlush1 #FFF0F5

LavenderBlush2 #EEE0E5

LavenderBlush3 #CDC1C5

LavenderBlush4 #8B8386

MistyRose1 #FFE4E1

MistyRose2 #EED5D2

MistyRose3 #CDB7B5

MistyRose4 #8B7D7B

azure1 #F0FFFF

azure2 #E0EEEE

azure3 #C1CDCD

azure4 #838B8B

SlateBlue1 #836FFF

SlateBlue2 #7A67EE

SlateBlue3 #6959CD

SlateBlue4 #473C8B

RoyalBlue1 #4876FF

RoyalBlue2 #436EEE

RoyalBlue3 #3A5FCD

RoyalBlue4 #27408B

blue1 #0000FF

blue2 #0000EE

blue3 #0000CD

blue4 #00008B

DodgerBlue1 #1E90FF

DodgerBlue2 #1C86EE

DodgerBlue3 #1874CD

DodgerBlue4 #104E8B

SteelBlue1 #63B8FF

SteelBlue2 #5CACEE

SteelBlue3 #4F94CD

SteelBlue4 #36648B

DeepSkyBlue1 #00BFFF

DeepSkyBlue2 #00B2EE

DeepSkyBlue3 #009ACD

DeepSkyBlue4 #00688B

SkyBlue1 #87CEFF

SkyBlue2 #7EC0EE

SkyBlue3 #6CA6CD

SkyBlue4 #4A708B

LightSkyBlue1 #B0E2FF

LightSkyBlue2 #A4D3EE

LightSkyBlue3 #8DB6CD

LightSkyBlue4 #607B8B

SlateGray1 #C6E2FF

SlateGray2 #B9D3EE

SlateGray3 #9FB6CD

SlateGray4 #6C7B8B

LightSteelBlue1 #CAE1FF

LightSteelBlue2 #BCD2EE

LightSteelBlue3 #A2B5CD

LightSteelBlue4 #6E7B8B

LightBlue1 #BFEFFF

LightBlue2 #B2DFEE

LightBlue3 #9AC0CD

LightBlue4 #68838B

LightCyan1 #E0FFFF

LightCyan2 #D1EEEE

LightCyan3 #B4CDCD

LightCyan4 #7A8B8B

PaleTurquoise1 #BBFFFF

PaleTurquoise2 #AEEEEE

PaleTurquoise3 #96CDCD

PaleTurquoise4 #668B8B

CadetBlue1 #98F5FF

CadetBlue2 #8EE5EE

CadetBlue3 #7AC5CD

CadetBlue4 #53868B

turquoise1 #00F5FF

turquoise2 #00E5EE

turquoise3 #00C5CD

turquoise4 #00868B

cyan1 #00FFFF

cyan2 #00EEEE

cyan3 #00CDCD

cyan4 #008B8B

DarkSlateGray1 #97FFFF

DarkSlateGray2 #8DEEEE

DarkSlateGray3 #79CDCD

DarkSlateGray4 #528B8B

aquamarine1 #7FFFD4

aquamarine2 #76EEC6

aquamarine3 #66CDAA

aquamarine4 #458B74

DarkSeaGreen1 #C1FFC1

DarkSeaGreen2 #B4EEB4

DarkSeaGreen3 #9BCD9B

DarkSeaGreen4 #698B69

SeaGreen1 #54FF9F

SeaGreen2 #4EEE94

SeaGreen3 #43CD80

SeaGreen4 #2E8B57

PaleGreen1 #9AFF9A

PaleGreen2 #90EE90

PaleGreen3 #7CCD7C

PaleGreen4 #548B54

SpringGreen1 #00FF7F

SpringGreen2 #00EE76

SpringGreen3 #00CD66

SpringGreen4 #008B45

green1 #00FF00

green2 #00EE00

green3 #00CD00

green4 #008B00

chartreuse1 #7FFF00

chartreuse2 #76EE00

chartreuse3 #66CD00

chartreuse4 #458B00

OliveDrab1 #C0FF3E

OliveDrab2 #B3EE3A

OliveDrab3 #9ACD32

OliveDrab4 #698B22

DarkOliveGreen1 #CAFF70

DarkOliveGreen2 #BCEE68

DarkOliveGreen3 #A2CD5A

DarkOliveGreen4 #6E8B3D

khaki1 #FFF68F

khaki2 #EEE685

khaki3 #CDC673

khaki4 #8B864E

LightGoldenrod1 #FFEC8B

LightGoldenrod2 #EEDC82

LightGoldenrod3 #CDBE70

LightGoldenrod4 #8B814C

LightYellow1 #FFFFE0

LightYellow2 #EEEED1

LightYellow3 #CDCDB4

LightYellow4 #8B8B7A

yellow1 #FFFF00

yellow2 #EEEE00

yellow3 #CDCD00

yellow4 #8B8B00

gold1 #FFD700

gold2 #EEC900

gold3 #CDAD00

gold4 #8B7500

goldenrod1 #FFC125

goldenrod2 #EEB422

goldenrod3 #CD9B1D

goldenrod4 #8B6914

DarkGoldenrod1 #FFB90F

DarkGoldenrod2 #EEAD0E

DarkGoldenrod3 #CD950C

DarkGoldenrod4 #8B6508

RosyBrown1 #FFC1C1

RosyBrown2 #EEB4B4

RosyBrown3 #CD9B9B

RosyBrown4 #8B6969

IndianRed1 #FF6A6A

IndianRed2 #EE6363

IndianRed3 #CD5555

IndianRed4 #8B3A3A

sienna1 #FF8247

sienna2 #EE7942

sienna3 #CD6839

sienna4 #8B4726

burlywood1 #FFD39B

burlywood2 #EEC591

burlywood3 #CDAA7D

burlywood4 #8B7355

wheat1 #FFE7BA

wheat2 #EED8AE

wheat3 #CDBA96

wheat4 #8B7E66

tan1 #FFA54F

tan2 #EE9A49

tan3 #CD853F

tan4 #8B5A2B

chocolate1 #FF7F24

chocolate2 #EE7621

chocolate3 #CD661D

chocolate4 #8B4513

firebrick1 #FF3030

firebrick2 #EE2C2C

firebrick3 #CD2626

firebrick4 #8B1A1A

brown1 #FF4040

brown2 #EE3B3B

brown3 #CD3333

brown4 #8B2323

salmon1 #FF8C69

salmon2 #EE8262

salmon3 #CD7054

salmon4 #8B4C39

LightSalmon1 #FFA07A

LightSalmon2 #EE9572

LightSalmon3 #CD8162

LightSalmon4 #8B5742

orange1 #FFA500

orange2 #EE9A00

orange3 #CD8500

orange4 #8B5A00

DarkOrange1 #FF7F00

DarkOrange2 #EE7600

DarkOrange3 #CD6600

DarkOrange4 #8B4500

coral1 #FF7256

coral2 #EE6A50

coral3 #CD5B45

coral4 #8B3E2F

tomato1 #FF6347

tomato2 #EE5C42

tomato3 #CD4F39

tomato4 #8B3626

OrangeRed1 #FF4500

OrangeRed2 #EE4000

OrangeRed3 #CD3700

OrangeRed4 #8B2500

red1 #FF0000

red2 #EE0000

red3 #CD0000

red4 #8B0000

DeepPink1 #FF1493

DeepPink2 #EE1289

DeepPink3 #CD1076

DeepPink4 #8B0A50

HotPink1 #FF6EB4

HotPink2 #EE6AA7

HotPink3 #CD6090

HotPink4 #8B3A62

pink1 #FFB5C5

pink2 #EEA9B8

pink3 #CD919E

pink4 #8B636C

LightPink1 #FFAEB9

LightPink2 #EEA2AD

LightPink3 #CD8C95

LightPink4 #8B5F65

PaleVioletRed1 #FF82AB

PaleVioletRed2 #EE799F

PaleVioletRed3 #CD6889

PaleVioletRed4 #8B475D

maroon1 #FF34B3

maroon2 #EE30A7

maroon3 #CD2990

maroon4 #8B1C62

VioletRed1 #FF3E96

VioletRed2 #EE3A8C

VioletRed3 #CD3278

VioletRed4 #8B2252

magenta1 #FF00FF

magenta2 #EE00EE

magenta3 #CD00CD

magenta4 #8B008B

orchid1 #FF83FA

orchid2 #EE7AE9

orchid3 #CD69C9

orchid4 #8B4789

plum1 #FFBBFF

plum2 #EEAEEE

plum3 #CD96CD

plum4 #8B668B

MediumOrchid1 #E066FF

MediumOrchid2 #D15FEE

MediumOrchid3 #B452CD

MediumOrchid4 #7A378B

DarkOrchid1 #BF3EFF

DarkOrchid2 #B23AEE

DarkOrchid3 #9A32CD

DarkOrchid4 #68228B

purple1 #9B30FF

purple2 #912CEE

purple3 #7D26CD

purple4 #551A8B

MediumPurple1 #AB82FF

MediumPurple2 #9F79EE

MediumPurple3 #8968CD

MediumPurple4 #5D478B

thistle1 #FFE1FF

thistle2 #EED2EE

thistle3 #CDB5CD

thistle4 #8B7B8B

grey0 #000000

grey1 #030303

grey2 #050505

grey3 #080808

grey4 #0A0A0A

grey5 #0D0D0D

grey6 #0F0F0F

grey7 #121212

grey8 #141414

grey9 #171717

grey10 #1A1A1A

grey11 #1C1C1C

grey12 #1F1F1F

grey13 #212121

grey14 #242424

grey15 #262626

grey16 #292929

grey17 #2B2B2B

grey18 #2E2E2E

grey19 #303030

grey20 #333333

grey21 #363636

grey22 #383838

grey23 #3B3B3B

grey24 #3D3D3D

grey25 #404040

grey26 #424242

grey27 #454545

grey28 #474747

grey29 #4A4A4A

grey30 #4D4D4D

grey31 #4F4F4F

grey32 #525252

grey33 #545454

grey34 #575757

grey35 #595959

grey36 #5C5C5C

grey37 #5E5E5E

grey38 #616161

grey39 #636363

grey40 #666666

grey41 #696969

grey42 #6B6B6B

grey43 #6E6E6E

grey44 #707070

grey45 #737373

grey46 #757575

grey47 #787878

grey48 #7A7A7A

grey49 #7D7D7D

grey50 #7F7F7F

grey51 #828282

grey52 #858585

grey53 #878787

grey54 #8A8A8A

grey55 #8C8C8C

grey56 #8F8F8F

grey57 #919191

grey58 #949494

grey59 #969696

grey60 #999999

grey61 #9C9C9C

grey62 #9E9E9E

grey63 #A1A1A1

grey64 #A3A3A3

grey65 #A6A6A6

grey66 #A8A8A8

grey67 #ABABAB

grey68 #ADADAD

grey69 #B0B0B0

grey70 #B3B3B3

grey71 #B5B5B5

grey72 #B8B8B8

grey73 #BABABA

grey74 #BDBDBD

grey75 #BFBFBF

grey76 #C2C2C2

grey77 #C4C4C4

grey78 #C7C7C7

grey79 #C9C9C9

grey80 #CCCCCC

grey81 #CFCFCF

grey82 #D1D1D1

grey83 #D4D4D4

grey84 #D6D6D6

grey85 #D9D9D9

grey86 #DBDBDB

grey87 #DEDEDE

grey88 #E0E0E0

grey89 #E3E3E3

grey90 #E5E5E5

grey91 #E8E8E8

grey92 #EBEBEB

grey93 #EDEDED

grey94 #F0F0F0

grey95 #F2F2F2

grey96 #F5F5F5

grey97 #F7F7F7

grey98 #FAFAFA

grey99 #FCFCFC

grey100 #FFFFFF

저작자표시 비영리 변경금지

'공부 > HTML CSS' 카테고리의 다른 글

마우스 대면 미리보기(툴팁) (1)	2011.12.19
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0)	2011.08.19
HTML TABLE 총정리 (0)	2011.06.13

HTML TABLE 총정리

공부/HTML CSS2011. 6. 13. 17:49

뷰어
댓글로
이전글
다음글

출처 : 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>

결과:

style="border: #000000 1px solid"
a	b	c
x	y	z

BORDER="0"
a	b	c
x	y	z

BORDER="1"
a	b	c
x	y	z

BORDER="4"
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>

결과:

WIDTH="500" BGCOLOR="#999999"
a	b	c
x	y	z

WIDTH=80% (500px의 80%)
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" >
<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>

결과:

FRAME 속성을 사용하지 않을 때
a	b	c
x	y	z

FRAME=VOID
a	b	c
x	y	z

FRAME=BORDER
a	b	c
x	y	z

FRAME=ABOVE
a	b	c
x	y	z

FRAME=BELOW
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>

결과:

FRAME=HSIDES
a	b	c
x	y	z

FRAME=LHS
a	b	c
x	y	z

FRAME=RHS
a	b	c
x	y	z

FRAME=VSIDES
a	b	c
x	y	z

FRAME=BOX
a	b	c
x	y	z

<TR>

△top

▣원어 : 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 태그가 삽입이 될 때마다 행이 바뀝니다.

TR 태그의 정렬방식
정렬방식
LEFT, TOP	LEFT, MIDDLE	LEFT, BOTTOM
CENTER, TOP	CENTER, MIDDLE	CENTER, BOTTOM
RIGHT, TOP	RIGHT, MIDDLE	RIGHT, BOTTOM

<TD>

△top

▣원어 : 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 이상

예제:

결과:

셀의 배경으로 그림
a	b	c

셀의 배경으로 색
왼쪽 위 정렬	가운데 정렬	오른쪽 아래 정렬
a	b	c

△top

▣원어 : 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는 본문에 해당하는 중간에 나타납니다.

TBODY 태그
THEAD	THEAD	THEAD
TFOOT	TFOOT	TFOOT
TBODY	TBODY	TBODY
TBODY
TBODY
TBODY	TBODY	TBODY

<TH>

△top

▣원어 : 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 이상

예제:

결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.

TH 태그와 TD 태그 비교
TH	TH	TH
TD	TD	TD
TD	TD	TD
TD	TD	TD

△top

▣원어 : 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 태그의 정렬 방식입니다.

CAPTION
TOP	caption 정렬 방식

CAPTION
BOTTOM	caption 정렬 방식

CAPTION
LEFT	caption 정렬 방식

CAPTION
RIGHT	caption 정렬 방식

△top

▣원어 : 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>

결과:

COLGROUP 태그
Align="Left"	Align="Center"	Align="Right"
a	b	c
a	b	c
a	b	c

<COL>

△top

▣원어 : 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>

결과를 보면 다음과 같습니다...^^

COL 태그
ALIGN="RIGHT"	ALIGN="CENTER"

'공부 > HTML CSS' 카테고리의 다른 글

마우스 대면 미리보기(툴팁) (1)	2011.12.19
테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기 (0)	2011.08.19
html 색상코드 표 (0)	2011.08.08

‹ Prev 1 Next ›

최근에 올라온 글

최근에 달린 댓글

공지사항

글 보관함

링크

total :

today :

yesterday :

finerss's world!

마우스 대면 미리보기(툴팁)

'공부 > HTML CSS' 카테고리의 다른 글

테이블/DIV태그에서 글자길어지면 자동으로 잘라주고 ...넣기

'공부 > HTML CSS' 카테고리의 다른 글

html 색상코드 표

'공부 > HTML CSS' 카테고리의 다른 글

HTML TABLE 총정리

'공부 > HTML CSS' 카테고리의 다른 글

최근에 올라온 글

최근에 달린 댓글

공지사항

글 보관함

링크

티스토리툴바