적용위치 2



이번시간에는 CSS를 HTML문서에 적용하는 방법 중에서 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 상대경로)을 지정하는 속성입니다.

  1. External Style Sheet는 쉽게 말해 외부 문서를 불러와 적용하는 방식입니다.
  2. 그러니까.. 앞에서 배운 embedded style sheet에서 head안에 들어갈 Style의 내용을 메모장에서 따로 파일 한 개(*.css)를 만들어 링크하는 형식이네요.^^
  3. < HEAD >와 < /HEAD >사이에 Style 태그가 보이지 않습니다. 이곳에 적용되는 Style 태그는 따로 css파일 로 만들어서 < HEAD > 내에 링크형식만 적어줍니다.
  4. External Style Sheet는 CSS파일(*.css)을 불러와서 적용하는 방식으로 웹사이트 전체에 통일된 스타일시트를 적용시킬 수 있기 때문에 가장 강력한 방법이라고 할 수 있습니다.
  5. 이 방법은 같은 스타일 시트를 사용하는 문서가 여러 개일 경우 가장 효과적입니다. 고쳐야 할 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 >		 ※ link.css의 파일 내용.


h1,h2{ color:blue;}
p{font-size:12pt;color:red;}





스타일 시트 활용예제 입니다.

스타일시트 외부문서 불러오기

외부문서의 저장은 *.css로 저장하세요.

스타일시트 외부 문서 불러오기 끝~~



  • < 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 >

  1. Imported Style Sheet는 External Style Sheet와 똑같이 외부문서를 불러오는 방식입니다. 하지만.. 앞에 @import라는 기호를 적어주는 점이 다릅니다.
  2. @import는 External Style Sheet와는 달리 항상 < Style >...< /Style>태그와 함께 사용됩니다.
  3. @import는 @import url("파일명"); 이외에 @import url "경로" 로 적는 두 가지 방식이 있습니다.
  4. 이것은 다른 스타일 시트에서 지정한 것보다 우선권을 갖습니다. 스타일 블록(< STYLE >...< /STYLE >)이나 연결한 스타일 시트 파일 첫 부분에 있어야 합니다.
  5. Netscape Communicator 4에서는 아직 @import를 지원하지 않습니다.
※ 예제를 보실까요?
< HTML >
< HEAD >
< TITLE >@import 적용방식 입니다.< /TITLE >

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

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

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

< /BODY >
< /HTML >		 ※ import.css의 파일 내용.



h1,h2{ color:blue;}
p{font-size:12pt;color:red;}








@import 적용방식 입니다.

이렇게도 사용이 된답니다. 참 신기하죠?

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


※ 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를 만드는 데 있어서 우선 순위는 반드시 제작에 있어서 정해질 필요가 있습니다.

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

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

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

  2. 네 가지의 스타일 시트가 적용되었을 때 우선순위는 제일 마지막에 적은 스타일 시트가 우선순위를 가집니다.

    즉, < 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 >


    ※style.css파일의 내용
    P{font-size:12pt;color:red;}

    스타일 우선순위 규칙

    이런 경우에 나는 어떻게 표현해야 하나요?




    • 위에서는 Linking Style Sheet가 적용되었습니다.
    • W3C에서는 분명 Embedded Style Sheet가 Linking Style Sheet보다 우선한다고 설명을 해두고 있지만, 결과는 15pt/빨강색으로 화면에 나타납니다.
    • 이것은 스타일시트를 적용할 때 어떤 것이 나중에 적혔느냐에 따라서 또 다시 결과가 바뀔 수 있습니다.
      즉, < LINK rel="stylesheet" type="text/css" href="style.css" >의 위치가 < Style >...< Style >아래 있는 것이 아니라 위에 놓이게 되면 이번에는 9pt/파랑색으로 화면에 나타납니다.

  3. 해당 요소에 해당하는 선언문이 없을 경우에는 상속된 값을 따르는데, 이 상속된 값이 없을 경우에는 브라우저 디폴트 값을 가집니다.

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

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