CSS 문법 (3) : 가상 클래스/ 요소, 선택자 간의 구체성 정의

 

 

 

HTML과 CSS는 이용자의 동작에 따른 변화를 일반적으로 화면에 반영할 수 없다. 그러나 어떤 요소 위에 커서를 올려 놓거나 뗐을 때처럼 자주 구현할 필요성이 있는 동작 일부는 가상 클래스나 요소의 형태로 제공하기도 한다. 이번 포스트에서는 가상 클래스와 요소에 대해 알아보고, 여러 선택자가 한 요소를 꾸며줄 때 우선순위를 표기하기 위해 사용되는 구체성의 정의에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

 

 

 

가상 클래스pseudo class

 

예를 들어, <p>가 있다고 가정하자. 이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주려면 어떻게 해야 할까? 해당 동작을 위해 구현해야 할 부분은 다음과 같다. 

 

(1) 임의의 클래스 선택자를 선언해 특정 스타일 규칙을 만든다.

(2) <p> 요소에 커서가 올라가면 클래스를 집어넣는다.

(3) <p> 요소에서 커서가 빠지면 클래스를 삭제한다.

 

이런 형태의 기능은 HTML과 CSS에서는 만들어 내기 어렵다. 2, 3번은 동적으로 변화돼야 하는 부분인데, 두 언어는 정적인 언어이기 때문에 이런 부분을 구현할 수 없기 때문이다. 그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해 미리 정의해 놓고 이를 가상 클래스 형태로 제어할 수 있게 했다.

 

:pseudo-class {
    property: value;
}

 

가상 클래스의 기본형은 위와 같다. 가상 클래스를 이용하면, 다른 언어를 끌어오지 않고도 CSS 내에서 동적인 기능을 처리 가능하므로 훨씬 효율적이다. 아래부터는, 기본적인 가상 클래스의 유형에 대해 다룬다.

 

문서 구조와 관련된 가상 클래스

 

first-child : 첫 번째 자식 요소 선택.
last-child : 마지막 자식 요소 선택.

 

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

 

li:first-child { color: red; }
li:last-child { color: blue; }

 

해당 코드를 사용하면 처음 <li>와 마지막 <li>에 각각 색상이 적용된다. 즉, 가상 선택자로 위와 같이 구현한 코드는 아래 코드처럼 가상 선택자 없이 구현될 수도 있다.

 

<ul>
    <li class="first-child">HTML</li>
    <li>CSS</li>
    <li class="last-child">JS</li>
</ul>

 

 

 

앵커 요소와 관련된 가상 클래스

 

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커.
:visited : 이미 방문한 하이퍼링크를 의미.

 

a:link { color: blue; }
a:visited { color: gray; }

 

 

 

사용자 동작과 관련한 가상 클래스

 

이것들도 주로 <a>에 많이 쓰인다. 다만 앵커 관련 클래스와 달리 조건만 맞으면 다른 요소에도 사용 가능하다.

focus: 현재 입력 초점을 가진 요소에 적용
hover: 마우스 포인터가 있는 요소에 적용
active: 사용자 입력으로 활성화된 요소에 적용

 

a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }

 

가상 요소 pseudo element

 

::pseudo-element {
    property: value;
}

 

가상 클래스처럼 문서 내에 보이지 않지만 미리 정의한 위치에 삽입되도록 약속되어 있는 것으로, 가상 요소가 있다. 가상 요소를 사용하면 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다. 기본적으로 가상 클래스와 동일하게 콜론으로 선언했으나, CSS3부터는 가상 클래스와의 구분을 위해 ::(더블 콜론) 기호를 사용하게 개편됐다. 다만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있을 수 있고 이 때는 ; 기호를 사용해야 한다.

 

before : 가장 앞에 요소를 삽입.
after : 가장 뒤에 요소를 삽입.
first-line : 요소의 첫 번째 줄에 있는 텍스트.
first-letter : 블록 레벨 요소의 첫 번째 문자.

 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

 

p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }

 

before와 after 가상 요소는 애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해서는 content 속성을 이용해야 한다. 눈에 보이지 않는 요소를 구체화해 보면 다음과 같다.

 

<p>
    <first-letter>L</first-letter>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    <!-- 모니터 가로 해상도에 따라 요소가 포함하는 내용이 변동됩니다. -->
    <first-line>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiu ..(..어딘가쯤..) </first-line>... unt ut labore et dolore magna aliqua.
</p>

 

 

 

선언의 구체성

 

h1 { color: red; }
body h1 { color: green; }

 

요소를 선택하는 데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 위 코드에서, 두 규칙은 모두 <h1>을 지정하지만 두 규칙이 지정하는 스타일은 서로 다르다. 이럴 때 <h1>은 어떻게 표현될까.

 

선택자에는 어떤 규칙이 우선으로 적용돼야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로 선언했느냐를 수치화한 것으로, 구체성의 값이 클 수록 우선으로 적용된다.

 

0, 0, 0, 0

 

구체성은 위와 같이 네 개의 숫자 값으로 이뤄져 있다. 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클 수록 높은 구체성을 갖는다. 구체성은 아래의 규칙대로 계산된다. 

 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

 0, 0, 0, 0 : 전체 선택자

 

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

 

 

인라인 스타일

 

p#page { color: red; }

 

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

 

위 두 스타일 선언문을 보자. 전자는 0, 1, 0, 1의 구체성을 가지는 선택자로 스타일을 선언한 것이고 두 번째는 요소에 직접 인라인 스타일 방식으로 선언한 것이다. 둘 중 무엇이 우선순위로 적용될까? 정답은 후자다. 인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖는다. 
 

규칙에 우선권 적용하기, important

 

p#page { color: red !important; }

 

<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

 

important 키워드는 별도의 구체성 값은 없지만 모든 구체성을 무시하고 우선권을 갖는다. 속성값 뒤에 한 칸 공백을 주고 느낌표 기호와 함께 쓰면 important를 적용할 수 있다. 위의 <p>에는 important로 인해 color: red가 적용된다.
 

속성의 상속

 

h1 { color: gray; }

 

<h1>Hello, <em>CSS</em></h1>

 

위 코드에서 <em>은 부모인 <h1>의 color: grey를 상속받는다. 다만, 모든 부모의 속성이 자식에게 상속되는 건 아니다. 상식적으로 구분될 만한 속성 외, margin/ padding/ background/ border 등은 상속되지 않는다.

 

상속 속성의 구체성

 

* { color: red; }
h1#page { color: gray; }

  

<h1 id="page">Hello, <em>CSS</em></h1>

 

위 코드에서, <em>에는 color: red가 적용된다. 상속된 속성은 구체성을 가지지 못 하는 점을 기억하자.