☆ CSS(Cascading Style Sheet)란?

 

Cascading
cascade는 "폭포가 되어 떨어지다"라는 뜻입니다. 폭포는 물이 위에서 아래로 힘차게 흘러 내리죠? 그럼 왜 style sheet에, cascading이란 말이 붙었을까요? CSS에는 '우선순위'라는 것이 있습니다. 이 CSS의 우선순위가 정해지는 것이, 꼭 cascade와 비슷한 느낌을 주기 때문에, style sheet에 cascading이란 말을 붙인 것입니다.

Style
style은.. 예를 들어, 어떤 문서가 있는데 글자 크기가 10, 글자색은 노란색, 글꼴은 고딕입니다. 다른 문서는 글자 크기가 12, 글자색은 파란색, 글꼴은 명조입니다. 이 두 개의 문서가 내용이 같을 수는 있지만, 겉모양은 다릅니다. 이것을 보고, 두 문서는 스타일이 다르다고 합니다. 그렇죠?

Sheet
sheet는 무엇일까요? 단어 뜻으로 보면, 이는 style을 적어 놓은 종이라는 의미입니다. 즉, '겉모양은 이러 이러하게 하라'는 내용이 들어 있는 곳(실제 종이는 아니구요)입니다

 

여러 문서가 내용은 다르지만, 겉 모습은 똑같은 경우를 생각해 보세요. 문서 하나 하나의 내용과 겉 모습을 작성하게 되면, 중복되는 작업이 있습니다. 그러니까 style을 한 번만 정해 놓고, 내용만 있는 문서에 이를 적용하면, 아주 편리하겠죠? 바로 이러한 역할을 하는 녀석이 Style Sheet입니다.

 

 

 

☆ CSS(Cascading Style Sheet)은 왜 필요한가?

 

HTML 문서를 코딩하면서 각 부분마다 일일이 폰트 종류, 크기, 색상을 지정하는 것은 매우 번거로울 뿐 아니라 문서 크기를 무겁게 합니다. 그런데 CSS는 스타일 시트를 별도로 분리하여 문서 크기를 줄여줌으로써 결과적으로 네트워크 성능 향상을 가져오게 합니다.

CSS는 사용할 element나 어떤 부분에 맞추어서 스타일을 지정하므로 하나 하나 수작업을 할 필요가 없도록 도와줄 수 있습니다.

또한 HTML만으로 불가능한 여러 가지 레이아웃과 시각 효과를 표현할 수 있습니다.
CSS는 다양한 플랫폼, 브라우저, 사용자 환경을 초월하여 작성자와 보는 사람 모두가 만족할 수 있고 받아들일 수 있는 잘 다듬어진 디자인을 가능하게 합니다.

 

 

 

HTML과 CSS의 뚜렷한 차이점

 

HTML	CSS
폰트 크기 가장 큰 값이 7	수치에 따라 마음대로 조절
자간 / 행간 크기 조절이 불가능하다	배치가 자유로워 가독성을 높일 수 있다.
링크 밑줄의 변형이 불가능하다.	밑줄의 변형이 자유롭다.
페이지의 여백 적용에 한계가 있다.	원하는 만큼 페이지의 여백을 만들 수 있다

 

 

 

 

CSS의 용어와 기본구성 

CSS는 크게 4가지 ① Inline Style Sheet, ② Embedded Style Sheet, ③ External Style Sheet, ④ Imported Style Sheet로 구성됩니다.  이 네가지 방식에 대해서는 나중에 살펴보기로 하고, 아래에 사용한 예는 Embedded Style Sheet로 많은 사람들이 가장 즐겨 사용하는 방식입니다. 자, 그럼 아래의 CSS의 기본구성이 어떻게 생겼는지 한번 눈여겨 보세요.

 

 

CSS의 기본구성

 

  <STYLE type= "text/css">

  P{font-size:9pt;color:red}

  </STYLE>
 

 

<STYLE type= "text/css">

스타일(Style)유형(type)은 텍스트(text)이고 그 파일은 CSS입니다.

 P{font-size:9pt;color:red}
<P>태그가 사용되는 곳은 모두 폰트 크기가 9pt이고 색상은 빨강색으로 표시하세요.

 

