CSS Selector에 대해 알아봅시다~ [초급편] > html

CSS의 시작은 Selector로부터 한다고 말을 해도 과언이 아닙니다.
그 이유는 모두가 알고 있겠지만,
Selector 즉 선택자가 존재하지 않는다면 선언된 CSS가 어떤곳에 적용을 해야 할지 모르기때문이죠.
명령은 했지만, 누구에게 명령을 한건지 모르는것과 비슷하다고 해야 할까요..?
그리고 궁극적으로 CSS을 코딩할려면, Selector부터 코딩해야 하니깐요..ㅎㅎ

물런 inline-Style로 코딩을 한다면 Selector가 필요없을 지 도 모르겠지요.
하지만, 이런 코딩방식은 CSS의 장점을 제대로 활용못한 것이기 때문에, 개발단계 있을때 혹은 디버깅중일때, 즉 임기응변 용으로가 아니면 권고하고 싶지 않은 코딩방식입니다.


그럼 우선 Selector의 종류에 대해서 알아보겠습니다.
Selector는 크게 4종류로 나눌 수 있습니다..

• 공통 선택자 (Universal Selector)
  
• 타입 선택자 (Type Selector) 저는 개인적으로 태그 선택자 혹은 엘레먼트 선택자 라고 하는게 더 직관적이라고 생각합니다. ㅎㅎ
• ID 선택자 (ID Selector)
• Class 선택자 (Class Selector)

W3C에서 나온 Selector에는 종류가 훨신 많습니다만, 실제로

• Type Selector
  
• ID Selector
  
• Class Selector
  

이 세가지가 선택자들의 Root 이기 때문입니다.

그래서 이번 포스팅인
초급에선, 대표적인 선택자들과 기본적 사용법에 대해서 알아보겠습니다.
중급에선, 선택자를 좀 더 응용하는 편으로 진행할 계획이며
고급에선, 가상 엘레먼트 접근에 대해 포스팅할 예정입니다.


1. 공통 선택자 (Universal Selector)
공통 선택자는 * 를 말하는 것입니다.
이 녀석이 하는일은, 이 녀석의 이름을 보면 아시겠지만..
모든것을 선택하는 것입니다. DOS 시절에서 쓰던 * 와 마찬가지죠.
정규표현식에서도 조금 틀리지만 비슷한 의미로 사용되죠 ㅎㅎ

간단한 예제를 들면

이렇게 선언된 HTML 파일의 모든 엘레먼트들은(혹은 태그들은) margin:0px;padding:0px;border:0px;을 선언하게 되는겁니다.

보통, 위의 예제처럼 CSS 초기화할때 많이 사용합니다.
초기화하는 이유는, 크로스브라우징을 위해서 입니다~,
브라우져별로 기본적으로 주어지는 margin 과 padding 값이 틀리거든요..
(IE는 버젼마다 틀리다는 소문이..흠흠 ㅎㅎ)

2. 타입 선택자 (Type Selector)
타입 선택자....??? 이름만 봐선 이놈이 뭐하는 놈인지 모르겠군요..
그럼 어디한번 뭐하는 놈인지 한번 볼까요..?
우선 W3C에서는 뭐라 정의했나 함 보겠습니다.

A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.

흠....뭐라 하는지 아시는분 해석좀 해주세요 -ㅛ-;
아는 단어만 해석하면;;

라는군요..뭐래는겨 ㅡ,.ㅡ
뭐라 말하는지 모르겠군요..

그럼 코드를 한번 볼까요?

이해하셨나요?
문서언어는 HTLM을 말하는것이고
엘레먼트 타입은, HTML 태그를 말하는 것이고
이름은, 태그의 명칭을 말하는 것이죠
즉, p, h1, div, span, table, ul, ol, li, form, legend, fieldset 같은 HTML 태그를 선택하는 선택자 인것이죠.

그래서, 제가 엘레먼트 선택자 혹은 태그 선택자라고 하는게 더 직관적이라고 한거에요 ㅎㅎ

타입 선택자의 사용방법은 위의 예제코드에서 보셨겠지만. 해당되는 태그를 지시어 없이 HTML 태그의 명칭만 선언해주면 됩니다.
간단하죠~?


3. ID 선택자 (ID Selector)
ID 선택자.., 오 이 녀석은 이름만 봐도 뭐하는 놈인지 대충 알 것 같죠?
이런식으로 네이밍 해주면 얼마나 좋아~, 타입 선택자가 모야. ;p

JS를 위해서 엘레먼트에 id 라는 애트리뷰트를 쓰지만, CSS에서도 엄청나게 많이 쓰입니다.

> 여기서 잠깐! 알아두면 좋아요(클릭클릭) <

JS에서는

이런식으로 엘레먼트 ID를 이용해, 엘레먼트에 접근을 하죠.
CSS 에서는 # 라는 지시어를 사용합니다.

이런식으로 사용을 합니다.

> 여기서 잠깐! 알아두면 좋아요(클릭클릭) <

4.Class 선택자 (Class Selector)
자, 이번 포스팅의 마지막챕터까지 왔군요.
Class 선택자.. 이 녀셕도 ID 선택자처럼 이름을 보면 딱 아시겠죠?

class 라는 애트리뷰트는 CSS를 위해 존재하는 애트리뷰트라고 보시면 됩니다.
(물런, 개발자가 어떠한 목적을 가지고도 쓸 수 있죠.)

id와 달리 이녀석은 중복선언되어도 괜찮습니다. CSS를 위해 존재하는 애트리뷰트인데 중복선언이 안되다면, 그 수많은 CSS를 코딩할 생각만 해도..;;;

이 녀석의 지시어는 . 입니다.

이런식으로 사용이 되지요