[CSS] 가상요소, 구체성, 속성

2022.05.25

💡 오늘의 CSS 공부

▶️ 가상요소

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있다.
가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있다.
선언 방법은 가상 클래스와 같게 콜론을 사용하며,
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용한다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.
::pseudo-element {
    property: value;
}
다른 가상 요소들에 대한 자세한 내용은 가상요소 제목에 링크를 설정해두었다. 

🐥가상요소 세부

: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 속성을 이용해야 한다.

실제 HTML 코드에는 나타나지 않지만, before와 after가 어떻게 동작하는지 이해를 돕기 위해 코드를 아래와 같이 변경해보자.
<p>
    <before>###</before>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <after>!!!</after>
</p>

눈에 보이지 않지만, 내부에서 이처럼 요소가 생성된다.
first-line과 first-letter도 마찬가지로 아래 코드와 같은 것으로 생각하면 된다.

<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>은 어떻게 표현이 될까?
<h1>에는 color: green이 적용되는데 이는 구체성과 연관이 있다.

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다.
이 규칙을 '구체성'이라고 한다.
구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,
구체성의 값이 클수록 우선으로 적용이 된다.
0, 0, 0, 0
위와 같이 구체성은 4개의 숫자 값으로 이루어져 있다.
값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖는다.

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

* 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가 적용된다.

▶️ 상속되는 속성

h1 { color: gray; }
<h1>Hello, <em>CSS</em></h1>

위 코드에서 <em>은 부모인 <h1>의 color: gray를 상속받는다.
상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아니다.
아직 속성에 대해 다 배우지는 않았지만, 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 규칙 중 하나이다.
만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면 어떻게 될까?

h1 { color: red; }
h1 { color: blue; }
위 <h1>에는 같은 구체성을 가진 두 규칙이 적용되었다.
그렇다면 <h1>에는 어떤 color가 적용될까?

<h1>에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과이다.

🐥Cascading 규칙

cascading에는 다음과 같이 3가지 규칙이 있다.
1. 중요도(!important)와 출처
2. 구체성
3. 선언 순서
위에서의 출처는 CSS 출처를 의미한다.
CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분한다.
제작자의 경우는 사이트를 실제 제작하는 개발자가 작성한 CSS를 의미 (대부분이 여기에 해당)
그리고 사용자의 경우는 웹 페이지를 방문하는 일반 사용자들이 작성한 CSS를 의미한다.
마지막으로 사용자 에이전트의 경우는 일반 사용자의 환경, 즉 브라우저에 내장된 CSS를 의미한다.

스타일이 적용되는 방식은 생각보다 간단하다.
모든 스타일은 아래의 규칙에 따라 단계적으로 적용된다.

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

<p id="bright">Hello, CSS</p>
p#bright { color: silver; } 
p { color: red; }
위의 경우에는 구체성에 따라 color: silver가 적용

p { color: silver; }
p { color: red; }
위의 경우에는 선언 순서에 따라 color: red가 적용