CSS에서 위의 P에 해당하는 부분을 우리는 '선택자'라고 부르며, 선택자에 대한 세부설명은 { 로 시작해서 }를 닫아 설명이 끝납니다. 이렇게 { }안에 들어있는 font-size:9pt, color:red를 선언문이라 부릅니다.
 
위의 그림은 스타일시트의 가장 기본이 되는 내용이므로 반드시 꼭!! 암기하세요.

선택자는 하나 또는 여러 개의 선언문으로 구성됩니다.  선언문은 속성과 값으로 구성되는데, font-size와 color는 속성이라 하며, 9pt와 red는 속성에 대한 값이라고 합니다.

선언문(font-size:9pt)과 선언문(color:red)은 세미콜론(;)으로 구분하며, 속성과 값은 콜론(:)으로 구분을 합니다.(←실수하지 마세요.)
 
 

 

 

 

선택자

 

 

 

선택자의 이름 설정하기

 

CLASS와 ID의 선택자 이름은 사용자가 임의로 설정할 수 있습니다. CLASS의 경우는 태그.name 혹은  .name,  ID의 경우는 #name입니다. 즉, name과 키워드에 해당되는 것이 선택자의 이름입니다. 선택자의 이름으로 사용할 수 있는 문자는 a - z, A - Z, 숫자 0 - 9, 하이픈(-) 등입니다. 단, 문자의 첫 자는 하이픈(-)으로 시작할 수 없습니다. (예 : -id01)

HTML문서는 대소문자를 구별하지 않으므로 id01, ID01, Id01을 모두 동일하게 인식합니다.

 

 

 

HTML 태그(HTML Selector)

 

<STYLE type= "text/css">

  HTML태그{속성1:값1;속성2:값2;}
  HTML태그{속성1:값1;속성2:값2;}

</STYLE>

 

< HTML>
< HEAD >
< TITLE >HTML 태그를 선택자로 사용하기< /TITLE >
< STYLE type="text/css" >
H3{font-style:italic ; color:green;}
H4{font-style:bold ; color:blue;}
< /STYLE >
< /HEAD >
< BODY >

< H3 >스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.< /H2 >
< H4 >스타일시트는 HTML의 문서에 비해 확장성과 기능성이 아주 뛰어납니다.< /H3 >
< /BODY >
< /HTML >

 

 

 

CLASS (CLASS Selector)

 

 

 . 으로 시작하고 아주 많이 사용되는 CLASS선택자는 HTML태그 선택자의 한계를 극복한 확장개념으로  CLASS 선택자는 한 태그에 여러 개의 CSS를 정의 할 수 있도록 해줍니다. 

 

< STYLE type= "text/css" >

.키워드{스타일속성:속성값}

< /STYLE >

< BODY >

< 태그 class="키워드" >

< /BODY > 
 
< HTML>
< HEAD>
< TITLE>class를 선택자로 사용하기< /TITLE>
< STYLE type="text/css">

P{color:green ; font-size:10pt}       // P 태그에 국한
P.one{color:blue ; font-size:9pt}    // P 태그에 국한  <P class="one">
P.two{color:red ; font-size:15pt}     // P 태그에 국한 <P class="two">

.three{color:black ; font-size:9pt}    // P 태그에 국한된것 아닌 완전 자유 형식 모든 태그에 활용 
< /STYLE>
< /HEAD>
< BODY >

< P>그냥 p태그만을 모든 페이지에 적용된 p태그는 이렇게 나옵니다.< /P>
< P class="one">하지만 저는 예외 입니다. 왜냐하면 one이라는 class를 사용했거든요< /P>
< P class="two">저는 second를 사용하다 보니 빨강색으로 되버렸네요.< /P>
< P class="three">저는 자유형식입니다.< /P>
< B class="three">여기서는 이렇게< /B>
< I class="three">여기서는 또 이렇게< /I>

< /BODY >
< /HTML>

 

 

 

 

ID (ID Selector)

 

 

