2010.02.08 16:17 Programming/CSS

CSS 버튼


http://stopdesign.com/eg/buttons/3.0/code.html#

 

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

때에 따라 마우스 커서 모양을 변경할 수 있다면 훨씬 더 좋은 UI를 제공할 수도 있다. 가령 예를 들어 도움말이란 메뉴에 사용자가 마우스를 갖다 댈 경우 마우스 커서가 물음표로 바뀐다면 훨씬 더 직관적일 것이다. 아래 있는 도움말 링크에 마우스를 갖다 대 보자.

 

도움말

이처럼 상황에 맞게 마우스 커서를 적절히 변경할 수 있다면 좀 더 친근한 UI를 제공할 수 있을 것이다. 변경할 수 있는 마우스 커서 종류는 다음과 같다. 효과를 보려면 아래 표의 각 셀에 마우스를 갖다 대 보자:


(hand)
모래시계
(wait)
물음표
(help)
이동표시
(move)
타겟모양
(crosshair)
위쪽 화살표
(n-resize)
오른쪽 화살표
(e-resize)
아래쪽 화살표
(s-resize)
왼쪽 화살표
(w-resize)

텍스트
 (text)

우측아래
(se-resize)
좌측아래
(sw-resize)
우측위
(ne-resize)
좌측위
(nw-resize)

 디폴트
(default)

 

사용 방법은 간단하다. 위에서 예로 든 도움말 링크의 예를 들어 보자. <a> 태그 안에 style:"cursor:help"를 삽입해주면 끝이다.

즉, 다음과 같이 해주면 된다 : <a href="http://korea.internet.com/" style="cursor:help">

 

위 표에 나와 있는 각각의 스타일은 다음과 같다:

style="cursor:hand"
style="cursor:wait"
style="cursor:help"
style="cursor:move"
style="cursor:crosshair"
style="cursor:n-resize"
style="cursor:e-resize"
style="cursor:s-resize"
style="cursor:w-resize"
style="cursor:se-resize"
style="cursor:sw-resize"
style="cursor:ne-resize"
style="cursor:nw-resize"

 

이 style이 적용될 수 있는 태그는 여러 가지가 있다. 그 중 다음과 같이 font나 td 태그에도 적용할 수 있다:

예) <FONT STYLE="CURSOR:HAND">폰트 내용</FONT>
예) <TD STYLE="CURSOR:WAIT">테이블 내용</FONT>

주의 : 이 style을 지원하는 브라우저에서만 사용할 수 있다.

 

# 익스 6.0버전이상 추가된 기능및 보충

 

마우스를 올려 놓으세요.

위의 예제를 구현하기 위한 소스를 보자 CSS의 Cuser Property를 hand로 선언을 함으로서 포인터가 예문위로 올라가게되면 마우스 포인터가 손모양으로 바뀌게 된다.

<p onmouseover="this.style.cursor='hand'">마우스를 올려 놓으세요</p>

이제 익스플로러에서 지원하는 커서의 다양한 종류에 대하여 보도록하자.
(표의 설명문구에 마우스를 올리면 예제를 볼 수 있다.)

all-scroll

[IE6+] 좌, 우측 스크롤이 가능할때 나타나는 커서

auto

브라우저의 기본 설정을 따름

col-resize

[IE6+] 테이블의 세로폭을 리사이즈 할때 나타나는 커서

row-resize

[IE6+] 테이블의 가로폭을 리사이즈 할때 나타나는 커서

crosshair

+ 모양의 커서

default

OS에서 설정한 마우스의 기본 커서

hand

링크나 개체를 이동할때 나타나는 손 모양의 커서

help

도움말 등을 나타 낼때 사용하는 커서

move

이동 가능함을 나타내는 + 자 모양의 화살표

no-drop

[IE6+] 접근 불가나 Drop 불가를 나타내는 커서

not-allowed

접근 불가, 허용불가를 나타내는 커서

pointer

