그룹화



그룹화(Grouping)란?

스타일시트를 적용하다 보면 처음 예상했던 것보다 훨씬 더 많은 스타일들을 만들어 내곤 합니다. 이곳에서 다루게 될 그룹화(Grouping)는 스타일시트로 적용할 유사한 스타일들을 묶어 HTML 문서의 약점인 동일 태그 반복을 최대한 피하고, 스타일을 보다 원활하게 관리하는 데 그 목적이 있습니다.

선택자의 그룹화
< HTML >
< HEAD >
< TITLE >선택자의 그룹화< /TITLE >
< STYLE type="text/css" >
< !--
H1{font-family:굴림 ; color:blue ; font-size:9pt;}
H2{font-family:굴림 ; color:blue ; font-size:9pt;}
H3{font-family:굴림 ; color:blue ; font-size:9pt;}
 ☜ 선언문이( font-family:굴림 ; color:blue ; font-size:9pt;)로 세개가 모두 동일합니다.
-- >
< /STYLE >
< /HEAD >
< BODY >
↓
< H1 >그룹화를 이용하면 간단히 줄일 수 있어요< /H1 >
< H2 >그룹화를 이용하면 간단히 줄일 수 있어요< /H2 >
< H3 >그룹화를 이용하면 간단히 줄일 수 있어요< /H3 >
그룹화
 H1,H2,H3(font-family:굴림 ; color:blue ; font-size:9pt;)

< /BODY >
< /HTML >


선택자의 그룹화

그룹화를 이용하면 간단히 줄일 수 있어요

그룹화를 이용하면 간단히 줄일 수 있어요

그룹화를 이용하면 간단히 줄일 수 있어요

  • 위의 < HEAD >...< /HEAD >사이에 있는 스타일시트를 잘 보세요. 모두 똑같죠?
  • 이처럼 선언문들이 동일할 경우 선택자들을 그룹화해 줄 수 있습니다.
  • 위의 예제에서 적용한 스타일시트의 선택자는 H1, H2, H3이며 선언문은 font-family:굴림 ; color:blue ; font-size:9pt;입니다.
    여기서 공통된 부분을 그룹화하여 다음과 같이 구성합니다.

    H1{font-family:굴림 ; color:blue ; font-size:9pt;}
    H2{font-family:굴림 ; color:blue ; font-size:9pt;}
    H3{font-family:굴림 ; color:blue ; font-size:9pt;}

    ↓

    H1,H2,H3 {font-family:굴림 ; color:blue ; font-size:9pt;}


  • 이렇게 선택자들을 콤마(,)로 나열하여 그룹화합니다. 3줄로 제작되었던 선언문을 한 줄로 정리할 수 있습니다. 여기서 꼭 기억해야 할 부분은 선택자를 그룹화할때는 콤마(,)로 구분을 한다는 것입니다.


속성의 그룹화

선택자의 그룹화처럼 속성을 그룹화하는 방법도 있습니다. 선택자처럼 그룹화할 수 있는 속성에는 font, background, margin, border등이 있습니다.
< HTML >
< HEAD >
< TITLE >속성의 그룹화< /TITLE >
< STYLE type="text/css" >
< !--
P{border-width:2 ; border-style:dotted ; border-color:black;}
-- >
< /STYLE >
< /HEAD >
< BODY >
< P >속성의 그룹화는 이렇게 만들어 집니다< /P >
< /BODY >
< /HTML >


속성의 그룹화

속성의 그룹화는 이렇게 만들어 집니다

  • 위의 < HEAD >...< /HEAD >사이에 있는 스타일 선언문 중, 속성부분을 보면 뭔가 공통된 부분이 있습니다. border라는 속성들이 공통적으로 적용된 것이 보이시나요?
  • border-width는 테두리의 두께를 말하고, border-style은 테두리의 형태가 점선으로 구성된 것을 말합니다. border-color는 테두리의 색상입니다.
  • 자~!! 그럼... 동일한 속성(border)을 정리하여 그룹화 합니다.

    P{border-width:2 ; border-style:dotted ; border-color:black;}

    ↓

    P {border :2 dotted black ;}


  • 지금까지 보지 못한 형태죠? boder라는 공통 속성을 찾아서 일단 적습니다. 그리고 속성과 값을 구분하는 것이 콜론(:)입니다. 그럼 :(콜론)을 찍고 각각의 값들 한 칸씩 간격을 두면서 적어주면 됩니다.



CSS를 꼭 사용해야 하나요?

  1. HTML은 기본적으로 웹상에 페이지 구조(틀)만을 만들 수 있는 Markup Language여서 활용성은 부족합니다.
  2. 또한 HTML로 웹페이지의 레이아웃을 잡기에는 한계가 있는 것 또한 사실입니다.
  3. 지금 배우고 있는 과정이 다소 어렵게 느껴질 수 있으나 좀 더 훌륭한 웹페이지를 제작하고자 한다면 CSS는 필수적으로 사용해야 합니다.


CSS는 단순히 HTML의 확장 개념으로만 사용되나요?

  1. 가장 기본적인 CSS의 활용은 HTML입니다.
  2. 하지만 조금 더 다른 각도로 확장해 본다면 CSS는 DHTML에 사용되며, 요즘 한창 물이 오른 XML에도 영향을 주는 언어입니다.

※ DHTML(Dynamic HTML)이란 ?
말 그대로 웹 페이지를 동적으로 만들어 주는 개념입니다. DHTML의 원리는 웹 페이지를 구성하는 모든 요소를 객체화하고, 이들을 스크립트로 접근하여 객체들의 특성을 바꾸는 것입니다. 그러므로 따로 "DHTML"이란 언어가 있는 것은 아닙니다. 다만 지금까지 배우신 CSS로 객체를 정의하고, JAVASCRIPT나 Jscript, VBScript 등을 결합하면 그것이 바로 DHTML이 되는 것입니다. 그러므로 마음대로 DHTML을 활용하고자 한다면 CSS와 스크립팅 언어(여러 가지 스크립팅 언어 중에서도 JAVASCRIPT가 가장 많이 사용됩니다.)를 완벽하게 이해하는 것이 선행되어야 합니다.
☞ DHTML = CSS-P + JavaScript1.2

※ XML(eXtensible Markup Language)이란 ?
기존의 html의 tag의 한계 SGML의 문법의 복잡성등을 개선하여 W3C에서 제안한 표준언어입니다. 이렇게 보면 될 것 같아요. 기존의 html은 data와 view를 하나로 표현함으로 인해서 data의 의미를 살릴수 없었습니다. 하지만 XML은 완전히 데이터, 그 자체만 나타내주고 data의 view는 XSL등의 style sheet으로 분리함으로 인해 data와 view의 완전 분리를 실현한 것이지요.(참고 ☞XML이란?, What is XML? )

어때요?? 귀찮아도 CSS를 꼭 알아두어야겠지요?