[CSS] 스타일을 지정하는 5가지 방법 (타입/자손/클래스/아이디/가상클래스 선택자)

 CSS에서는 '선택자(Selectors)'를 통해 스타일을 지정합니다. 여기서 선택자는 'HTML의 어떤 요소에 CSS를 적용'할 것인지를 결정하며, 이 글에서는 스타일을 지정하는 5가지 선택자를 알아보겠습니다.

 

[ Contents ]

 

 

1. 타입/태그 선택자

타입/태그(Type/Tag) 선택자: 특정 태그(HTML 요소)에 스타일을 정의할 때 사용

 웹페이지 내 모든 특정 태그에 스타일을 적용할 수 있습니다.

 

h2, h3 {color: red; font-size: 40px;}
* {color: red;}

 예를 들어, 위 css 코드는 웹페이지 내 모든 h2, h3 태그가 빨간색이고, 40px로 지정됩니다.

 힌편, 모든 태그에 적용하고 싶은 스타일은 *(전체 선택자)를 사용해서 정의할 수 있습니다.

 

 

 

2. 자손/자식 선택자

자손(후손) 선택자(Descendent selector): 특정 태그 내 태그(자손)만 스타일을 정의할 때 사용

 태그에도 상하 관계가 있습니다. 부모 태그 내에 있는 태그를 '자식' 태그라고 하며, 자식 태그를 감싸고 있는 태그를 '부모' 태그라고 합니다.

 

 

div {color: red; font-size: 40px;}
div p {color: blue;}

  <div>
    부모: div
    <p>자식: p</p>
  </div>

 자손 선택자는 '부모 자손 {속성: 속성값;}"으로 정의합니다. 위 예시에서는 div가 부모 태그이고, p가 자식 태그입니다. p는 div 안에 있으므로 red, 40px 속성값을 지정받습니다. 하지만, 이후 div p에 해당하므로 color가 blue로 변경됩니다. 자손 선택자가 있어도, 부모의 속성값은 그대로 계승됩니다. 다만 자손 선택자에 의해 덮어쓰기 될 수 있습니다.

 

 

  <div>
    부모: div
    <p>자식: p
    </p>
    <span>자식: span<p>손자: span의 자식 p</p></span>
  </div>

 여기서 '자식' 선택자가 아니라, '자손' 선택자인 이유는 그 밑으로도 계속 계승되기 때문입니다. div 안에 있는 p태그라면, 모두 스타일이 적용됩니다.

 

 

div > p {color: blue;}

 만약 직계자손(자식)만 스타일을 지정하려면, >를 추가해야 합니다. div > p는 div가 부모 태그이고, p가 자식 태그일 때만 적용됩니다.

 

 

 

3. 클래스 선택자

클래스 선택자(Class Selector): 클래스 이름으로 특정 태그에 스타일을 적용

 클래스 선택자는 마치 '사용자 정의 서식'과 비슷합니다. 미리 만들어둔 서식 클래스를 임의의 태그에 지정할 수 있습니다. 타입 선택자와 달리, 동일한 태그에도 클래스를 부여해서 서로 다른 스타일도 지정할 수 있습니다.

 클래스를 사용하면 원래 태그 스타일을 무시하고, 클래스의 스타일로 지정되므로 덮어쓰기에도 용이합니다.

 

 

h2.blue {color: blue; font-size: 20px;}

  <h2 class="blue">star가 되기위해</h2>

 클래스는 태그.클래스명 {속성: 속성값;} 으로 정의하고, 해당 태그에 class="클래스명"을 지정해서 스타일을 적용합니다. 만약 태그 관계없이 모두 사용할 수 있는 클래스를 만들고 싶다면, .클래스명 {속성: 속성값;}으로 정의하면 됩니다.

 

 

 

4. 아이디 선택자

아이디 선택자(ID Selector): 아이디로 특정 태그에 스타일을 적용

 클래스 선택자와 비슷합니다. 클래스 대신 아이디에 스타일을 정의하며, 적용할 태그에 id를 붙여서 사용합니다. 단, id는 대소문자를 구분하므로 주의해야 합니다.

 

 

h2#blue {color: blue; font-size: 20px;}

<h2 id="blue">star가 되기위해</h2>

 아이디는 태그#id {속성: 속성값;} 으로 정의하며, id="id명"을 태그에 추가해서 적용합니다. 클래스 선택자와 마찬가지로, 모든 태그에 적용하고 싶다면 #id {속성: 속성값;} 로 정의하면 됩니다.

 

 

 

5. 가상클래스 선택자

가상클래스 선택자(Pseudo Class Selector): 어떤 상황이 발생했을 때만 태그에 스타일을 적용

 가상클래스 선택자는 '특수한 상황, 이벤트'가 발생했을 때만 스타일이 적용됩니다. 이 때문에, 좀 더 역동적이고 신선한 효과를 줄 수 있습니다.

 

유형	선택자	스타일이 적용될 때
마우스	:hover	마우스가 위에 있을 시
	:active	마우스 클릭 시
폼(Form)	:focus	마우스 클릭 및 커서가 있을 시
링크	:link	방문하지 않은 링크일 시
	:visited	방문한 링크일 시
블록	:first-letter	블록형 태그의 첫 글자일 시
	:first-line	블록형 태그의 첫 라인일 시
부모-자식	:nth-child(even)	짝수 번째 자식 태그일 시
	:nth-child(1)	첫 번째 자식 태그일 시

 특히 마우스, 폼, 링크와 관련된 가상 선택자는 자주 사용하며 외워두시는 게 좋습니다.

 

 

마우스 hover 시

마우스 커서가 없을 경우

h2:hover {color: blue; font-size: 20px;}