CSS - 개요, 선택자, 상속

선택자 {
     속성: 속성값;

     속성: 속성값;

}

 

선택자(selector): 속성과 값을 지정할 대상을 검색

/* comment */ : 문서 내 수정사항이나 설명 등을 작성(주석)

 

선언방식

인라인 - HTML요소(태그)의 'style' 속성에 직접 작성하는 방식, 석택자 필요 없음

내장방식(embedded) - HTML <style></style>안에 작성하는 방식

링크(link)방식 - HTML <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

<link rel="" href"">(추천 방식)

@import 방식 -  @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

@import url("./common2.css")(css가 css불러오는 방식)

직렬 방식으로 적용되어 시간 소요 가능성

 

복합선택자

일치선택자(E와 F를 동시에 만족하는 요소 선택) : EF(ex)span.orange)

자식 선택자(E의 자식요소 F를 선택) : E > F(ex) ul > .orange)

후손(하위) 선택자(E의 후손 요소F를 선택) : E F('띄어쓰기'가 선택자의 기호로 사용됨)

인접 형제 선택자(E의 다음 형제 요소 F 하나만 선택) (ex) .orange + li)

일반 형제 선택자(E의 다음 형제 요소 F 모두 선택) (ex) .ornage ~ li)

요소들의 관계

가상 클래스 선택자(E : hover, active, )

hover: E에 마우스(포인터)가 올라가 있는 동안에만 E 선택

active: E를 마우스로 클릭하는 동안에만 E 선택

focus: E가 포커스 된 동안에만 E선택(대화형 콘텐츠(input, img, tabindex에서 사용 가능)

 

first-child: E가 형제 요소 중 첫번째 요소라면 선택(ex) .fruit li:first-child)

last-child: E가 형제 요소 중 마지막 요소라면 선택

nth-child(n) : E가 형제 요소 중 n번째 요소라면 선택(n 키워드 사용 시 0부터 해석)

2n일 경우 짝수번째 요소들만 선택 가능

n+3일 경우 3번째 요소부터 이후 요소들을 선택

nth-of-type(n): E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택

 

부정선택자 S가 아닌 E선택(ex)E:not(S))

 

가상 요소 선택자( :: E)

before - E 요소 내부의 앞에, 내용(content)을 삽입 (ex)E: : before)

after - E 요소 내부의 뒤에, 내용을 삽입

attr - attr을 포함한 요소 선택([attr], [attr=value])

[attr^=value] : 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택

[attr$=value] : 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

 

상속(inheritance)

상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 부모에서 자식으로 강제 상속 시킬 수 있다. 자식을 제외한 후손에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다.

 

우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우,

어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법

1. 명시도 점수가 높은 선언이 우선

2. 점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선(선언 순서)

3. 명시도는 상속 규칙보다 우선(중요도)

4. !important 가 적용된 선언방식이 다른 모든 방식보다 우선(중요도)

 

1. 가장 중요(!important) - 모든 선언을 무시하고 가장 우선

2. 인라인 선언 방식 -  인라인 선언(HTML style 속성 사용)

3. 아이디 -  아이디 선택자(100)

4. 클래스 선택자(10) {:hover 처럼 가상 클래스는 클래스}

5. 태그 선택자(1) {: :before 처럼 가상 요소는 태그}

6. 전체 * (0)

7. 상속 - 상속 받은 속성은 우선 계산 하지 않음

부정선택자 :not()은 점수 가지지 않음

 

출처. heropy.blog/