ID선택자는 CLASS 선택자와 비슷하며, 마침표(.) 대신 우물정자(#) 기호를 사용하여 selector를 시작합니다.

차이점은 CLASS는 적용범위가 넓어 HTML의 모든 태그에 삽입하여 적용할 수 있는 반면 ID는 한 페이지에 유일하게 한 군데만 적용할 수 있습니다. 즉, CLASS는 한 문서에서 같은 이름이 존재해도 되지만 ID는 단 하나의 이름만 존재해야 합니다.

ID는 한 홈페이지 안에 하나만 존재해야 하므로 ID 선택자 앞에는 적용하고자 하는 선택자를 반드시 기재해 주어야 한다. (☜ 여러 태그에 적용할 수 있는 CLASS의 완전자유형식과 다르죠?)

 

 

< HTML>
< HEAD>
< TITLE> ID를 선택자로 사용하기< /TITLE>
< STYLE TYPE="text/css">

#one {color:red ; font-family:굴림 ; font-size:20pt;}
#two {color:black ; font-family:굴림 ; font-size:15pt;}
#three {color:blue ; font-faminly:굴림 ; font-size:12pt;}

< /STYLE>
< /HEAD>
< BODY>
< DIV ID="one"> ID사용예제 입니다.< /DIV>
< P ID="two">ID를 사용할 때는 ID앞에 우물정자(#) 표시를 해야 합니다.< /P>
< P ID="three">ID는 class와 유사하게 적용됩니다.< /P>
< /BODY>
< /HTML>

 

 

 

CLASS와 ID의 차이점

 

CLASS와 ID는 아주 흡사한 기능을 하기 때문에 사실상 구별을 한다는 것이 상당히 어렵습니다. 하지만, 한 가지 차이점이 있습니다. 간단한 예를 들어보겠습니다.

 

< HTML >
< HEAD >
< TITLE >class와 id의 차이점< /TITLE >
< STYLE type="text/css" >

#one{color:blue ; font-size:9pt;}
.two{color:red ; font-size:9pt;}
 
< /STYLE >
< /HEAD>
< BODY>
< P id="one">나는 id를 적용한 예제입니다.< /P >
< P class="two">나는 class를 적용한 예제 입니다.< /P >
< /BODY >
< /HTML >

나는 id를 적용한 예제입니다.

나는 class를 적용한 예제 입니다.

 

위를 한번 보세요. 효과가 똑같죠? 이것으로 보아 ID와 CLASS는 기능면에 있어서 전혀 차이가 없습니다.  하지만 ID는 현재의 기능에 확장기능을 내포하고 있다고 합니다. 즉, CSS를 확장하여 스크립팅 기능을 넣은 DHTML을 웹 문서에 적용하려면 고유한 이름이 필요합니다. ID선택자는 문서 안에서 하나의 고유한 이름을 가지기 때문에 스크립트 스타일을 제어할 때 사용합니다.

 

정리를 해보면 여러 element에 같은 스타일을 지정할 때는 CLASS를 사용하고, 스크립트로 스타일 시트를 제어할 때 ID를 사용할 수 있습니다.  ID를 Selector로 사용하는 것은 특정 element에 지정하는 inline style과 기본적으로 같습니다.
 
 

 

문장 (Contextual Selector)

 

 

기존의 "HTML을 선택자로 사용하기"에서는 하나의 태그를 선택자로 사용했지만, 여기서 배울 문장선택자(Contextual Selectors)는 두 개의 태그를 선택자로 사용합니다. HTML 문서의 태그에 사용되는 특정 태그에만 서식을 적용하고자 할 때 사용되며 특정 태그는 정의된 태그안에서만 효력을 발휘합니다.
CSS2에서는 문장선택자(Contextual Selectors)를 자식 선택자(Descendant Selectors)로 간주합니다. 

< STYLE type= "text/css" >

태그 태그{스타일속성:속성값}

< /STYLE >

 

아래의 예제를 보면 < STYLE>과 < /STYLE> 내부에 P와 STRONG, P와 EM, P와 I 등 두 개가 선택자로 사용되었습니다. 종전의 사용법으로는 아래의 예처럼, < P>태그 안에 일부 텍스트를 다른 태그를 사용해서 표현하기가 불가능 했습니다.이때 태그와 태그를 나란히 적어주면, < P>태그 안에 다른 태그를 넣어 각기 다른 표현을 할 수 있습니다. 여기서 주의 할 사항은 태그와 태그사이는 반드시 띄어쓰기를 해야 합니다. 
 
< HTML>
< HEAD>
< TITLE> 문장 선택자< /TITLE>
< STYLE TYPE="text/css">

< style type="text/css">
P STRONG { color : red ; font-style : italic }
P EM { color : blue ; font-weight : bold }
P I { letter-spacing : 1em }  // ☜ 태그와 태그 사이는 반드시 띄어쓰기를 하세요!!

< /STYLE>
< /HEAD>
< BODY>
< P>html 문서의 태그에 사용되는 < STRONG>특정 속성에만 서식을 적용하고자 할 때
사용된다. < /STRONG>< /P>
< P>입력 방법은 태그와 속성을 < EM>한 칸 공백을 두고 기재하면 된다. < /EM>< /P>
< P>특정 속성은 < I>정의된 태그 안에서만 효력을 발휘한다. < /I>< /P>
< /BODY>
< /HTML>

html 문서의 태그에 사용되는 특정 속성에만 서식을 적용하고자 할 때 사용된다. 입력 방법은 태그와 태그 사이에 한 칸 공백을 두고 기재하면 된다. 특정 속성은 정의된 태그 안에서만 효력을 발휘한다.
 
 

Universal selector

Child selector

Adjacent sibling selector

 

자주 사용되는 부분이 아니므로 이곳에서는 생략하겠습니다. 

 

 

 

적용위치

 

HTML 문서에 스타일 시트를 적용하는 것은 HTML이라는 기본 틀을 CSS로 꾸미고 다듬는 것을 말합니다. 그러면, Style Sheet는 HTML문서 안의 어떤 위치에 삽입하여 그 효과를 나타내는지 궁금하지 않나요? 일반적으로 문서에 CSS를 추가하는 방법은 다음과 같이 크게 세 가지로 분류를 하는데요. 이번시간에는 Inline Style Sheet와 Embedded Style Sheet에 대해서 살펴보기로 하겠습니다.

 

Inline Style Sheet(각각의 태그에 적용하는 방식)
Embedded Style Sheet(head에 삽입하여 문서전체 관리)
Linking Style Sheet ☞ External Style Sheet(외부 문서를 불러와 적용하는 방식)
Imported Style Sheet(외부 스타일시트 불러오기)
 

Inline Style Sheet

 

<태그 style="{속성:값}">.......< /태그 > 

"inline"이란 한 줄로 늘여서 함께 사용한다는 의미에서 inline이라는 말을 사용하였습니다. CSS에서 소스의 옆쪽에 나란히 스타일시트를 적용한다는 의미에서 Inline Style Sheet라고 합니다. 이것의 위치는 < Body >와 < /Body >사이에 있는 태그에 직접 스타일을 삽입하는 방식을 취합니다. Inline style은 < A >에서 < XMP> 까지 어떤 HTML element라도 적용할 수 있습니다.

이 방법은 문서 내에 같은 element를 사용한 곳 모두 적용하는 것이 아니며, 별도로 지정한 곳에만 스타일을 지정하기 때문에 문서전체에 영향을 주지는 않습니다. 태그 안에 직접 스타일 시트를 지정하는 것은 지저분한 코딩이 되기가 쉽고, 반복해서 사용하는 스타일이 많아질수록 불필요한 코드가 많아집니다.

나중에 문서 스타일을 변경할 경우 각 부분을 찾아서 직접 고쳐야 하므로 힘이 듭니다. 문서가 짧을 경우에는 괜찮겠지만.. 문서의 양이 많을 경우.. 정말 힘들겠죠? 하지만 저처럼 문서의 부분 부분(SPAN이나 TABLE 테두리에 효과주기 등 특정 부분만 스타일 지정할 때)에 이용할 경우에는 아주 유용합니다. 
 
< HTML >
< HEAD >
< TITLE >Inline 스타일 시트 활용예제 < /TITLE >
< /HEAD >
< BODY >

< P style="font-size:9pt ; color:blue"> 원하는 태그에 스타일 시트가 삽입됩니다.< /P>
저는 스타일시트를 삽입하지 못했어요. ㅠ.ㅠ

< /BODY >
< /HTML >

 

 

Embedded Style Sheet

< STYLE type= "text/css" >

< !--

SELECTOR{속성:값;속성:값;}

SELECTOR{속성:값;속성:값;}

SELECTOR{속성:값;속성:값;}

--! >

< /STYLE> 
 

 EMBED란 '삽입하다(to fix (something) firmly into a substance)'라는 뜻이라는 걸 지난번 HTML강좌에서 본적이 있으시지요? 그러니까.. HTML문서에 Style Sheet를 끼워넣는다는 뜻이 되겠네요? Embedded Style Sheet는 < HEAD >와 < /HEAD >사이에 < STYLE >...< /STYLE >형식으로 삽입되어 해당 페이지 전체 태그에 영향을 줄 수 있습니다. 이 유형은 가장 일반적으로 사용되는 유형입니다.

HEAD내에 < STYLE >과 < /STYLE > 태그로 묶은 스타일 블록(block) 안에 스타일 룰의 묶음(a set of style rules)으로 구성되며, 각 스타일 룰은 HTML element마다 또는 element 그룹을 위한 스타일을 정의합니다.

스타일 룰은 다음과 같이 2개 부분으로 되어있습니다.

 

1. HTML element나 element 그룹을 지정한 SELECTOR 
2. SELECTOR에 적용할 style property 선언 

각 스타일 룰은 selector로 시작하며, { }로 묶은 선언 부분이 따라옵니다. semi-colon(;)으로 각 선언 부분을 마치며, 속성과 값은 colon(:)으로 구분합니다. 마지막으로 붙이는 semi-colon(;)은 생략이 가능합니다.

CSS에서 대소문자 구별은 HTML 사용법과 마찬가지로 하지 않습니다.
< !-- -- > 로 감싸준 것은 CSS를 이해하지 못하는 웹 브라우저를 위한 것입니다. 그것을 처리하지 못하면 무시하므로 따로 붙이지 않아도 별 문제가 없을 것 같지만, head가 아니라 body 섹션으로 해석할 가능성이 있습니다. 그래서 SGML comments(< !-- -- >)로 감싸주는 것입니다. 

※ 아래는 SELECTOR를 HTML태그를 이용하여 예를 들어 보았습니다.

 

< HTML >
< HEAD >
< TITLE >스타일 시트 활용예제 입니다.< /TITLE >
< STYLE type="text/css" >
< !--
H3{font-family:굴림;color:red;}
H6{font-family:굴림;color:green;}
H1{font-family:굴림;color:blue;}
-- >
< /STYLE >
 
< /HEAD >
< BODY >
< H3 > 어때요? H3에는 H3의 선언문이 적용되었죠?< /H3 >
< H6 > 여기에는 H6의 선언문이 적용된것이 보이나요?< /H6 >
< H1 > 여기도 마찬가지죠? 삼척동자도 압니다.< /H1 >
< H4 > 여기는 스타일이 적용 안된 곳이네요? 왜 그런지 아시죠?< /H4 >
< /BODY >
< /HTML >

어때요? H3에는 H3의 선언문이 적용되었죠?
여기에는 H6의 선언문이 적용된것이 보이나요?
여기도 마찬가지죠? 삼척동자도 압니다.
여기는 스타일이 적용 안된 곳이네요? 왜 그런지 아시죠?

 

< HEAD >와 < HEAD >사이에 스타일 룰의 묶음(a set of style rules)이 보이나요? embedded style sheets는 inline styles보다 더 많은 융통성을 제공할 수 있습니다. 예를 들어서 TD element마다 배경색을 지정하였다면, < TD >에 적용하는 "background-color" 속성의 값만 수정하면 그 문서에 있는 모든 테이블의 데이터의 배경색을 단번에 바꿀수 있습니다.

즉.. 중앙통제식이라고 표현할 수 있겠군요. 작성자는 스타일 시트를 변경하거나 새로 추가하는 작업을 이 STYLE의 속성값을 수정하여 빠르고 간편하게 할 수 있습니다. 
 

HTML과 CSS의 주석의 차이점

 

HTML의 주석 ☞ < !-- -- >

HTML의 주석달기는 < !-- -- > 안에 들어간 문자를 보이지 않게 하는 기능입니다.
또한 복잡한 태그에 대한 부연설명이라고 할 수 있습니다.

CSS의 주석 ☞ < !-- -- >

CSS를 지원하지 않는 브라우저를 만나면 CSS를 적용하지 않습니다.
일반적으로 < !-- -- >안에 CSS를 담아두면 사용자가 CSS를 지원하지 않는 브라우저를 사용하고 있다면 CSS가 적용되지 않으며, CSS가 지원되는 브라우저를 사용하고 있다면 정확히 화면에 표현해 줍니다.
브라우저는 에러가 난 부분을 제외한 나머지 부분만을 수용합니다.
즉, 브라우저가 HTML문서를 읽어 들이다가 CSS 정의 부분이 오타로 인해 문제가 발생하면 < !-- -- >부분에 있는 CSS는 오타가 발생한 부분을 제외한 나머지 부분만을 브라우저에 적용시킵니다.
 
 
이처럼, CSS에서의 주석과 HTML에서의 주석은 기능적인 면에서 "보이지 않게 한다"는 의미에서는 동일하지만, 적용되는 용도는 분명 차이가 있습니다. 그렇다면 복잡하게 늘어난 부분에 주석을 달고 싶을 때는 어떤 기능을 사용할까요?
일반적으로 C언어에서 자주 사용하는/*............*/형식을 사용합니다.

 

 

 

Linking Style Sheet

 

Linking Style Sheet는 다시 External Style Sheet와 Imported Style Sheet로 나눌 수 있습니다.

External Style Sheet

 

< LINK rel="stylesheet" type="text/css" href="스타일시트 파일이름" >

 

rel속성 : "relation" 즉 "불러올 파일과 현재 문서와의 관계"를 말합니다. 다시 말해서 링크한 파일을 스타일 시트로 사용한다고 지정하는 것입니다.

type속성 : style로 사용할 것이 무엇인지를 지정하는 속성입니다. CSS, Javascript 등 여러 랭귀지로 style을 사용할 수 있고 앞으로 더 늘어날 수도 있기 때문입니다. 어떤 TYPE인지 따로 적지 않으면 "text/css"를 기본 MIME Type으로 지정합니다.

type 속성은 META 태그에서 디폴트로 스타일시트를 설정해 놓으면 사용하지 않아도 되는 속성입니다.

 

※ 메타태그에서 type 속성 설정법

< Meta http-equiv="content-style-type" content="text/css" >

href속성 : 외부에 저장해둔 스타일시트 파일의 URL(절대경로 or 상대경로)을 지정하는 속성입니다. 
 
External Style Sheet는 쉽게 말해 외부 문서를 불러와 적용하는 방식입니다.

그러니까.. 앞에서 배운 embedded style sheet에서 head안에 들어갈 Style의 내용을 메모장에서 따로 파일 한 개(*.css)를 만들어 링크하는 형식이네요. < HEAD >와 < /HEAD >사이에 Style 태그가 보이지 않습니다. 이곳에 적용되는 Style 태그는 따로 css파일 로 만들어서 < HEAD > 내에 링크형식만 적어줍니다.

External Style Sheet는 CSS파일(*.css)을 불러와서 적용하는 방식으로 웹사이트 전체에 통일된 스타일시트를 적용시킬 수 있기 때문에 가장 강력한 방법이라고 할 수 있습니다. 이 방법은 같은 스타일 시트를 사용하는 문서가 여러 개일 경우 가장 효과적입니다. 고쳐야 할 HTML 문서가 100 페이지가 넘어도 스타일 시트 파일에서 필요한 부분만 가볍게 수정할 수 있기 때문이죠.^^ 
 
< HTML >
< HEAD >

< TITLE >스타일 시트 활용예제 입니다.< /TITLE >

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

< /HEAD >
< BODY >
< H1 > 스타일시트 외부문서 불러오기< /H1 >
< P > 외부문서의 저장은 *.css로 저장하세요.< /P >
< H2 > 스타일시트 외부 문서 불러오기 끝~~< /H2 >
< /BODY >
< /HTML >

 

 

< HEAD >와 < /HEAD >사이에 스타일 태그가 보이지 않죠. Linking Style Sheet방식은 < HEAD >와 < /HEAD >사이에 링크 형식만 적어줍니다.  먼저 메모장을 실행하고 스타일시트의 내용을 적은 다음, list.css라고 저장합니다.

 

※ 불러올 파일을 꼭 *.css라고 만들어 주어야 할까요?
일반적으로 스타일시트는 반드시 *.css라고 알고 있는데, "txt"로 저장을 하거나, "index, default" 등과 같이 확장자가 없어도 무난합니다. 다만 *.css로 저장하는 이유는 css 파일이라는 것을 쉽게 알아보게 하기 위해서이고 MIME Type 지정도 유리하기 때문입니다.  < HEAD > 내에 링크 형식으로 스타일 시트를 적고, 위에서 작성한 link.css를 저장한 다음, 이 HTML문서의 결과를 확인해보세요.

 

Externa Style Sheet의 난점은 웹사이트의 모든 문서를 하나의 파일에서 전체관리를 한다는 것입니다. 그만큼 편리하기도 하지만, 설계가 잘못되어 향후 변경이 가해진다면 많은 문서들에 문제거리를 만들어 낼 수 있다는 것입니다. 따라서 External Style Sheet는 좀 더 체계적인 준비와 설계가 필요한 스타일시트입니다. 

 

Imported Style Sheet

< STYLE type="text/css" >
< !--

@import url("파일명");

-- >
< /STYLE >
 

Imported Style Sheet는 External Style Sheet와 똑같이 외부문서를 불러오는 방식입니다. 하지만.. 앞에 @import라는 기호를 적어주는 점이 다릅니다.  @import는 External Style Sheet와는 달리 항상 < Style >...< /Style>태그와 함께 사용됩니다.  @import는 @import url("파일명"); 이외에 @import url "경로" 로 적는 두 가지 방식이 있습니다.

이것은 다른 스타일 시트에서 지정한 것보다 우선권을 갖습니다. 스타일 블록(< STYLE >...< /STYLE >)이나 연결한 스타일 시트 파일 첫 부분에 있어야 합니다.  Netscape Communicator 4에서는 아직 @import를 지원하지 않습니다.
 

< HTML >
< HEAD >
< TITLE >@import 적용방식 입니다.< /TITLE >

< STYLE type="text/css" >
< !--
@import url("import.css");
-->
< /STYLE >

< /HEAD >
< BODY >
< P >이렇게도 사용이 된답니다. 참 신기하죠? < /P >

적용되지 못한 나는 이렇게 버림받았어요.ㅠ.ㅠ

< /BODY >
< /HTML >

 

 

※ External Style Sheet와 Imported Style Sheet의 차이점은?

 

External Style Sheet와 Imported Style Sheet의 공통점은 둘 다 Linking Style Sheet로 외부에서 파일을 불러 오는 형식이라는 점입니다.  차이점이 있다면, Imported는 < STYLE >태그를 사용하며 External은 < STYLE >태그를 사용하지 않습니다.  그리고 Imported는 우선 법칙에 따라 < STYLE >태그 내부에서 제일 상단에 적용되지 않으면 적용의 의미가 없는 태그입니다. 
 

스타일의 우선순위 규칙

 

 

CSS의 C는 Cascading이라는 말의 약자로, 여러 개의 스타일시트를 계단식으로 정렬하여 페이지를 만들어 낸다는 의미를 가지고 있습니다. 즉, 계단식 정렬이라 함은 여러 개의 스타일시트 중 어떤 것이 우선 순위에 놓이는가를 의미하기도 하는데, 앞서 언급한 네 가지의 적용방법이 있는가 하면 그 네 가지의 방법에도 적용에 따라 갖가지 방식들이 만들어 집니다. 이렇게 많은 CSS를 만드는 데 있어서 우선 순위는 반드시 제작에 있어서 정해질 필요가 있습니다.

선언문에 ! important를 넣어주면 적용 위치와 상관없이 항상 우선 적용됩니다.

P{font-size:9pt;color:green !important}
P{font-size:10pt;color:blue;}

이렇게 적었을 때 문서 내의 모든 P태그는 9pt/green으로 표현됩니다.

네 가지의 스타일 시트가 적용되었을 때 우선순위는 제일 마지막에 적은 스타일 시트가 우선순위를 가집니다.  즉, < BODY > 내부 태그에 가장 가까이 적용된 스타일시트가 우선권을 가집니다.

 

W3C에서는 위의 네 가지 스타일시트의 순서를 다음과 같이 기록해 두고 있습니다. Inline Style Sheet > Embedded Style Sheet >Linking Style Sheet,@import  하지만, 이 방법이 꼭 일치하는 것만은 아닙니다.
위의 W3C에서 분명 Embedded Style Sheet가 Linking Style Sheet보다 우선한다고 설명을 해두고 있지만, 위의 예제의 결과는 아래와 같습니다.

 

< HTML >
< HEAD >
< TITLE >스타일의 우선규칙< /TITLE >

< STYLE type="text/css" >
< !--
P{font-size:9pt;color:blue}
-->
< /STYLE >

< /HEAD >
< LINK rel="stylesheet" type="text/css" href="style.css" >
< BODY >
< P >이런 경우에 나는 어떻게 표현해야 하나요?< /P >
< /BODY >
< /HTML >
※ Embedded Style Sheet

< STYLE type="text/css" >
< !--
P{font-size:9pt;color:blue}
-->
< /STYLE >

 

위에서는 Linking Style Sheet가 적용되었습니다.
W3C에서는 분명 Embedded Style Sheet가 Linking Style Sheet보다 우선한다고 설명을 해두고 있지만, 결과는 15pt/빨강색으로 화면에 나타납니다.  이것은 스타일시트를 적용할 때 어떤 것이 나중에 적혔느냐에 따라서 또 다시 결과가 바뀔 수 있습니다.

즉, < LINK rel="stylesheet" type="text/css" href="style.css" >의 위치가 < Style >...< Style >아래 있는 것이 아니라 위에 놓이게 되면 이번에는 9pt/파랑색으로 화면에 나타납니다.  해당 요소에 해당하는 선언문이 없을 경우에는 상속된 값을 따르는데, 이 상속된 값이 없을 경우에는 브라우저 디폴트 값을 가집니다.

선택자 중에서도 HTML을 선택자로 지정한 것보다 문장 선택자가 우선에 놓이며, 문장 선택자보다는 class 선택자가, class선택자 보다는 ID 선택자가 우선 순위에 놓입니다.

 

 

ID선택자>CLASS선택자 >문장선택자 > HTML선택자 

 

 

 

 

xhtml은 html+css 라고 보면 됩니다

 

p {font-size:12px;}

 

이것의 뜻은 모든 p태그에는 12px만큼의 폰트 크기를 주게됩니다

 

 

p a {font-size:14px;}

 

이것의 뜻은 p 태그 안에있는 a 태그들한테만 폰트크기를 14px로 주라는 이야기입니다

 

p, a, body {font-size:16px}

이것의 뜻은 p태그와 a태그 body 태그의 내용들은 폰트크기를 16px로 주라는 뜻입니다

 

위처럼 정한후에 <p>내용을 <p>내용</p> 를 사용하게 되면 자동으로 위에서 정한것이 적용됩니다

 

 

스타일시트 구성

 

태그 {속성:속성값; 속성:속성값;……}

태그 : 적용할 태그 혹은 id, class

속성 : 어떠한것을

속성값 : 어떻게 적용한다

 

즉, font {color:red; font-size:12px;}

 

html 문서에 있는 font 란 태그들은 모두 font의 색깔은 빨강으로 적용한다는 뜻

 

속성:속성값 으로 : 을 이용하여 구분합니다

다른 속성을 적용할때는 ; 을 이용하여 나눈후 위처럼 계속 이어 나갑니다

 

 

 

스타일시트에서 중요한 class와 id

 

 

클래스(class)는 웹페이지내에 동일한 이름을 여러번 사용해서 일관성을 준다.
아이디(id)는 웹페이지내에 동일한 이름이 중복될수 없고 DHTML을 적용할때 사용.

 

.ccc {font-color:red;}

 

이 뜻은 class를 ccc라는 이름으로 정해주고 이 이름을 가진것들의 글자를 빨강으로 하라 입니다. 이렇게 정한것을 태그에 적용하기 위해서는 태그에 class=이름을 적어주시면됩니다. 위 내용을 div 태그에 적용하고 싶다면 <div class="ccc">라고 하면 위에서 정한것이 적용됩니다. 또 font 태그에 적용하고 싶다면 <font class="ccc">라고 하면 font 태그에 정해집니다. 이 class 는 아주 여러번 원하는곳에서 사용이 가능하답니다.

 

 

#ccc {font-color:green;}

 

이 뜻은 id의 이름을 ccc로 준다는 이야기입니다. 위 내용은 ccc라는 id를 가진 태그에 폰트 색깔은 초록색으로 준다는