CSS 기본 5강 - CSS 파헤치기 ( sector1 ) -
본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라
는 특정인물과 상황을 만들었습니다.
이제 본격적으로 “최삼순”인턴과 함께 CSS를 공부해 볼까요? CSS의 핵심은 스타일을 적용하는 것입니다. 그럼 이제 CSS로 스타일을 어떻게 구현하는지 알아봅시다. 위에서 몇 차례 설명드렸지만 CSS를 사용하지 않을 경우에는 HTML을 구성하고 있는 각각의 Element에 매번 원하는 스타일에 관련된 속성을 적용해야만 합니다. 하지만 CSS를 사용하면 HTML문서가 내용과 스타일이라는 2부분으로 나누어집니다. 그럼 CSS의 스타일부분이 어떠한 방식으로 구성되어 있는지 알아보겠습니다.
selector {property:value}
보시는 것과 같이 CSS에서 스타일을 구현하기 위해서는 3가지 요소가 꼭 필요합니다. 3가지 구성요소 중 첫 번째는 스타일을 적용할 Element를 선택하는 Selector입니다. 여러분의 HTML을 구성하고 있는 Element를 적어주시면 그 Element의 스타일을 지정할 수 있습니다. body, table, tr 등이 여기서 사용 될 수 있습니다. 다음으로 property는 여러분이 선택한 Element의 속성을 정해주는 부분입니다. 가장 간단한 예로는 color이나 width등이 있습니다. 마지막으로 여러분이 지정한 element의 속성의 값을 정해 주는 value가 있습니다. 이 value는 말 그대로 여러분이 원하는 속성의 값을 넣어 주시면 됩니다. 이렇게 CSS는 3가지 요소로 구성되어 있으며 간단하게 다음과 같이 사용할 수 있습니다. p {color: black;} a {text-decoration: underline;} h1 {font-weight: bold;}
위 표는 첫 번째 CSS구성은 p라는 Element의 color라는 property의 속성을 black(검은색)으로 바꾸어 주게 됩니다. 두 번째는 a라는 엘리먼트의 text-decoration(글자 장식)의 속성값을 underline(밑줄)로 바꾸어 주게 되며, 3번째는 h1 이라는 엘리먼트의 font-weight(글자 굵기)를 bold(진하게)로 바꾸어 주게 됩니다. 위의 CSS의 구성에서 여러분은 Selector를 통해 어떠한 Element를 선택하여 그 element의 속성(property)를 고르고 그 속성의 값(value)를 정해주면 되는 것입니다. 이렇게 CSS의 구성에 대하여 알아보았으니 이번에는 구성하고 있는 3가지 요소들에게 대하여 차근차근 알아보도록 하겠습니다.
▶ Element를 스타일에서 선택하기(selector)
처음으로는 여러분이 원하는 Element를 선택할 때 사용하는 선택자(Selector)에 대하여 알아 보겠습니다. 지금까지 여러분이 사용한 선택자 문법은 엘리먼트의 이름을 직접 적어주는 타입선택자(TYPE SELECTOR) 뿐 이였습니다. 하지만 CSS의 선택자는 이외에도 공통선택자, 하위선택자, 자식선택자, ID선택자, CLASS선택자 등이 존재합니다. 각각의 선택자는 그 기능이 전부 다르며, 사용하는 방법도 조금씩 다릅니다. 그럼 지금부터 이 선택자들을 하나씩 알아보도록 하겠습니다.
○ 공통선택자
첫 번째 선택자는 공통선택자입니다. 공통선택자는 문서내에 존재하는 모든 엘리먼트를 선택할 경우에 사용합니다. 예를 들어 여러분이 만드는 문서의 글꼴의 모양을 바꾸고 싶을 경우 모든 엘리먼트를 일일이 선택하기 보다는 공통선택자를 사용하여 기본 글꼴의 모양을 바꿀 수 있습니다. 사용하는 방법은 “*”를 선택자 부분에 기입해 주시면 됩니다.
<HTML> <HEAD> <STYLE> * { FONT : 120%; } </STYLE> </HEAD> <BODY> 기본선택자입니다. </BODY> </HTML>
○ 타입선택자
2번째로 설명드릴 선택자는 여러분이 자주 사용하던 타입선택자입니다. 타입선택자도 공통선택자와 자주 사용하는 선택자이며, 사용방법도 아주 간단합니다. 여러분이 HTML문서에서 사용한 Element를 바로 선택자 부분에 기입해 주시면 됩니다. 특별히 기업해야하는 특수기호도 존재하지 않습니다.
|
<HTML> <HEAD> <STYLE> p { FONT : 120%; } </STYLE> </HEAD> <BODY> <p>기본선택자입니다.</p> </BODY> </HTML> |
위의 HTML문서를 보시면 문서안에서 "p"라는 문단 태그를 사용했습니다. 그리고 상단 <style> </style> 부분에서 바로 “p"를 선택자 부분에 기입하고 ”p"에 대한 속성을 정의해 주었습니다.
○ 하위선택자
다음으로 설명 드릴 선택자는 하위선택자입니다. 하위선택자를 설명하기 이전에 선택자를 구성하는 요소들에 대하여 알아 보겠습니다. 여러분이 지금까지 사용하던 선택자들은 모두 단순선택자로써 element를 직접 기입하거나, “*”와 같은 기호를 사용했습니다. 원래 선택자는 이런 단순선택자와 결합자들로 구성되어 있습니다. 여기서 결합자란 선택자를 구성하고 있는 단순선택자들을 결합시켜주는 기능을 하는 기호들입니다. 그 기호들로는 “+”, “>”, “공백”입니다.
| 단순선택자 결합자 단순선택자 결합자 … {property: value} |
이렇게 단순선택자와 결합자를 나열하여 사용하는 가장 간단한 선택자가 바로 하위선택자입니다. 하위선택자는 단순선택자 사이의 공백(스페이스 1칸)을 주어서 만들어 줄 수 있습니다.
위와 같이 하위선택자를 만들어 준 경우에는 "body" Element에 포함되어 "P"라는 Element를 모두 선택하게 됩니다. 이런 하위선택자의 경우 반복적으로 사용할 수 있습니다.
| body div span p {property: value} |
위의 하위선택자를 해석해 보면 "body" Element에 속해있는 "div" Element에 속해있는 "span" Element에 속한 “p" Element를 모두 선택할 수 있는 것이죠. 간단하죠?
○ 자식선택자
다음으로는 하위선택자와 비교 될 수 있는 자식선택자에 대하여 알아보겠습니다. 자식선택자의 경우에는 하위선택자와 다르게 “공백”으로 단순선택자를 구분하는 것이 아니라 “>” 기호로 구분해 주어야 합니다.
자식선택자는 하위선택자와 다르게 어떠한 Element의 자식만을 선택 할 수 있습니다. 위의 "body" Element의 자식Element로는 table, div, h1, p가 있습니다. 하위선택자는 자식Element들이 포함하고 있는 모든 Element를 선택하지만 자식선택자 오직 자식Element 중에서 적합한 Element만을 선택합니다. 위와 같이 자식선택자를 사용하면 도식에서 가장 오른쪽에 점선으로 되어있는 “P" Element만을 선택하게 됩니다. 이점이 하위 선택자와 다른점이라 할 수 있습니다.
○ ID, Class 선택자
CSS에서 ID와 Class가 어떠한 기능을 하는지 위에서 알아 보았습니다. 이런 ID와 Class를 선택자로 사용하는 방법도 사용해 보았습니다. 선택자 부분에서 “.ID명”을 입력할 경우 ID명과 동일한 Element를 선택하고, 마찬가지로 “#Class명”을 입력할 경우 Class명과 동일한 Element를 선택하게 됩니다. 하지만 원래 ID와 Class 선택자는 다음과 같은 구성을 하고 있습니다.
여러분이 알고 있는 ID를 사용한 선택자 표현 방식인 “.ID”에는 위에서 알아본 공통선택자가 다음과 같이 생략되어 있는 것입니다.
위의 선택자에 대한 해석을 해본다면 “*”공통선택자로 스타일이 적용된 HTML문서의 모든 Element중에서 ID명과 동일한 Element만을 선택하는 것입니다. 이와 같은 특성은 Class선택자에도 적용이 되며, 이런 특성을 이용한다면 여러분이 원하는 Element 중에서 원하는 ID이나 Class를 가진 Element만을 선택할 수 있습니다. 다음과 같이 말이죠.
좌측의 Class 선택자는 "P"라는 Element중에서 maintext라는 Class를 가진 Element만 선택하게 됩니다. 우측의 ID 선택자도 마찬가지로 “P"라는 Element 중에서 maintext라는 ID를 가진 Element만을 선택하게 됩니다.
○ 가상 클래스 선택자
여러분이 지금까지 알아본 선택자들은 Element 또는 그 Element를 지칭하는 ID나 Class를 직접 기입하거나 자식, 하위 선택자와 같이 포함된 Element를 선택하는 방법을 알아보았습니다. 이런 선택자들은 여러분이 직접 그 Element를 만들고 연결해 주어야 합니다. 즉 여러분과 같은 제작자가 수동적으로 Element를 선택하였습니다. 하지만 지금 설명드릴 선택자는 이런 수동적인 선택이 아닌 사용자들의 선택에 따라 활성화 될 수도 있고, 활성화 되지 않을 수도 있는 동적인 Element를 선택하는 방법입니다. 이런 동적인 선택자는 기존의 Element의 ID나 Class가 아니라 Element가 가지고 있는 속성(property)나 특성(attribute)를 이용하는 것입니다. 이것을 CSS에서는 가상 클래스 선택자라고 부릅니다.
하지만 CSS가 다른 웹프로그래밍 언어와 같이 사용자의 모든 선택에 따른 동적인 스타일링을 아직까지는 실행할 수는 없습니다.(CSS2 기준) 아직까지 CSS에서 지원하는 동적인 스타일 선택자는 7가지 뿐입니다. 다음은 그 7가지를 표로 정리 한 것입니다.
다음 강의에서 계속됩니다... CSS기본 6강을 봐주세요