|
▷ Cascade Style Sheet(CSS) 적용 태그
|
| |
|
⊙ CSS (Cascade Style Sheet)
|
|
<span style="overflow: auto; width:100px; height: 100px; ">와 같이 태그요소의 속성으로 문서를 장식하는 방법은 직관적이긴하다.
하지만 일관성이 떨어지고 같은 태그가 반복되는 경우에는 많은 불편을 느끼게 된다.
CSS를 사용하게 되면 이런 부분을 대폭 개선할 수 있다. 사용된 문장도 훨씬 간결하고 구조적으로 바뀌게 된다.
여기서는 태그에 CLASS 및 ID를 부여하여 선택적으로 태그를 적용하는 방법을 알아보기로 한다. |
|
⊙ CSS 적용방법
|
| 태그내에 (inline) |
<font style="font-size: 9pt"> 홍길동
</font>
* 이 태그에만 적용된다 | | 문서내에 (internal) |
<head>
<style
type="text/css">
font { font-size:9pt
;}
</style>
</head>
* 문서 전체에 적용된다 | | 외부문서로 (external) |
위의 <style> ~ </style> 부분을
확장자를 css 로 저장
사용할 웹문서에서 이 파일을 참조하려면
<link rel="stylesheet" type="text/css"
href="style.css">
* 이 스타일이 필요한 모든 웹문서에서 위의 방법으로
사용! |
|
| |
|
⊙ CSS 적용시 유의할 점(참조 : 드래곤 생각)
|
| 1. |
외부문서에 작성하자
설계시 먼저 모든 웹문서가 공유할 수 있는 CSS 부터 정의한다. 그래야 문서마다
정의하거나 태그에 직접 정의하는 수고를 덜 수 있다.
| | 2. |
기존태그를 먼저 정의하자
기존 태그를 최대한 활용하여 스타일을 잡고 사용자 정의는 최소화한다. 그래야 일을 줄일 수
있다.
| | 3. |
많이 차지하는 부분을 기존태그에 정의하자
문서내의 많은 부분을 기존태그에 정의하면 class 로 적용하는 수고를 덜 수
있다.
| | 4. |
한번 사용하는 스타일을 외부문서에 두지말자
외부문서는 모든 웹문서가 참조하게 되므로 상당한 스타일을 정의하고
있다.
한두군데 적용되는 스타일은 문서내에 또는 태그에 직접 적용하도록 하자
| | 5. |
너무 지나친 스타일을 정의하려고 하지말자.
모든 걸 스타일로 해결하려면 엄청난 설계가 필요하다. 따라서 처음인 사람에게는 많은
시간을 요할 수도 있다. 꼭 필요한 CSS에서 출발하여 차츰 차츰 노하우를 익혀가는 게 바람직할 것 같다. |
|
|
| |
|
⊙ 선택자(참조 가브렐 집시)
|
|
- 엘리먼트선택자.(Element Selection)
엘리먼트 선택자는 기본적인 태그명을 작성하고 그에 따른 CSS를 기입하는 방법이다.
예) Tag{ 스타일시트 }
- 아이디 선택자(Identity Selection)
태그중 특정태그에 적용된 id값을 찾아서 적용되는 CSS입니다.
예)#ID{ 스타일시트 }
- 클래스 선택자(Class Selection)
태그중 특정 태그에 적용된 class를 찾아서 적용되는 CSS입니다.
예) .class{ 스타일시트 }
- 전체선택자(All Selection / universal
Selection)
전체선택자는 해당 페이지가 적용되는 모든 태그에 적용합니다.
예) *{ 스타일시트 }
- 임폴트선택자(링크선택자 / Import
Selection)
임폴트(css를 문서 오는 경우)에 쓰이는 선택자.
예) @import url("경로")
- 중요구문 선택자. (important
Selection)
css의 로딩인식순서와 상관없이 가장 먼저 읽히 도록 설정하는 선택자.
예) .class {color:red; !important }
- 객체상속선택자. (하위선택자 / descendant
Selection)
특정 태그 또는 아이디 또는 클래스 이하의 특정 부분에 css를 먹이는 선택자.
예) #ID Tag{ 스타일시트 }
예) #ID.class{ 스타일 시트 }
예) .class .class{ 스타일시트 }
예) .class Tag{ 스타일시트 }
예) Tag Tag{ 스타일시트 }
- 자식선택자. (child Selection)
특정 엘리먼트 또는 아이디 또는 클래스에서 바로 하위의 특정 엘리먼트 , 아이디 , 클래스를 선택하는
선택자.
(중첩으로 들어가게 되면 중첩된 엘리먼트는 무시)
예) html > body{ 스타일시트 }
- 인접형제선택자. (adjacent
sibling Selection)
특정엘리먼트 또는 아이디 또는 클래스가 닫힌후 처음나오는 특정 엘리먼트, 아이디 ,클래스를 선택하는
선택자.
예) div + p{ 스타일시트 }
- 속성선택자. (attribute
Selection)
특정엘리먼트에서 어떠한 속성이 존재할경우, 그 속성을 가진 특정엘리먼트를 선택하는 선택자.
예) table[border]{ 스타일시트 }
- 유사클래스선택자 (이벤트 체크 선택자 / pseudo-class
Seletion)
특정클래스에 마우스에 따른 특정한 이벤트(또는 액션)이 일어날경우에 적용되는 상황을 선택해주는
선택자.
예) a:hover{ 스타일시트 }
예) td:hover{ 스타일시트 }
- 유사엘리먼트선택자 (이벤트 체크 선택자 / pseudo-element
Seletion)
특정엘리먼트에 추가 또는 특정부분에 적용 하는 선택자입니다.
예) a:first_letter{ 스타일시트 }
예) td:before{ 스타일시트 }
|
|
| |
|
⊙ 속성(Atributes)의 Intenal 방식 사용 예
|
|
선택자 |
사용예제 |
실행결과
|
|
Inline 방식
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
</head>
<body>
<div style='overflow: scroll;
width:250;
height: 200px;
border: 1px solid gray;
scrollbar-3dlight-color: #59ADBB;
scrollbar-darkshadow-color: #59ADBB;
scrollbar-face-color: #59ADBB;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: ; #FFFFFF'>
<p style="font-face:굴림;
font-size:9 ;
color: red; "}>콩나물대제국</p>
<p style="font-face:굴림;
font-size:9 ;
color: blue; "}>콩나물대제국</p>
<p style="font-face:굴림;
font-size:9 ;
color: brown; "}>콩나물대제국</p>
</div>
</body>
</HTML> |
|
|
엘리먼트선택자
(Element Selection)
(Type 선택자)
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
div { overflow: scroll;
width:250;
height: 100px;
border: 1px solid gray;
scrollbar-3dlight-color: #59ADBB;
scrollbar-darkshadow-color: #59ADBB;
scrollbar-face-color: #59ADBB;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: ; #FFFFFF; }
p { font-face:굴림;
font-size:9 ; }
</style>
</head>
<body>
<div>
<p style="color: red;">콩나물대제국</p>
<p style="color: blue;">콩나물대제국</p>
<p style="color: brown;">콩나물대제국</p>
</div>
</body>
</HTML> |
|
|
아이디 선택자
(Identity Selection)
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
#ID1 { overflow: scroll;
width:300;
height: 200px;
border: 1px solid gray;
scrollbar-3dlight-color: #59ADBB;
scrollbar-darkshadow-color: #59ADBB;
scrollbar-face-color: #59ADBB;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: ; #FFFFFF; }
p { font-face:굴림;
font-size:9 ; }
#ID2 { color: red; }
#ID3 { color: blue; }
#ID4 { color: brown; }
</style>
</head>
<body>
<div id="ID1">
<p id="ID2">콩나물대제국</p>
<p id="ID3">콩나물대제국</p>
<p id="ID4">콩나물대제국</p>
</div>
</body>
</HTML>
|
|
|
클래스 선택자
(Class Selection)
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
.ID1 { overflow: scroll;
width:300;
height: 200px;
border: 1px solid gray;
scrollbar-3dlight-color: #59ADBB;
scrollbar-darkshadow-color: #59ADBB;
scrollbar-face-color: #59ADBB;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color: ; #FFFFFF; }
p { font-face:굴림;
font-size:9 ; }
.ID2 { color: red; }
.ID3 { color: blue; }
.ID4 { color: brown; }
</style>
</head>
<body>
<div class="ID1">
<p class="ID2">콩나물대제국</p>
<p class="ID3">콩나물대제국</p>
<p class="ID4">콩나물대제국</p>
</div>
</body>
</HTML>
|
|
|
| |
|
⊙ ID 선택자와 Class 선택자의 차이점
|
|
id 선택자
|
class 선택자
| |
<html>
<meta http-equive="content-type" content="text/html;
charset=euc-kr">
<head>
<title> 연습할 문서의 제목
</title>
<style type="text/css">
#my { font-size:12pt; color: blue;
}
</style>
</head>
<body>
<p
id="my">콩나물대제국</p>
<p id="my">콩나물대제국</p>
</body>
</html>
|
연습할 문서의 제목
콩나물대제국
콩나물대제국
| |
콩나물대제국
콩나물대제국
|
콩나물대제국
콩나물대제국
| | ※ style에서는 ID가 중복되어도 모두 실행된다. |
※ style에서는 Class가 중복되어도 모두 실행된다. |
|
<html>
<meta http-equive="content-type" content="text/html;
charset=euc-kr">
<head>
<title> 연습할 문서의 제목
<script language="javascript">
function myIdColor()
{
myId.style.color="red";}
</script>
</head>
<body>
<p
id="myId">콩나물대제국</p>
<p id="myId">콩나물대제국</p>
<input type="button" value="Id 실행" onClick="myIdColor()">
</body>
</html>
|
연습할 문서의 제목
콩나물대제국
콩나물대제국
|
|
<p id="myId">콩나물대제국</p>
<p id="myId">콩나물대제국</p>
<input type="button" value="ID 실행" onClick="myIdColor()">
|
콩나물대제국
콩나물대제국
|
※ Script에서는 ID가 중복되면 Error가 발생한다.
ID는 유일한 값이어야 한다.
|
※ Script에서는 Class는 개체도 아니다. Error가 발생한다.
|
|
<html>
<meta http-equive="content-type" content="text/html;
charset=euc-kr">
<head>
<title> 연습할 문서의 제목
</title>
<script language="javascript">
function onlyOneIdColor()
{
onlyoneID.style.color="red";}
</script>
</head>
<body>
<p
id="onlyOneId">콩나물대제국</p>
<p id="onlyTwoId">콩나물대제국</p>
<input type="button" value="ID 실행" onClick="onlyOneIdColor()">
</body>
</html>
|
※ 유일한 ID 에 대한 Script는 Error 없이 동작합니다.
콩나물대제국
|
|
| |
|
선택자 |
사용예제 |
실행결과
|
|
전체선택자, 공통선택자
(All Selection / universal
Selection)
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
* { color: green; }
</style>
</head>
<body>
<div>콩나물대제국</div>
<p>콩나물대제국</p>
<span>콩나물대제국</span>
<pre>콩나물대제국</pre>
</body>
</HTML>
|
|
|
복수선택자.
(Multiple Selection)
※ 콤마(,)로 구분한다.
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
p, pre { color: green; }
</style>
</head>
<body>
<div>콩나물대제국</div>
<p>콩나물대제국</p>
<span>콩나물대제국</span>
<pre>콩나물대제국</pre>
</body>
</HTML>
|
|
|
하위선택자.
(Descendant Selection)
※ 공백(Space)로 구분한다.
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
div span { color: green; }
</style>
</head>
<body>
<span>여기는 적용되지 않는다.</span>
<div>
<p>콩나물대제국</p>
<span>콩나물대제국</span>
<pre>콩나물대제국</pre>
</div>
</body>
</HTML>
|
|
|
엘리먼트선택자#아이디 선택자
엘리먼트선택자.클래스 선택자
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
div#ID1:firstchild { color: blue; }
div.ID2:firstchild { color: green; }
</style>
</head>
<body>
<p id="ID1">엘리먼트#아이디</p>
<p class=""ID1">엘리먼트.클래스</p>
<p id="ID2">엘리먼트#아이디</p>
<p class=""ID2">엘리먼트.클래스</p>
</body>
</HTML>
|
|
|
가상클라스, 엘리먼트
(Pseudo Class, Element)
|
<HTML>
<META HTTP-EQUIVE="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-KR">
<head>
<title> 연습할 문서의 제목 </title>
<style type="text/css">
P:first-letter { color : green }
A:link{ color: blue }
A:visited { color: red }
A:hover { color: yellow }
A:active{ color: black }
</style>
</head>
<body>
<p>첫번째 글자의 색이 바뀐다.</p>
<A href="#">링크된 곳의 상태변화</a>
</body>
</HTML>
|
|
|
| |
|
|
