#5 CSS 이해하기 (가상선택자,구체성,상속,캐스케이딩)

가상 클래스(pseudo class)

-가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다.

-우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해준다.

 

ex) <p>가 있다고 가정한다.

이 <p>에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까?

가상 클래스가 없다면 이런 과정을 거치게 된다.

1. 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다.
2. p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다.
3. p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다.

-여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없다.

-그래서 CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 했다.

:pseudo-class {
    property: value;
}

-위처럼 가상 클래스는 :(콜론) 기호를 써서 나타낸다.

-가상 클래스를 이용하면 아래의 경우에도 CSS만으로 처리가 가능하므로 훨씬 효율적이다.

-":hover 가상 클래스 선택자를 이용해서 스타일 규칙을 만든다. (hover는 마우스 커서가 올라갔을 때 적용이 되도록 정의되어 있다.)"

-가상 클래스에는 여러 가지가 있습니다. 그중 자주쓰이는 것을 보자.

---

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

-문서 구조와 관련된 가상 클래스는 first-child와 last-child 가상 클래스 선택자다.

• :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>에 가상 클래스가 적용된다.

-실제 <li>에는 class 속성이 없지만 내부적으로 가상 클래스가 적용되어 마치 아래의 코드와 같이 동작하게 된다.

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

---

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

-앵커 요소와 관련된 가상 클래스로는 :link와 :visited가 있다.

• :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커

• :visited : 이미 방문한 하이퍼링크를 의미

-하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미한다.

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

---

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

-이 클래스들도 <a>에 주로 많이 쓰인다.

-<a>에만 쓸 수 있는 것은 아니며, 이 조건에 맞는 상황이 되는 요소들은 다 사용이 가능하다.

• :focus: 현재 입력 초점을 가진 요소에 적용
• :hover: 마우스 포인터가 있는 요소에 적용

:active: 사용자 입력으로 활성화된 요소에 적용

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

-:focus는 현재 입력 초점을 가진 요소에 적용된다.

-focus(초점)는 지금 현재 선택을 받는 것을 의미한다.

-예를 들면, 입력 폼 요소에 텍스트를 입력하려고 마우스 클릭해서 커서를 입력 폼 위에 올려놓으면 그때 입력 폼 요소가 초점을 받는 상태다.

-또 키보드의 탭 키를 이용해서 요소를 탐색하다 보면 링크나 버튼에 점선 테두리가 이동하는 것을 볼 수 있는데, 점선 테두리가 위치하는 것도 초점을 받은 상태이다.

-:hover는 마우스 커서가 있는 요소에 적용된다. (마우스를 올렸을 때를 의미합니다.)

-:active는 사용자 입력으로 활성화된 요소를 의미하는데, <a>를 클릭할 때 또는 <button>를 눌렀을 때처럼 순간적으로 활성화된다.

 

 

가상 요소(pseudo element)

미리 정의해놓은 위치에 삽입이 되도록 약속되어있는 보이지 않는 요소

 

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

---

 

 

구체성

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

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

 

 

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

 

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

-이 규칙을 '구체성'이라고 한다.

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

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

 

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

•  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>

-결과적으로 <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에는 다음과 같이 3가지 규칙이 있다.

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

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

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

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

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

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

-현재의 브라우저에서는 사용자 스타일을 지원하지 않는 추세이다.

 

 

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

 

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류한다.
2. 스타일 규칙들을 출처에 따라 분류한다.
3. 스타일 규칙들을 구체성에 따라 분류한다.
4. 스타일 규칙들을 선언 순서에 따라 분류한다.

<p id="bright">Hello, CSS</p>

p#bright { color: silver; } 
p { color: red; }

위의 경우에는 구체성에 따라 color: silver가 적용된다.

p { color: silver; }
p { color: red; }

위의 경우에는 선언 순서에 따라 color: red가 적용된다.