[CSS] CSS 기초 - CSS와 선택자(Selector)

1-hee 2024. 4. 19. 19:00

WHAT’S CSS?

`HTML` 문서에 스타일 속성을 부여하는 데 전문성을 지닌 스크립트 언어

CSS의 적용 방법

`CSS`를 `HTML`에 적용하는 데에는 크게 세 가지 방법이 있습니다.

인라인 스타일 속성 : `<div style="border: 1px solid black;">텍스트</div>`
html 내에서 스타일 속성 : `HTML`의 `<head>` 태그 안에 `<style>` 태그를 추가하여 안에 작성
외부 스타일 속성

/* 링크 태그로 적용하는 방법 */
/* 보통 로컬에서 직접 CSS를 만들어 적용시킬 때 하는 방법으로 href에 상대경로를 적음 */
<link rel="stylesheet" href="./main.css" />

/* import로 적용하는 방법 */
/* 아래와 같이 하는 건 css파일을 외부로 별도로 뺐을 때 이런 식으로 작성함 */
@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

/* 만약에 html 태그 내의 style 태그 내에 import 하고 싶으면 아래와 같이 
style 태그 안 쪽에 똑같이 하면 됨 import 하면 됨. */
<style>
@import url("fineprint.css");
</style>

CSS 선택자 (Selector)

일반 선택자

선택자 이름	선택자	설명	USAGE	CSS ver.
전체 선택자	*	html 전체 속성 등(테마 색상 등)	* { }	2
타입 선택자	tag	element tag = 선택자	div{ }	1
클래스 선택자	.class	html 요소 class 속성 값을 기준	.class-name { }	1
ID 선택자	#id	html 요소의 id 속성 값을 기준	#id { }	1

복합 선택자

선택자 이름	선택자	설명	USAGE	CSS ver.
하위 선택자	공백	하위 요소 선택	div div { }	1
자식 선택자	>	직속 하위 요소 선택	div>a { }	2
인접 형제 선택자	+	인접한 형재 관계 일 때	div+div { }	2
일반 형제 선택자	~	형제(sibling)관계인 요소 선택	div ~ div	3

복합 선택자에서 적용 순서 따질 때 주의할 점

복합 선택자 중에서 하위선택자(공백)와 자식 선택자(>)는 부모-자식 관계에 대한 선택자입니다.
따라서, 부모-자식 관계가 아닌 관계에는 적용이 안될 수 있습니다.

인접 형제 선택자는 수평적 위치에서의 배치 위치에 따라서 스타일 적용이 달라질 수 있습니다.
인접 형제 선택자의 경우 바로 아래의 요소가 있을 때만 적용되고,

중간에 다른 태그가 들어가게 되면 그 부분은 적용이 안 될 수 있습니다.

일반 형제 선택자는 body 태그 아래부터 우선순위를 셈합니다.

그냥 단순히 `div~div{ }` 이러면, `body` 밑의 `div` 태그는 일단 전부 속성이 적용될 수 있습니다.

여기서 구조가 `div > div > div` 이렇게 파고 들어간다고 하더라도,

`div`에 이웃한 `div`가 있으면 `div~div { }` 에 적어둔 속성이 적용될 수 있습니다.

물론 이러한 규칙이 절대적인 것은 아니며, Selector를 어떻게 `조합` 해두었는가 에 따라서 결과가 달라질 수 있습니다.

CSS 선택자의 우선순위

`CSS`는 어디에서 스타일을 적용하느냐에 따라 적용에 대한 우선순위가 있습니다.

CSS 선택자는 보통 일반선택자의 종류에 따라 3단계로 선택자의 우선순위를 나눕니다.

그중에서도 딱 두 가지는 예외로써 CSS 선택자에서 유례가 드문 절대적인 우선순위를 가집니다.

`!important` , `인라인 스타일 속성`

이 두 가지 선택자는 `!important > 인라인 스타일 속성`의 순서대로 적용되며,

다른 일반 선택자의 우선순위를 모두 무시할 수 있습니다.

CSS 선택자의 일반적인 3단계 우선순위는 아래와 같습니다.