[IE6+] Head 와 모양과 기능이 같음

progress

[IE6+] 화살표 + 모래시계 커서

wait

동작중임을 나타내는 모래시계 커서

text

가로 텍스트를 표시하는 I 자 모양의 커서

text

[IE6+] 세로 텍스트를 표시하는 ㅡ 자 모양의 커서

url(uri)

[IE6+] 다른서버의 커서를 사용할 수 있음

*-resize

다양한 리사이즈 지원의 커서 (아래쪽 표참고)

[표 - 리사이즈 별 커서]

n-resize s-resize ne-resize sw-resize
nw-resize se-resize e-resize w-resize

이제 서버에 미리 저장된 커서파일을 불러 커서를 표시 해보자.

<style> td.style.cursor = "url("커서의 URL")"; </style>

[Custom Cursor Sample]

위의 소스처럼 커서를 선언하게 되면 서버에 미리 저장해둔 다양한 커서를 불러 올수 있게 된다. 즉 Custom Cursor를 만들 수 있게 된다.

기사의 예제에서는 커서의 종류에 대해서 주로 다루었지만 이를 사이트 내에서 적절이 활용하다면 자신의 사이트만의 고유한 이미지를 가지는 마우스 포인터나, 로딩시 progress 속성을 이용하여 로딩시에만 나타나는 반짝 광고등으로 활용 할 수 있을 것이다.

출처 : Tong - pplstory님의 Html & Tag통

 

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

전통적으로 표를 많이 사용하는 한국의 문서 스타일 때문에, 웹페이지에도 테이블 태그를 이용한 표작업이 빈번한 편입니다. 다음은, HTML/CSS를 이용한 테이블(표)디자인에 대해 살펴봅니다. 

 

[ border="1"의 일반적인 테이블(표) ]

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999">

 

위와 같이, 테이블 테두리값 1px로 설정한다 하더라도 실제 웹브라우저 상에서는 테두리가 2px로 보입니다.

그러한 까닭은, 이 각각의 1px셀 테두리가 서로 만나면서 2px(1px+1px)이 되기 때문입니다.

아래 테이블에서와 같이 "셀 간격"을 띄워놓고 보면 그 이유를 좀 더 분명하게 이해할 수 있습니다.

 

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="1" cellspacing="5" cellpadding="3" bordercolor="#999999">

 

border-collapse

셀 및 테이블 테두리를 포개는 설정에 관한 TABLE태그에 대한 CSS입니다. 먼저, 적용된 모습을 살펴봅니다.

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;">

 

- separate : 테이블 전체의 외곽선과 각 셀의 외곽선을 각각 표시합니다. 
- collapse : 테이블 전체의 외곽 및, 각 셀의 외곽선을 경계에서 중복하여 표시합니다.

ex) TABLE { border-collapse: separate } 

 

위와 같이, 아주 간단하게, 1px 외곽선 테이블(표)를 만들 수 있습니다. 해당 CSSIE5이상부터 지원되는 기능이며, FireFox 2.0의 경우도 지원되고 있습니다. (단, border="1"이 아닌 경우, 즉 그 이상의 값을 설정한 경우, FireFox에서는 여유선이 표시됩니다)

참고)  너비나 형식이 다른 외곽선이 포개질 때는 다음과 같은 우선 순위를 가집니다.

border-style:hidden설정 외곽선이 최우선, 너비가 넓은 외곽선이 그 다음의 우선 순위를 가집니다.

너비가 같은 경우에는 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표기되며,

색상만 다른 경우에는 셀, 가로열, 가로열 그룹, 세로열, 세로열 그룹, 테이블 순서로 표시됩니다.

 

Rules

내부 셀간의 구분선을 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none">

 

none : 선없음

- groups : thead, tbody, tfoot, colgroup요소의 경계 표시

- rows : 가로열의 경계 표시

- cols : 세로열의 경계 표시

- all : 모든 경계 표시

 

Frame

외곽 테두리를 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none" frame="hsides">

 

