[부스트코스 - 웹 UI 개발] 4. CSS 이해 2

 

가상클래스

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

 

 

1. 문서구조와 관련된 클래스

 

:first-child   첫번째 자식요소 선택

:lasr-child  마지막 자식요소 선택

 

 

 

2. 링크요소와 관련된 클래스

 

:link   아직 방문 안한 링크

:visited  이미 방문한 링크

 

 

 

3. 사용자 동작 관련 가상 클래스

 

:focus  현재 초점 요소

:hover  마우스 커서를 올렸을때 동작

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

 

 

 

---

 

가상요소

=미리 정해둔 위치에 삽입되게 약속한 보이지 않는 요소

 

 

:before  가장 앞요소에 삽입

:after   가장 뒷 요소에 삽입

 

위 가상 요소 둘다 content 속성이 필요함 (내용을 넣어야 하기때문)

 

 

:first-line  첫번째 줄 텍스트만 적용

:letter-line  블록레벨 요소 첫번째 문자만 적용

 

 

---

 

구체성

=선택자의 중요도에 따라 우선되는 정도를 말하는 것

  (구체성값이 클수록 우선)

 

0,0,0,0

4개의 숫자 값으로 이루어져있음

좌측 값부터 비교 클수록 높은 구체성

 

0,1,0,0 : 선택자에 있는 모든 id 속성값

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

0,0,0,1 : 선택자에 있는 모든 요소, 가상요소

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

 

(조합자는 구체성에 영향을 주지 않음=0)

 

 

구체성 예시

body h1{...}  =  0,0,0,2   

요소 두가지라 합쳐서 2

 

div#page{....}  =  0,1,0,1 

 id 속성값인 #page 와 요소 div의 합

 

 

인라인 스타일

인라인 스타일로 선언 된 경우

구체성 값 1,0,0,0

 

 

 

important

important의 키워드는 별도의 구체성 값은 없지만 

모든 구체성을 무시하고 우선권을 갖음

속성값 뒤 한칸 공백을 주고 !important 를 쓰면 됨

 

---

 

 

css 상속자

 

스타일 규칙이 특성요소뿐만아니라 그 자손요소까지 적용 되는 것을 말함 (부모-자식)

margin, padding, background, border 등 박스 모델 속성들은 상속되지 않음

 

 

상속된 속성은 아무런 구체성을 가지지 못함 

 

 

 

캐스케이딩

스타일규칙이 어떠한 기준으로 요소에 적용되는지를 정한 규칙

 

 

규칙 우선 순위

1. 중요도 (!important)와 출처

 

1.사용자의 !important 스타일   (거의 사용 안함)

2.제작자의 !important 스타일

3.제작자의 스타일

4.사용자 스타일

5.사용자 에이전트 스타일

 

 

 

2. 구체성

3. 선언 순서 - 나중에 선언한게 우선!!

 

 

---

 

 

css 속성 등 여러 정보를 얻을 수 있는 사이트

 

 

 

https://www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

 

 

CSS Selectors Reference