/* 우선순위가 높을수록 좌측 */
ID 선택자 (#id{  }) > 클래스 선택자 (.className{  }) > 태그 선택자 (div{   })

CSS 속성의 우선순위는 일차적으로 위와 같이 일반 선택자 우선순위 수준에 따라 비교합니다.
만약 우선순위가 같은 경우에는 높은 우선순위를 양적으로 많이 가진 쪽이 우선됩니다.

이를 태그로 표현하면 `div div div` 이런 식으로 같은 수준의 일반 선택자들을

복합 연산자 등으로 묶어서 표현한 쪽이 더 우선 된다는 의미입니다.

하지만 여기서 추가로 클래스 선택자(.className{ }) 등과 동등한 우선순위를 가지는 선택자가 몇 가지 더 존재합니다.

/* 추가적인 CSS 선택자 들 */
-   [   ] Selector -> 속성 선택자
>> [type=checkbox] | [type] 이 있음.
전자는 type=checkbox인 애들만, 후자는 type 속성이 있기만 하면 적

- :nth-of-type(3n) 와 같은 콜론(':') selector -> 가상 클래스
- ::before 와 같은 더블 콜론('::') 선택자 -> 가상엘리먼트

- 속성 선택자는 HTML 태그의 속성값에 대응하므로, 안에 HTML 태그 속성값을 통해 접근합니다.

속성 선택자

선택자	설명	CSS ver.
[A]	A 속성이 포함된 엘리먼트 선택	2
[A=V]	A 속성의 값이 정확히 V인 경우	2
[A~=V]	A 속성의 값이 V를 포함할 때	2
[A^=V]	A 속성이 V로 시작할 때	3
[A$=V]	A 속성이 V로 끝날 때	3
[A*=V]	A 속성이 V를 포함하는 엘리먼트	3
[A\|=V]	A 속성이 정확히 V이거나, V로 시작하는 엘리먼트	2

*= 선택자는 ~=와 다르게 ~=는 ‘문자’가 포함되는지를 판단하는데,

*= 연산자는 속성값을 여러 개 가질 수 있는 경우 (like class) 그중에 하나라도 있는지 판단하는 연산자입니다.

가상 클래스 선택자

선택자	설명	CSS ver.
:link	방문하지 않은 링크를 선택	1
:visited	방문한 링크를 선택	1
:hover	마우스를 올려 놓으면	1
:active	요소가 활성화 상태이면	1
:focus	지정된 요소가 포커스를 가지면(input 태그)	2
:first-child	첫 번째 요소(부모 - 자식 관계에서)	2
:last-child	마지막 요소(부모 - 자식 관계에서)	3
:nth-child(n)	n번째 요소(부모 - 자식 관계에서) / 수식 연산 가능(2n+1)	3
:enabled	요소가 enabled 일 때	3
:disabled	요소가 disabled 일 때	3
:checked	지정된 요소가 checked 인 경우 (checkbox)	3

가상 엘리먼트 (IE 9.0 부터 지원) 선택자

선택자	설명	CSS ver.
::after	지정된 요소 뒤에 content 추가	2
::before	지정된 요소 앞에 content 추가	2
::first-letter	지정된 요소의 첫 번째 문자 선택	1
::first-line	지정된 요소의 첫 번째 줄(라인) 선택	1
::selection	사용자에 의해 선택된 요소의 위치 선택	3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Pseudo-classes Selector(가상클래스선택자)</title>

    <style type="text/css">
      p.intro::first-letter {
        font-size: 200%;
      }

      p.intro::first-line {
        font-weight: bold;
      }

      p:last-child::after {
        content: "(source: www.w3schools.com)";
        color: orange;
      }

      ::selection {
        color: steelblue;
      }
    </style>
  </head>

  <body>
    <h1>CSS Tutorial</h1>
    <h3>CSS is a language that describes the style of an HTML document.</h3>
    <p class="intro">CSS describes how HTML elements should be displayed.</p>
    <p>This tutorial will teach you CSS from basic to advanced.</p>
  </body>
</html>

CSS 선택자의 우선순위 정리

쉼표는 우선 순위가 동등하다는 것을 의미합니다.

이렇게 우선순위를 따졌는데도 CSS 선택자가 모든 우선순위가 정확히 동일하면 코드에서 나중에 적용한 것을 반영합니다.

!important
inline style 속성
id selector(#id)
클래스 셀렉터(.class), [], 가상클래스(:hover), 복합연산자(>, 공백, +, ~)
타입 선택자( div{ } ), pseudo 엘리먼트(::before)
*(전체 속성) 연산자

이렇게 우선순위를 따졌는데도 우선순위가 동일한 경우에는 코드에서 나중에 적용한 것을 반영합니다.

CSS 우선순위를 그림으로 설명한 사이트
https://specifishity.com/

Specifishity :: Specificity with Fish

specifishity.com