IE10이 웹 표준을 지향함에 따라 기존에 사용하던 DX Filter란 놈을 지원 하지 않습니다.

기존에 사용하던 DX FIlter는 CSS3로 이용하여 개발 하도록 권장 하고 있습니다.

 

DX Filter

Standards-based Alternative

Alpha opacity
AlphaImageLoader <img> or background-image and related properties
Gradient background-image: linear-gradient()
DropShadow text-shadow or box-shadow
Matrix transform, transform-origin

 

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길

댓글을 달아 주세요


웹 개발자 에서 무지 짜증나는 일입니다.

IE 6이 나온지도 벌써 10년 가까이 되 가는데 아직까지 IE 6을 사용한다니...

현재 IE 9 Beta 까지 나온 상황입니다.

대형 포탈들도 IE 6 지원을 슬슬 종료 한다고 하네요.

그래도 웹 개발자 입장에서 안해줄수도 없는 노릇이고.

다행히 Png 파일을 사용할 방법이 있어 소개 합니다.(오래된 자료입니다.)

아래 코드는 <Head> 테그 안에 넣어주시면 됩니다.

<script language="javascript">

    <!--

        function setPng24(obj) {

            obj.width = obj.height = 1;

            obj.className = obj.className.replace(/\bpng24\b/i, '');

            obj.style.filter =

        "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + obj.src + "',sizingMethod='image');"

            obj.src = '';

            return '';

        }

    //-->

    </script>


<style type="text/css">

        .png24

        {

            tmp: expression(setPng24(this));

        }

</style>


다 넣으셨으면

이제 Img 테그 안에 CssClass 를 삽입해주시면 되겠네요.

<img alt="" src="Images/title_company.png" border="0" class="png24" />


보시는 데로 위에서 설정한 style 을 class로 추가 했습니다.

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길
 TAG IE 6 PNG

댓글을 달아 주세요

table-layout 속성

table-layout 속성값 fixed : 테이블의 너비를 고정하고 Overflow 되는 부분은 보이 않는다.

word-break:break-all; 속성 추가 지정시 Overflow 가 발생하면 줄 바꿈이 일어난다.

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길
 TAG table-layout

댓글을 달아 주세요

ID 속성 >>  CLASS 속성 >> 태그개별 속성

Ex ) #data >> .data

동일 ID 속성이 있을경우 중첩된 CSS 우선 적용

Ex ) #data .data01 >> #data

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길
 TAG CSS Style

댓글을 달아 주세요

출처 : http://www.soona.pe.kr/bbs/view.php?id=web20&no=7

방법1
        /* 보통 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:link {text-decoration:none;color:#FF0000;}
        /* 방문 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:visited {text-decoration:none;color:#FF0000;}
        /* 롤오버 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:hover {text-decoration:underline;color:#3333CC;}
        /* 활성 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:active {text-decoration:underline;color:#3333CC;}

방법2
          /* 보통 상태와 방문 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:link,a:visited {text-decoration:none;color:#FF0000;}

        /* 롤오버 상태와 활성 상태의 하이퍼링크 텍스트 CSS 선언 */
        a:hover,a:active {text-decoration:underline;color:#3333CC;}

방법 3
        /* a 태그에 대한 CSS 선언 */
        a {text-decoration:none;color:#FF0099;}
        /* 롤오버 상태 하이퍼링크 텍스트 CSS 선언 */
        a:hover {text-decoration:underline;color:#3333CC;}

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길

댓글을 달아 주세요


웹사이트 및 사이트를 만든 회사의 정보를 제공하는 footer의 위치는 대부분 맨 아래쪽에 위치합니다.
사이트별 차이라면, 컨텐츠가 끝나는 부분에 위치하느냐 아니면 브라우저의 길이에 상관없이 항상 브라우저 하단에 위치하느냐 일 것입니다.

한게임재팬에서 제작하고 있는 A프로젝트의 경우, div 레이아웃이면서 footer는 항상 브라우저 하단에 위치하도록 결정되었습니다.
또한 header와 footer는 width 100% 이면서 백그라운드 색상이 있고, 컨텐츠 영역은 width 값이 고정되어 있습니다.

지금부터 브라우저 길이에 상관없이 footer를 항상 브라우저 하단에 위치시키는 방법에 대해 알아보도록 하겠습니다.

높이를 100%로 한다는 것의 % 의 기준은 상위 엘리먼트의 높이 값입니다.
그러므로 레이아웃 div 박스의 높이가 100%가 되려면, 상위 엘리먼트인 body 태그와 body의 상위 엘리먼트인 html 태그 역시 높이가 100%로 지정되어야 합니다.

html, body { height: 100%; margin: 0; padding: 0; } 
#header { height: 100px; background: #ddd; position: relative; z-index: 1; }
#content-box { min-height: 100%; margin: -100px 0 -50px; }
*html #content-box { height: 100%; }
#content { padding: 100px 0 50px; } #footer { height: 50px; background: #ddd; }
<div> header (height 100pixel) </div>
<div>
<div>
<p>contents</p>
<p>contents</p>
<p>contents</p>
</div>
</div>
<div> footer (height 50pixel) </div>

위 소스를 도식적으로 나타내면 다음과 같습니다.(그림 상의 색상은 표현을 위한 것으로 CSS 소스와는 관련없음)


content-box에는 컨텐츠 길이에 따라 height 값이 조절되도록 [min-height:100%] 속성을 부여합니다. 단, IE에서는 min-height 속성이 구현되지 않으나 height가 min-height 역할을 하므로 IE용 핵을 사용하여 height:100% 속성을 부여합니다.

header와 footer 은 width가 100% 이어야 하므로 content-box 안에 포함되지 않아야 하나 content-box에 height를 100%로 적용하였으므로, 브라우저의 높이는

  content-box 높이 100% + header 높이 100px + footer 높이 50px

를 더한 값이 되므로 브라우저 높이 100%에 150px 이 더해져 원치 않는 스크롤이 생기게 됩니다.
따라서, content-box 에는 [margin:-100px 0 -50px 0] 를, content 에는 [padding:100px 0 50px 0] 를, header에는 [position: relative; z-index: 1;] 값을 부여하여, header 는 content 위에 나타나고, 실제 컨텐츠는 header 아래쪽에서 시작되도록 합니다.
그리고, content 박스는 아래쪽에 50px 의 패딩값을 가지므로, 길이가 길어져 스크롤이 생기더라도 footer가 컨텐츠 내용을 덮는 경우는 없을 것입니다.

위 소스는 IE5.0 이상 7.0 이하 및 Firefox, opera 최신 버전에서 잘 동작합니다.

출처 : http://html.nhndesign.com/?mid=blog&category=91&document_srl=634

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

[WEB] Internet Explorer 10 DX Filter 사용 불가  (0) 2012.11.20
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
Posted by 홍상길 홍상길

댓글을 달아 주세요

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 홍상길 홍상길

댓글을 달아 주세요

이전버튼 1 2 이전버튼

블로그 이미지
홍상길

공지사항

Yesterday23
Today2
Total294,528

달력

 « |  » 2019.11
          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

최근에 달린 댓글

글 보관함