적용위치 1



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

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

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

  1. "inline"이란 한 줄로 늘여서 함께 사용한다는 의미에서 inline이라는 말을 사용하였습니다.
  2. CSS에서 소스의 옆쪽에 나란히 스타일시트를 적용한다는 의미에서 Inline Style Sheet라고 합니다.
  3. 이것의 위치는 < Body >와 < /Body >사이에 있는 태그에 직접 스타일을 삽입하는 방식을 취합니다.
  4. Inline style은 < A >에서 < XMP> 까지 어떤 HTML element라도 적용할 수 있습니다
  5. 이 방법은 문서 내에 같은 element를 사용한 곳 모두 적용하는 것이 아니며, 별도로 지정한 곳에만 스타일을 지정하기 때문에 문서전체에 영향을 주지는 않습니다.
  6. 태그 안에 직접 스타일 시트를 지정하는 것은 지저분한 코딩이 되기가 쉽고, 반복해서 사용하는 스타일이 많아질수록 불필요한 코드가 많아집니다.
  7. 나중에 문서 스타일을 변경할 경우 각 부분을 찾아서 직접 고쳐야 하므로 힘이 듭니다. 문서가 짧을 경우에는 괜찮겠지만.. 문서의 양이 많을 경우.. 정말 힘들겠죠?
  8. 하지만 저처럼 문서의 부분 부분(SPAN이나 TABLE 테두리에 효과주기 등 특정 부분만 스타일 지정할 때)에 이용할 경우에는 아주 유용합니다.


< HTML >
< HEAD >
< TITLE >Inline 스타일 시트 활용예제 < /TITLE >
< /HEAD >
< BODY >

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

< /BODY >
< /HTML >

Inline 스타일 시트 활용예제

원하는 태그에 스타일 시트가 삽입됩니다.

저는 스타일시트를 삽입하지 못했어요. ㅠ.ㅠ


  • < HEAD >와 < /HEAD >사이에 스타일 태그가 없죠?
  • 이것은 < BODY >태그 내부에서 스타일을 적용하고자 하는 태그에 바로 옆에 스타일시트를 적용하는 방법입니다.
  • < P >태그에 스타일이 들어갔죠? 폰트 크기는 9pt, 색상은 파랑색입니다.
  • 이것은 태그 하나하나에 일일이 스타일을 적용해야하는 번거로움이 있습니다.
※ 제가 강좌를 쓸 때도 이것을 조금씩 이용합니다.
어디에 이 style을 넣었는지 시간 나시면 찾아 보세요.^^


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의 주석의 차이점

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

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

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

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

    ※ 주석을 달아 놓으면 복잡하게 늘어난 CSS 코드들을 유용하게 관리할 수 있습니다.
    < HTML >
    < HEAD >
    < TITLE >HTML과 CSS 주석달기의 차이점< /TITLE >
    < STYLE type="text/css" >
    P EM{color:red}
    /*P 태그 다음에 EM 태그를 사용하면 글꼴의 색상은 붉은 색을 적용합니다.*/
    < /STYLE >
    < /HEAD >
    < BODY >
    주석이 안보이죠?
    < P >요기는 < EM >주석< /EM >에서 설명해 놓은 부분입니다.< /P >
    < /BODY >
    < /HTML >

    HTML과 CSS 주석달기의 차이점 주석이 안보이죠?

    요기는 주석에서 설명해 놓은 부분입니다.