- void : 테두리 없음

- above : 윗 부분만 테두리 표시

- below : 아래 부분만 테두리 표시

- hsides : 위, 아래 부분만 테두리 표시

- lhs : 왼쪽만 테두리 표시

- rhs : 오른쪽만 테두리 표시

- vsides : 좌/우 테두리만 표시

- box, border : 상하좌우 모든 테두리 표시

 

No Subject Date
1 http://www.naver.com 2006.11
2 http://kr.yahoo.com 2006.11

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides">

 

이상의 HTML 태그 속성과 CSS를 이용하면, 위와 같은 테이블(표)를 손쉽게 제작할 수 있습니다.

 

FireFox v2.0

위에서 잠깐 언급했듯이, FireFox(v2.0)의 경우, 이전의 Netscape에서 지원하지 않았던 border-collapse스타일을 지원하고 있습니다. 다만, 아래 그림에서와 같이 테두리의  border값을 2px이상으로 설정한 경우, 여유선이 표시되는 현상이 있습니다. 이 경우, 테이블 외곽 테두리를 모두 표기한 경우, 어긋나 보이게 됩니다. 그러나 border값이 1px인 경우에는 IE와 똑같은 스타일로 표시됩니다.

 

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides"> 

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows">

출처 : Tong - pplstory님의 Html & Tag통

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

테이블 가는선으로 만들기

 

border-collapse 속성을 적절히 부여하고 나서 보더컬러까지 설정하면 완벽한 가는선테이블이 됩니다.
style="border-collapse:collapse" bordercolor="#AE521C"

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

-_-

 

 

 

"<td>" 태그에 스크롤바를 만든다

<table border=0 width=0 height=0 cellspacing=0 cellpadding=0>
    <tr>
      <td width=200 height=100 valign="top">
        <!--width:스크롤박스의 너비, height:스크롤박스의 높이//-->
        <div style="overflow-y:scroll; width:200px; height:100px; padding:4px">
<font size=2>예쁘다 하는 이 없어 외로운 그대여 그대 슬픈가요<br>향기가 없어 외로운 그대여 그대 고독한가요<br>겉이 화려할수록 진실 매말라 있고<br>겉이 화려할수록 향기 간곳 없으니<br>향기 없는 꽃이여 그대...<br>네 진실은 은은함에 있어.. 부러움 한몸에 받을 수 있다오.</font>
        </div>
      </td>
    </tr>
  </table>

 

 

자동 복사하기

<script>
function setClipBoard(x)
{
 window.clipboardData.setData('Text', x);
 alert('복사되었습니다.');
}
</script>


<a href="javascript:setClipBoard('http://img75.com')">주소복사하기</a> // 복사될 TEXT를 미리 입력하여 놓습니다

 

 

스크롤바 스타일 골라쓰기.

 












  

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

2010.02.08 11:57 Programming/CSS

버튼 관련


align=absmiddle 위아래 가운데 정렬

<정렬된 화면>

 -   - 

<정렬 안된 화면>

 -   - 

'Programming > CSS' 카테고리의 다른 글

IE 6.0 에서 Png 파일 사용하기  (0) 2010.12.22
table-layout 속성  (0) 2010.11.14
CSS Style 적용 우선순위  (0) 2010.11.14
하이퍼링크 css  (0) 2010.02.23
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃  (0) 2010.02.17
CSS 버튼  (0) 2010.02.08
마우스 커서 모양 변경  (0) 2010.02.08
테이블(표) 꾸미기  (0) 2010.02.08
테이블 가는선, 스크롤바 색 넣기  (0) 2010.02.08
버튼 관련  (0) 2010.02.08
float 속성 지우기 - clear:both  (0) 2010.02.08
Posted by 홍상길 홍상길

블로그 이미지
홍상길

공지사항

Yesterday9
Today1
Total293,506

달력

 « |  » 2019.9
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

최근에 달린 댓글

글 보관함