[CSS] 선택자의 종류와 사용법

 

 

 

 

 

 

HTML과 CSS를 구분할 때

CSS = 화면 디자인 

이렇게 단순하게 생각해도 좋다. 

 

 

화면 디자인을 하기 앞서 

선택자를 반드시 알아야 한다. 

 

 

그렇다면 선택자는 무엇일까? 

 

 

 

 

 

선택자

---

CSS는 외부 CSS, 내부 CSS, 인라인 CSS로 사용된다. 

외부 CSS와 내부 CSS는 태그 하나 하나에 직접 디자인을 적용시키는 것이 아니라 

전체 태그 중 다수 또는 소수의 태그에 디자인을 적용시킨다. 

 

만약 한 페이지 안에 <h1> 태그가  10,000개가 존재한다고 생각해보자. 

만개의 <h1> 태그 중 특정 테이블 안에 존재하는 <h1> 태그의 디자인만 변경하고 싶다. 

그럼 어떻게 찾을 수 있을까? 이때 필요한 것이 선택자이다. 

 

선택자는 태그만이 갖는 특성을 이용해서 원하는 태그를 찾을 수 있도록 '구분'한다. 

 

 

 

 

 

*     전체 선택자 

---

페이지 내부에 있는 모든 태그를 선택한다. 

글씨체 처럼 페이지에서 일괄적으로 지정하는 부분에서 사용된다. 

주로 margin, font-family , font-size 속성이 사용된다. 

<style> * {        속성 : 값;        속성 : 값; } </style>

* 전체 선택자를 이용했기 때문에 페이지 전체 속성이 변경된다.

 

 

 

 

 

< >   태그 선택자

---

페이지 내부에 있는 태그 중 특정 태그를 선택한다. 

h1태그라면 h1태그를 

table 태그라면 table 태그를 

원하는 태그 전체에 대해서 디자인을 적용시킬 수 있다. 

 

<style> 태그명 { 속성 : 값 } </style>

원하는 태그명을 지정하고 원하는 속성대로 디자인한다.

<style> 태그명, 태그명, 태그명{ 속성 : 값 } </style>

멀티 지정도 가능하다. 아무 태그나 상관없이 다중 선택 가능하다.

 

 

 

 

#    아이디 선택자

---

태그마다 id 값을 입력할 수 있다. 

지정한 id별로 디자인을 지정할 수 있는 것이다. 

id 속성은 개별 선택자이기 때문에 웹 페이지 내부에서 중복될 수 없다. 

 

<table id="memo"> 일 때 

<table id="memo2"> 처럼 값이 서로 달라야 함. 

 

<style> #아이디명 { 속성 : 값 } </style>

원하는 아이디명을 지정하고 원하는 속성대로 디자인한다.

<style> #아이디명, #아이디명, #아이디명 { 속성 : 값 } </style>

멀티 지정도 가능하다.

 

.    클래스 선택자 

---

 

id가 개별 값이라면 클래스는 다수를 구분할 때 사용한다. 

학교에서 각 반을 클래스로 구분하는 것처럼 

색상을 밝은 색으로 지정할 그룹과 

색상을 어두운 색으로 지정할 그룹의 이름을 구별하면

그룹별로 디자인을 다르게 입힐 수 있다. 

<style> .클래스명 { 속성 : 값 } </style>

원하는 클래스명을 지정하고 원하는 속성대로 디자인한다.

<style> .클래스명, .클래스명, .클래스명 { 속성 : 값 } </style>

멀티 지정도 가능하다.

 

 

 

 

후손 선택자와 자손 선택자 

---

 

위의 그림을 통해 태그 사이의 관계를 먼저 이해 한 후 아래의 표를 확인하도록 하자. 

 

태그 관계	형태	설명
후손	선택자A 선택자B	선택자A의 후손인 선택자B를 선택
자손	선택자A > 선택자B	선택자A의 자손인 선택자B를 선택
인접	선택자A + 선택자B	선택자A와 동급인 선택자B를 모두 선택
동급	선택자A ~ 선택자B	동급인 선택자A 부터 선택자B 까지 선택

 

 

 

 

 

 

 

 

 

이상으로 선택자에 관한 글을 마치겠다. 

 

 

 

:)