CSS 문법과 적용

🏹 CSS 문법과 적용

📍 CSS 구문

h1 {color: yellow; font-size: 2em;}

• 선택자 (selector) - h1

• 속성 (property) - color, font-size

• 값 (value) - yellow, 2em

• 선언 (declaration) - color: yellow, font-size: 2em

• 선언부 (declaration block) - {color: yellow; font-size: 2em;}

• 규칙 (rule set) - h1 {color: yellow; font-size: 2em;}

---

🏹 가상 클래스 (pseudo class)

미리 정의해놓은 상황에 적용되도록 약속되어 있는 보이지 않는 클래스
콜론( : ) 기호를 앞에 붙여서 나타냄

  ▪ a 태그 관련 가상 클래스 선택자

선택자	설명
:link	아직 방문하지 않은 하이퍼링크
:visited	이미 방문한 하이퍼링크

---

🏹 가상 요소 (pseudo element)

미리 정의해놓은 위치에 삽입이 되도록 약속되어 있는 보이지 않는 요소
CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 더블 콜론( :: ) 기호 사용
단, 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있어 상황에 따라 : 사용

  ▪ 가상 요소 선택자

선택자	설명
:before	첫 번째 자식 요소 삽입
:after	마지막 자식 요소 삽입
:first-line	첫 번째 줄에 있는 텍스트를 감싸는 요소 삽입
:first-letter	블록 레벨 요소의 첫 번째 문자를 감싸는 요소 삽입

   ⭐ :before와 :after 가상 요소 선택자는 애초에 내용이 없는 상태로 생성되기 때문에
        내용을 넣기 위해 content 속성을 이용해야 한다.

---

🏹 구체성

선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것
구체성의 값이 클수록 우선적으로 적용됨

구체성 값	설명
1, 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 */

---

🏹 상속

어떤 스타일 규칙이 특정 요소뿐만 아니라 그 자손 요소까지 적용되는 것
  ⭐ 상속된 속성은 아무런 구체성을 가지지 못한다!