아래소스에서 그림파일 경로만 바꿔 주시면 되겠져!
<img src="그림파일경로" style="filter:alpha(style=2, opacity=100, finishopacity=0)">
저두 어디서 알게 된건데 유용한 방법같네여^^
ZeZe
설명을 덧붙이자면 style은 0~3까지 선택, 0은 단일, 1은 선형, 2는 타원형, 3은 직사각형 2001-05-20
07:51:12
ZeZe
그리고 opacity는 그림의 투명도로써 기본값은 100 이며 0~100까지 수치조절, 숫자가 작을수록 투명해집니다. 2001-05-20
07:52:25
ZeZe
그리고 마지막 finishopacity는 style 1,2,3 의 경우 불투명도에 영향을 주는 것으로써, 0~100 까지 수치조절이 가능합니다.
a href=#>링크</a> 이런 방식을 쓰면 사실.. 편리하죠.
근데.. 뒤로 버튼을 누르면 # 이전으로 가는거지.. 페이지의 뒤로 가는 것은
아닙니다.
그래서..
<p style="CURSOR: hand" onclick=window.location='http://www.yahoo.co.kr'>야후</p>
이건.. 링크하는 방법..
<p style="CURSOR: hand" onclick=window.open("http://www.yahoo.co.kr","newwin")>야후</p>
이건 새창을 띄우는 방법..
<p style="CURSOR: hand" onclick=top.타겟플레임명.location="http://www.yahoo.co.kr">야후</p>
이건 타겟을 지정하는 방법..
쉽죠? ^^; 여러군데 응용할수 있는 방법이니.. 자주 써먹어보세요~
참고로 위의 방법은 <p>테그뿐만 아니라.. 열의별 테그에 다 먹힙니다.
<td>, <tr>, <table>, <b> 아무 테그나 다 될껍니다. 공간을 차지하는 테그라면요..
- 출처: http://www.dhtmldot.com/
보통
body,table,td,tr,pre,....등으로
죽 나열해서 쓰는데..
* <=이놈은 만능지이않습니까..
해보니깐 되더군요 ㅡㅡ
넷스에선 모르지만 익스에선 됩니다.. 테스트는 5.5에서만 해봤습니다 ㅡㅡ
즉,,.
*{border:0;padding:0;margin:0;}
이런식으로하면 모든 엘리먼트에 적용됩니다..
ㅡㅡㅋ 허무함..
executeLibrary
218.153.173.204
블루바
* 대신에.. all 로 하셔도 되죠....
[스타일시트] 스타일 시트의 개념
태엽감는새 (Homepage) 2002-02-26 11:53:42, 조회 : 4,982, 추천 : 12
CSS 의 개요
Cascading Style Sheet (CSS), 즉 우리가 일반적으로 스타일시트라고 부르는 CSS는 HTML, 자바스크립트와 함께 사용되어 다이나믹 HTML (DHTML)을 구현하는 중요한 요소입니다.
기존의 HTML 은 문서의 구조나 레이아웃 보다는 단순한 정보의 전달에만 치중하였기 때문에 웹 문서를 워드와 같은 구조적 문서로 꾸미기에는 한계가 있었습니다.
최근의 대부분의 웹 문서에서는 좀더 효율적이고 구조적인 웹 문서를 만들기 위해 개발된 스타일 시트를 사용합니다.
이막스(EMACA)브라우저, 아레나(ARENA)등의 W3C 표준 브라우저에서만 볼 수 있었던 스타일 시트가 본격적으로 일반 사용자들에게 알려지게 된 것은 96년 중반 마이크로소프트사의 웹브라우저 "인터넷 익스플로러3.0"이 출시되면서부터입니다. 그 이후 계속해서 안정적인 규격을 만들어내면서 넷스케이프사도 넷스케이프 게뮤니케이터 4.0(이하 커뮤니케이터)에서 스타일 시트를 지원하기에 이르렀습니다.
기존의 브라우저는 사용자 환경에 많은 영향을 받았습니다. 하나의 텍스트 문서라도 사용자 브라우저의 기본 폰트 종류와 폰트 크기에 따라서 여러 가지 형태로 나타날 수 밖에 없었지만 사용자 환경에 영향을 받지 않고 HTML 파일을 화면에 보여줄 수 있는 '스타일 시트'를 이용하면 프로그래밍을 몰라도 간단한 HTML차원에서 응용할 수 있게 됩니다.
CSS에 대한 자세한 사항은 웹표준을 주관하고 있는 W3C (http://www.w3.org) 홈페이지를 참고 하세요
CSS 의 기본적 적용형태
스타일 시트의 선언은 의외로 간단합니다. 우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이죠. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하겠습니다. 우선 스타일 선언은 아래와 같이 합니다 ① <STYLE type="text/css">② <!--SELECTOR {PROPERTY:VALUE}② -->① </STYLE>
① <STYLE type="text/css"></STYLE> : 스타일의 형식을 css 로 한다는 뜻입니다. 최근의 브라우저들에서는 그냥 <STYLE>~</STYLE> 처럼 표기할 수도 있습니다② <!-- --> : 스타일 시트를 지원하지 않는 브라우저에서는 스타일을 불러오지 않습니다. 이것 역시 생략 해도 무방합니다
자스코의 스타일 시트
속성과 값은 (:) 으로 구분 해 주며, 여러가지 다양한 속성을 지정하고 싶을때는 (;)으로 구별하여 속성을 나열해 주면 간단하게 해결됩니다.
적용예
H1 {font -family:Arial;Color:red}
참고로 여기에서 줄수 있는 속성들로써는 font, text, image, color 등등이 있습니다.
넷스케이프와 익스플로러는 스타일 시트에 있어서 서로 다른 표준을 따르고 있기 때문에 같은 스타일 시트라 해도 화면에서의 Look & Feel이 조금씩 다릅니다.
스타일 시트를 선언하는 방법에는 3가지가 있습니다. Linking 스타일 시트 방법과 Embedding 스타일 시트법, Inline스타일 시트법이 그것입니다. 그 중 Linking 스타일 시트법에 대해서 먼저 알아 보겠습니다.
Linking 스타일 시트
이 방법은 스타일 선언을 한후 확장자가 css인 화일로 저장한 후 HTML화일에서 불러오는 방법입니다.우선 스타일 시트 화일을 작성한후 samp.css로 저장을 해보도록 하죠.
스타일시트 파일 (samp.css)
H1{font-family:Arial;font-size:40pt;Color:red}
P{font-size:12pt;line-height:20pt}
HTML 파일 (test.html)
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 웹사이트 내 지정된 모든 문서와 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>
예제보기
예제를 보면 굳이 별도로 글자크기나 색깔지정없이 H1태그 하나로 모든게 해결되는 모습을 보게 됩니다. 즉, 이 문서내에서 사용되는 모든 <H1> 태그와 <P> 태그에서는 동일한 효과를 볼 수 있습니다.
Embedding 스타일 시트
스타일 시트를 선언하는 방법 중 두번째 Embedding 스타일 시트법에 대해서 알아보겠습니다
이 방법은 Head 태그 안에서 style 선언을 해주어서 사용하는 방법입니다. 선언하는 방법은 아래와 같습니다
HTML 파일 (test_2.html)
사용방법
<HEAD>
<STYLE TYPE="text/css">
TAG1{PROPERTY:VALUE}
TAG2{PROPERTY:VALUE}
......
TAGn{PROPERTY:VALUE}
</STYLE>
</HEAD>
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1{font-family:Arial;font-size:40pt;
Color:red}
P{font-size:12pt;line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 하나의 문서안에서 지정된 모든 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>
예제보기
Inline 스타일 시트
마지막 방법으로 Inline 스타일 시트 방법입니다. 이 방법은 실제 홈페이지를 만드는 와중에 속성을 지정하고 싶을때 사용하는 방법이지만 권하고 싶지는 않습니다
사용법
<TAG STYLE="PROPERTY:VALUE">
HTML 파일 (test_3.html)
<HTML>
<BODY>
<H1 STYLE="font-family:Arial;font-size:40pt;Color:red">
오늘은 날씨가 좋습니다</H1>
<P STYLE= "font-size:12pt;line-height:20pt">
Inline 스타일 시트는 한 문서내에서 특정 태그의 한군데에만 원하는 효과를 보여주고자 할 때 사용합니다</P>
</BODY></HTML>
예제보기
한가지 주의할 점은, Inline은 <BLOCKQUOTE>또는 기타 몇몇 태그 외에는 상당히 작은 부분에만 영향을 미치기 때문에 지나치게 많이 사용하는 것은 좋지 않습니다. 나중에 변경해야 할 때 수작업을 많이 해야하기 때문입니다.
적당히 조금만 사용하되, 자주 사용해야 할 때는 스타일 시트를 링크하거나 스타일 시트 파일 자체를 HTML 파일 내에 삽입하는 방법을 사용하도록 하는 것이 좋습니다.
※ 스타일시트가 중복되는 경우에서의 우선순위
가장 나중에 불러들인 스타일 시트가 우선적용됩니다
Inline 스타일 > ID 스타일 > class 스타일 > HEAD에서 지정된 스타일
지금까지의 내용을 정리하면 다음과 같습니다
[방법 1]
Linking Style Sheet
<LINK REL=StyleSheet HREF="samp.css" TYPE="text/css">
또한 아래와 같은 방법으로 불러올 수도 있습니다
<STYLE TYPE="text/css"><!-- @import url(http://www.user.com/samp.css);--></STYLE>
전체 웹사이트내에서 모든 문서에 동일한 레이아웃을 지정하려면 이와 같이 링크 스타일 시트를 사용합니다
[방법 2]
Embeding Style Sheet
<style>H1 {font-size:24pt; color:blue}</style>
HTML 문서의 HEAD 부분에 넣는 방법.
현재 문서에서 H1 태그가 사용된 모든 텍스트의 글자 크기를 24pt, 색상을 파란색으로 지정합니다
이렇게 하면 현재 스타일이 정의된 문서내에서 <H1></H1> 태그를 사용한 모든 문자의 크기와 색상이 스타일시트에서 정의한 대로 지정 됩니다
이 경우 여러문서에서 동일한 스타일을 적용시키기 위해서는 스타일시트를 style.css 파일 형태(이름은 마음대로 정하면 되지만 확장명은 반드시 css 로 지정해야 합니다)로 저장하여 두었다가 외부에서 불러오는 방법(Linking Style Sheet)을 많이 사용합니다.
[방법 3]
Inline Style Sheet
<H1 style="font-size:24pt;color:blue">안녕하세요</H1>
본문의 특정 텍스트에만 스타일을 적용 합니다
스타일을 적용하지 않은 다른 <H1>태그에는 색상과 크기가 지정되지 않습니다
뽀유의 스타일시트 특별강좌
뽀유♡ (Homepage) 2002-10-25 09:29:50, 조회 : 8,472, 추천 : 23
[수정내용]
내용을 약간 수정하였습니다.
HTML 사용 체크를 하시지 않은 경우에는 HTML 태그가 그대로 노출(?)되니 "<", ">" 부호를 "[","]" 로 바꿔주실 필요는 없습니다 ^^
"<",">" 이 부호로 해주면 강좌 보시는 분이 복사해서 바로 사용하실 수 있고 좋잖아요 ^^
오늘 아침에 다음 (http://daum.net) 의 소스를 분석하던 도중
제가 한참 궁금해하던 부분에 대해 알아냈습니다 -_-;
바로바로! 노프레임사이트를 만들 때의
링크 스타일을 하나로밖에 지정 못한다는 그 아픔..;;
해결되었습니다 -_-;;
무슨소린지 모르시겠다구요? 예를들면..
링크 글씨색과.. 뭐 여러가지를 이쁘게 해놨는데
제로보드 로그인을 삽입했더니
로그인의 스타일대로 따라가더라... 이런분들 있죠?
금방 쉽게 해결됩니다.. 그럼 지금부터 강좌 시작-!
-----------------------------------------------------
★ 스타일시트 강좌 ★
style.css 파일을 만드셔야합니닷.
메모장을 여세요. 그리고 아래와같이 입력하세요.
a.menu:link {text-decoration:none;color:#666666;}
a.menu:hover {text-decoration:underline;color:#cccccc;}
a.notice:link {text-decoration:underline;color:#ffff00;}
a.notice:hover {text-decoration:underline;color:#ff0000;}
이런식으로 스타일시트 파일을 만드신다음에
스타일을 적용시킬 html문서의 head부분에 다음과같이
입력하셔서 스타일시트를 포함시켜주세요
<link rel="stylesheet" type="text/css" href="style.css">
그리고는 링크를 하실때 [a] 태그를 쓰죠?
[a] 태그 안에 클래스를 삽입해주는겁니다.
메뉴에 링크를 거실때에는 위에 a.menu:link 라고 속성을
지정해주었었으니까
<a href="http://foryouweb.com" class="menu" target="_blank">
이런식으로 해주시면 되고
공지사항의 링크는
<a href="http://주소.com" class="notice">
이런식으로 해주시면
각각의 스타일시트가 적용되서 나오게 된답니다^^
이해가 안되시면 제 홈에 오셔서 질문해주세요 - *
218.153.173.204
햇살
좋은글 감사드립니다. 쩜(.)으로 클래스 만드는것 외에도 스페이스 구분으로 처리하는 방법도 있었어요.
a:link {} (보통방법)
menu a:link {} (메뉴영역안에서만 쓰이는 링크스타일)
notice a:link {} (공지영역안에서만 쓰이는 링크스타일)
li a:link {} (LI 리스트 안에서만 쓰이는 링크스타일)
이걸로 바꾸니 클래스를 안써도 되더군요. 전 편했어요. 근데 무지 많이 만들어야 되더라는;;; 2002-10-25
11:00:51
뽀유♡
클래스를 안써두 되요?? 어떻게 가능해요? 무지 궁금함;;
menu a:link {} 일케만 해노면
메뉴에 알아서 적용이 된다구용?? 2002-10-25
11:10:40
햇살
예를 들면..
style:
a:link { color: blue } // 보통링크
menu a:link { color: red } // menu라는 클래스 안에서만 적용먹는 링크
li a:link { color: green } // li에서만 써먹는 링크
본문에서는..
<a href=어쩌구> // 파랑색으로 나오겠죵.
<div class=menu> // menu라는 영역을 잡아주죠.
<a href=저쩌구> // 빨강색으로 나오겠죠. 본문안에서 영역잡는게 많아져면 나중엔 헷갈리더라는;;
</div>
<li><a href=흐음> // 녹색으로 나올겁니다.
일장일단이 있는것 같으니 잘 선택해서 쓰시면 되겠네요. ^^; 2002-10-25
11:17:11
리쯔:)
멋지군요![열자아아아아] 2002-10-25
11:30:20
햇살
에.. 수정 하나 들어갑니다. 메뉴 클래스 정의할때 앞에 쩜(.)을 빼먹었습니다. 긁어서 확인해보실때 쩜 넣어주셔요. 죄송~
네. 이건 제가 CSS를 찾아보면서 가장 감동의 눈물을 흘렸던 기억이라서요.. ^^; 2002-10-25
11:50:58
ROBIN
하핫;; 뽀유 여기두 올렸넹 +_+ 2002-10-25
14:29:28
@.@
우와...요새 CSS공부중이였는데...^^;;
너무 감사드립니다~~
좀더 구체적 강의 하실마음 생기시면(?) 해주세여~~^^;; 2002-10-25
14:45:34
뽀유★
헐!! 제 아이디도 뽀유인데.. 키득;; 어디서 많이 본 아이디인가 했더니 ㅡㅡ;; 2002-10-25
17:14:13
뽀유♡
헉..뽀유님 -_-;;;;;; ㅋㅋㅋ
이..이런 -ㅇ -; 반가워용// ㅋㅋ 2002-10-25
22:52:48
ROBIN
푸하핫 +_+ 두 뽀유의 만남~~ 누가 진짜야 +_+)/? 2002-10-26
09:58:56
靑色糖™
앗 그럼 제 자료실의 자료에 의견을 달아주신 분은 누구신지.. 2002-10-28
10:10:52
靑色糖™
혹시 지금 바꾸신건 아니신지;; 2002-10-28
10:11:26
뽀유♡
제 닉넴은 정확히 2002년 5월 3일부터 만들었습니다 -_-^ 2002-10-28
16:16:30
조은하루
이 외에 두개 class를 쓰실때 class="notice bcolor" 이런식으루 사용해두
두가지 css가 먹습니다.
우선순위는 모르겠구..
.notice a:link 는 해당 클래스 안에 링크를 말하는거니깐
해당 클래스 안에 링크일때만 쓰이는 거구여
둘다 사용일땐 콤마(,) 같은 단계일땐 스페이스 임돠! 2002-11-18
12:09:46
토토로
T^T 그렇게 찾아헤메던.... 드뎌 찾아따아~~ 2002-11-19
11:40:24
바보토끼
으아앙 ㅜ_ㅠ 글케 찾아헤메던거 저두 여기서 찾았네요.
상세한 설명/ 방법두 두가지 ^^ 아고 진짜 고맙습니다 (__) 2003-01-29
11:11:24
이플립
CSS도 여느 언어처럼 (말이 않되나여?)
덩말 넒다 -_-;; 2003-02-02
21:51:28
신태하
아기베베 ㅡ,.ㅡ 2003-02-23
20:38:24
。I징:)
우와...좋닷......활용하기 좋은걸요 2003-02-25
14:37:55
아찌물개
와우 감사....정말 이것땜에 무지고민했는뎅...드뎌 찾았당! 2003-04-22
17:43:10
백승우
a.menu:link {text-decoration:none;color:#666666;}
menu a:link {text-decoration:none;color:#666666;}
이렇게 하지않고
.menu:link {text-decoration:none;color:#666666;}
이렇게만 적어도 됩니다.*^^*
입력폼 스타일변경...
디아릭스 (Homepage) 2002-11-04 16:58:35, 조회 : 3,364, 추천 : 17
뭐 아주 간단하지만
<textarea cols20 rows=10 style="color:글자색; background-color:배경색;"></textarea>
<textarea cols20 rows=10 style="background: url(http://....images/배경그림.gif);"></textarea>
이러면 입력폼의 배경이나 글자색을 조절할 수 있습니다.
제로보드에서는 쓰기창에서 이런식으로 다양한 색상을 사용하지만
일반 html문서에서는 잘 사용 않더군요..
FONT-FAMILY로 글꼴을 정의하거나
<textarea cols20 rows=10 style="color:blue; border-color:red; border-style:soild;">식으로해서 테두리도 바꿀수 있죠.
스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선)
01CODE.com (Homepage) 2004-02-26 18:55:10, 조회 : 607, 추천 : 0
- SiteLink #1 : http://www.01code.com/webedition/FORM_InputType.html
<html>
<head>
<title>http://www.01code.com[ 스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) ]</title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<link rel=stylesheet href="http://css가 존재하는 주소" type=text/css>
<style type="text/css">
<!--
.box1{
border-color:#999999; background-color:#FFFFFF; border-style:solid;
border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;
color:#FF0000;
}
.box2
{
border-color:#999999; background-color:#FFFFFF; border-style:solid;
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
color:#0000FF;
}
.box3
{
border-color:#999999; background-color:#FFFFFF; border-style:dashed;
border-top-width:1px; border-bottom-width:1px; border-left-width:1px; border-right-width:1px;
color:#FF0000;
}
.box4
{
border-color:#999999; background-color:#FFFFFF; border-style:dashed;
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
color:#0000FF;
}
-->
</style>
</head>
<body>
<h4>[ 스타일시트를 이용한 텍스트박스 스타일 제어(밑줄,점선) ]</h4>
<table border=0 cellpadding=10 cellspacing=0>
<tr>
<td><b>STYLE solid</b></td>
<td><input class=box1 type=text name="" value="01code.com" size=25 maxlength=20></td>
<td><input class=box3 type=text name="" value="01code.com" size=25 maxlength=20></td>
</tr>
<tr>
<td><b>STYLE dashed</b></td>
<td><input class=box2 type=text name="" value="01code.com" size=25 maxlength=20></td>
<td><input class=box4 type=text name="" value="01code.com" size=25 maxlength=20></td>
</tr>
</table>
</body>
</html>
218.153.173.204
naughtykidd
.. -_-a 검색엔진에서 스타일시트만 때리면 널린 걸 왜 굳이 여기에.. 훔 2004-02-26
20:00:20
Ryan
너무 널려서, 찾기가 힘들수도 있잖아요. ^^; 저는 도움이 되었는데요. ^^; 2004-02-27
18:11:41
Pe-i
naughtykidd//님이 올린 팁도 널린 팁인것은 마찬가지랍니다 ^ㅡ^; 2004-02-29
17:59:47
장이
border-color:#999999; background-color:#FFFFFF; border-style:dashed;
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
color:#0000FF
-> background-color:#FFFFFF;color:#0000FF;border-bottom:solid 1 이렇게 해도 되지 않나요? 2004-03-02
18:06:38
플로렐라
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
->
border-width:0 0 1 0; ok?
|
|
