반응형


CSS는 CSS를 적용한 단순한 텍스트 파일을 작성한 것을 정의함으로서 사용가능하다.

CSS가 같이 적용된 사이트에 접속할 경우 페이지 변경이 일어나도 캐쉬되기 때문에 파일정보가 다시 전송되지 않는다.


다음예제를 보자

File : example.html

<html>
<head>
<title>MY CSS PAGE</title>
<link rel=stylesheet href="whatever.css" type="text/css">
</head>
<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example of a page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">Example from EchoEcho.Com.</div>

<hr>
</body>
</html>


위의 예제는 전체 사이트에서 동일하게 CSS파일을 사용하며 한가지 중요한 예외사항은...
Style 문구가 페이지 상에 정의되지 않고 외부 Style Sheet 를 참조한다.

 <link rel=stylesheet href="whatever.css" type="text/css">

이것은  브라우져가 호출된 whatever.css 파일을 호출하고 HTML 문서상안에서 발견된 위치에 입력하는 것을 뜻한다.

File : whatever.css
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}


전체 사이트의 모든 <head>구문안에 <link rel=stylesheet href="whatever.css" type="text/css"> 를 추가함으로써 하나의 스타일을 통한 전체사이트를 적용하는 효과를 가질수 있다.

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

Single PAGE (한 페이지 적용)  (0) 2010.09.06
단순 태그들  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
반응형

한 페이지에 적용할 때 HEAD 태그 안에 <STYLE> 태그를 사용함으로써 사용 가능함.

<html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
</style>
</head>

<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">
Example from EchoEcho.Com.
</div>

<hr>
</body>
</html>


결과

Welcome
This is an example page using CSS.
The example is really simple,
and doesn't even look good,
but it shows the technique.
As you can see:
The styles even work on tables.
Example from EchoEcho.Com.

반응형
저작자표시

'Windows > css' 카테고리의 다른 글

전체 사이트에 CSS 적용하기  (0) 2010.09.06
단순 태그들  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
반응형

단순히 style="정의스타일:스타일속성;" 태그를 추가함으로서 단순 태그를 추가할 수 있다.

예
 It is <b style="font-size:16px;">NOT</b> me.

결과는 다음과 같다.
It is NOT me.



당신은 당신의 단순 CSS 태그를 제한적으로 사용해야 한다.

각각에 단순 태그를 사용함으로서 당신의 CSS와 연관된 많은 강력한 기능을 사용할 수 없다.

예를 들면, 한번 선언해서 사용할때보다 사용할 때마다 계속 style 구문을 계속 선언해야 한다.

더구나 주요 style을 변경할 때도 당신은 문서 전체를 수정해야 한다.

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.

반응형
저작자표시

'Windows > css' 카테고리의 다른 글

전체 사이트에 CSS 적용하기  (0) 2010.09.06
Single PAGE (한 페이지 적용)  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
반응형


진하게 효과와 이탤릭(기울임) 효과를 줄때 다음과 같이 사용한다.

 <i><b>example</b></i>

문법
일반적인 <B> 태그에 대해 다음과 같이 추가하지 말길...(기존 style을 재정의 함으로써 혼란을 유발...)
 B {font-size:16px}

선택자에 의존하는 문맥을 추가할 때는 다음과 같이 사용한다.
 I B {font-size:16px;}

I와 B의 공간을 분리함으로써 표현함.

I B 형태로 선언하는 경우
테스트 문자 -> <I B>테스트 문자</I B>
테스트 문자 -> <B>테스트 문자</B>


이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

Single PAGE (한 페이지 적용)  (0) 2010.09.06
단순 태그들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
반응형

같은 종류의 스타일 선택자들을 공유해야 할 때 사용함.

그룹핑이 없는경우(폰트 크기만 별도로 나머지 속성은 동일 한 경우임)

.headlines{
font-family:arial; color:black; background:yellow; font-size:14pt;
}

.sublines {
font-family:arial; color:black; background:yellow; font-size:12pt;
}

.infotext {
font-family:arial; color:black; background:yellow; font-size:10pt;
}


위의 스타일 선택자들을 그룹핑 하고 폰트에 대해서는 별도로 사용하는 경우

.headlines, .sublines, .infotext {
font-family:arial; color:black; background:yellow;
}

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}



이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

단순 태그들  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
반응형

ID 선택자들의 기본 문법이다.

#ID선택자명 {속성:값;}

예)

<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>

<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table>
</div>

<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr></table>
</div>
</BODY>


</HTML>






이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06
반응형

Class 선택자들의 표준 문법이다.

.CLASS선택자명 {속성:값;}

예:

<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>

</HEAD>

<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>

</HTML>


결과는 다음과 같다.

This is a bold tag carrying the headline class
This is an italics tag carrying the headline class



CLASS 선택자는 HTML 태그를 재정의 하지 않고 당신이 원하는 스타일을 정의할 때 사용한다.

단순하게 적용하고 싶을때는 HTML 태그에 다음과 같이 추가하면 된다.

class="headline"

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06
CSS 란 ...  (0) 2010.09.06
반응형

HTML 선택자의 일반적인 문법

태그선택자명 {속성들:값;}

예:

<HTML>
<HEAD>
<style type="text/css">
B {font-family:arial; font-size:14px; color:red}
</style>

</HEAD>

<BODY>
<b>This is a customized headline style bold</b>
</BODY>

</HTML>


결과는 다음과 같다.

This is a customized headline style bold


이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06
CSS 란 ...  (0) 2010.09.06
반응형

선택자들은 다른 스타일들의 이름을 나타낸다.

Style에는 설정한 각 선택자들의 해야될 일이 정의되어 있다.

body 구문을 정의한 Style의 예

예)

<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline}
</style>

</HEAD>

<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>

</HTML>



이경우에는 B.headline이 선택자이다.

결과는 다음과 같다.

This is normal bold
This is headline style bold


이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 란 ...  (0) 2010.09.06
반응형

CSS는 계층형 스타일 시트를 위한 표준이다.

웹페이지들의 내용들의 구획을 나누는 방법이다.


CSS가 하는일들 :

style은 폰트와 색등 정의한다.

선택자 : 각 style들의 유일한 이름

선택자와 style은 한 곳에 정의된다.

예)

새로운 테이블의 칸들에 대해 색과 폰트를 style로 대체 설정한다.

원 HTML 구문

<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr>
</table>


CSS 변경 적용 구문 (subtext라는 선택자로 정의하여 사용한 경우)
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table> 

CSS 변경 적용 구문은 기존 HTML 구문을 사용할 때 보다 훨씬 강력하게 표현할 수 있으며 각 내용들을 분리할 수 있다.


CSS로 가능한 것들....

1. 한곳에 당신이 보이길 원하는 페이지를 정의가능하다.
  
2. 보여지는 페이지를 쉽게 수정가능하다.

3. 폰트크기와 주요속성들을 정의할수 있다.

4. 웹페이지의 원하는 화면의 픽셀에 내용을 위치할 수 있다.

5. HTML 태그 전체를 재정의 가능하다.

6. 링크들에 대해 임의로 정의가능하다.

7. 레이어를 정의가능하다.

CSS의 단점...

IE 4 이상에서만 작동한다.

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06

+ Recent posts

티스토리툴바