[웹 개발] 선택자 (3)

가상 요소(pseudo element)

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.

가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다.

선언 방법은 가상 클래스와 같게 콜론을 사용하며,

CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다.

하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.

::pseudo-element {
    property: value;
}

다른 가상 요소들에 대한 자세한 내용은 아래 링크를 참고해주세요.

https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements 

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

구체성

요소를 선택하는 데는 여러 방법이 있습니다.

따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다.

만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요?

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

두 규칙은 모두 <h1>을 선택하게 됩니다.

하지만 두 규칙이 지정하는 스타일은 서로 다릅니다.

그렇다면 <h1>은 어떻게 표현이 될까요?

<h1>에는 color: green이 적용되는데 이는 구체성과 연관이 있습니다.

 

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있습니다.

이 규칙을 '구체성'이라고 합니다.

구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,

구체성의 값이 클수록 우선으로 적용이 됩니다.

 

구체성은 아래의 규칙대로 계산됩니다.

•  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의 구체성을 가지는 선택자로 스타일을 선언했고,

두 번째는 요소에 직접 인라인 스타일 방식으로 스타일을 선언했습니다.

결과적으로 <p>에는 color: blue가 적용됩니다.

인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙들 중 가장 큰 구체성을 갖기 때문입니다.

 

important

important 키워드는 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖습니다.

important 키워드는 속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 씁니다.

p#page { color: red !important; }

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

위의 <p>에는 important로 인해 color: red가 적용됩니다.

 

상속되는 속성

상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아닙니다.

margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 계시면 됩니다.

 

상속되는 속성의 구체성

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

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

위 코드에서는 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용해 color: gray를 선언했습니다.

전체 선택자의 구체성은 0, 0, 0, 0 이며 id 선택자의 구체성은 0,1,0,1 입니다.

그렇다면 <em>에는 어떤 color가 적용될까요?

color: red가 적용되는데 그 이유는 바로 상속된 속성은 아무런 구체성을 가지지 못하기 때문입니다.

 

cascading 규칙 

cascading에는 다음과 같이 3가지 규칙이 있습니다.

1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서

위에서의 출처는 CSS 출처를 의미합니다.

CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분합니다.

제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미합니다. (대부분이 여기에 해당합니다.)

그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미합니다.

마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미합니다.

현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이기 때문에 이와 관련해서는 생략하도록 하겠습니다.

 

스타일이 적용되는 방식은 생각보다 간단합니다.

모든 스타일은 아래의 규칙에 따라 단계적으로 적용됩니다.

 

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류합니다.
1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선합니다.
2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받습니다.
2. 스타일 규칙들을 출처에 따라 분류합니다.
1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
3. 스타일 규칙들을 구체성에 따라 분류합니다.
1. 구체성이 높은 규칙들이 우선합니다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
1. 뒤에 선언된 규칙일수록 우선합니다.