HTML5 & CSS3 배워보자 (6화 : CSS 선택자)

 

이번 6화에서는 선택자(Selector)에 대해 알아보겠습니다. 선택자는 하나의 태그를 지정할 수 있을 뿐 아니라, 여러 요소를 묶어 별도의 선택자로 지정할 수도 있습니다. 이렇게 함으로써 스타일을 일일이 지정하는 대신에 별도의 그룹 요소에 대해 스타일을 쉽게 적용할 수 있습니다. 다양한 종류의 선택자가 있지만, 이번 6화에서는 주로 사용되는 선택자에 대해 우선적으로 알아보겠습니다.

 

 

 

 

전체 선택자 - 모든 요소에 스타일 적용

 

전체 선택자는 모든 요소에 스타일을 적용할 때 사용됩니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용하는 데 활용됩니다. 전체 선택자는 '*'(별표)를 사용하여 표현됩니다. 또한, 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 유용합니다.

 

예를 들어, 웹 문서를 브라우저에 표시할 때 브라우저 창에 너무 가깝게 붙어있어서 디자인이 깔끔하지 않게 보일 때가 있습니다. 이런 경우에는 문서의 바깥 쪽에 'margin'을 두고 문서의 안쪽에는 'padding'을 두어야 합니다. 그러나 이러한 여백 때문에 디자인이 깔끔하지 않아질 수 있습니다. 이때, 전체 선택자를 활용하여 웹 문서 전체에 'margin'과 'padding'을 0으로 지정하여 여백을 초기화할 수 있습니다.

 

<기본형>

* { 속성 : 속성 값; 속성 : 속성 값; ....}

 

 

태그 선택자 - 특정 태그에 스타일 적용

 

태그 선택자(Tag Selector)는 특정 태그가 사용된 모든 요소에 스타일을 적용합니다. 예를 들어, 'p' 선택자를 정의하면 웹 문서의 모든 단락(p 태그)에 스타일이 적용됩니다.

만약 웹 문서의 모든 텍스트 단락의 글자 크기를 14px로 하고 글꼴을 '돋움'으로 하려면, p 태그 선택자를 다음과 같이 정의하면 됩니다.

 

<기본형>

태그 { 속성 : 속성 값;}

 

<예시>

p {
    font-size: 14px;
    font-family: '돋움';
}

 

 

 

클래스 선택자 - 특정 클래스에 스타일 적용

 

태그 선택자를 사용하면 해당 태그가 사용된 모든 요소에 스타일이 적용됩니다. 그러나 동일한 태그라도 다른 스타일을 적용하고 싶을 때에는 특정 부분만 스타일을 적용할 수 있는 클래스 선택자(Class Selector)를 활용합니다.

클래스 선택자는 태그 대신 클래스의 이름을 사용하는데, 클래스 이름은 기억하기 쉬운 이름으로 지정할 수 있습니다. 또한, 클래스 앞에는 반드시 마침표(.)를 붙여서 사용해야 합니다.

만약, 동일 태그 선택자에게만 클래스 선택자를 적용하고 싶으면 마침표(.)앞에 태그를 적어주면 해당 태그의 해당 클래스만 적용 가능합니다.

 

<기본형>

(태그).(마침표)클래스명 { 속성 : 속성 값;}  /* 태그를 생략하면 전체 클래스 대상으로 적용 */

 

<예시>

.bluetext {
    font-size: 14px;
    font-color: blue;
}

 

 

 

 

아이디(id) 선택자 - 특정 아이디에 스타일 적용

 

아이디 선택자(id Selector)는 클래스 선택자와 마찬가지로 웹 문서의 특정 부분에 스타일을 지정할 때 사용됩니다. 클래스 선택자와의 차이점은 클래스 선택자가 마침표(.)를 사용하는 반면, 아이디 선택자는 해시 기호(#)를 사용한다는 점입니다. 또한, 아이디 선택자는 문서 안에서 한 번만 적용 가능합니다.

 

<기본형>

#아이디명 { 속성 : 속성 값; }

 

<예시>

#bluetext {
    font-size: 14px;
    font-color: blue;
}

 

 

 

 

그룹 선택자 - 둘 이상 요소에 동일한 스타일 적용

 

선택자를 이용해 스타일을 정의할 때, 동일한 스타일이 여러 선택자에 사용되는 경우가 있습니다. 이럴 때는 쉼표(,)로 구분하여 여러 선택자를 나열하면 해당 선택자에 동일한 스타일이 적용됩니다.

예를 들어, <h1> 태그와 <h2> 태그에 동일한 스타일을 적용하고 싶다면 'h1, h2'로 연결하여 사용하면 됩니다.

 

<기본형>

태그1, 태그2 ... { 속성 : 속성 값; }

 

<예시>

h1, h2 {
    font-size: 14px;
    font-color: blue;
}

 

 

 

※ 다음화에서는 "CSS3 캐스캐이딩 스타일 시트 우선순위"에 대해서 공부하겠습니다!!

https://zzangdis.tistory.com/38

HTML5 & CSS3 배워보자 (7화 : 캐스캐이딩 스타일 시트 우선순위)