CSS 선언방식/선택자/복합 선택자/가상요소/우선순위

CSS 선언방식

In-line 방식

HTML 태그에 속성으로 style을 이용해 직접 작성하는 방식

<div style="color: red;">Hi</dib>

 

Embedded 방식

HTML에 <style>~</style>을 이용해 css를 적용하는 방식

 

Link 방식

HTML <link>를 이용해 외부 문서로 css를 불러와 적용하는 방식

<link rel="stylesheet" href="css/common.css">

 

@import 방식(at import)

css @import를 이용해 외부 문서로 css를 불러와 적용하는 방식

css가 css를 가져오는 것임

@import url("./common.css");

직렬 호출 방식이기 때문에, 병렬 방식보다 오래걸릴 수 있고 순서를 잘 생각해서 사용해야 함

 

CSS 선택자

 

1. 전체 선택자(Universal Selector)

모든 요소를 선택

*을 통해 사용함

 

2. 태그 선택자(Type Selector)

HTML 태그를 선택

기호 없이 HTML태그를 입력해서 사용함

 

3. 클래스 선택자(Class Selector)

HTML class속성의 값을 선택

.className의 형태로 이용함

 

4. 아이디 선택자(Id Selector)

HTML id속성의 값을 선택

#idName의 형태로 사용함

 

복합 선택자(Combinator)

 

1. 일치 선택자(Basic Combinator)

선택자 A와 B를 동시에 만족하는 요소 선택

AB{color: red;}의 형태로 사용함

 

2. 자식 선택자(Child Combinator)

A의 자식요소 B를 선택

A>B{}의 형태로 사용함

 

3. 후손(하위) 선택자(Descendant Combinator)

A의 하위요소인 B를 선택

A B{}의 형태로 사용함

 

4. 인접 형제 선택자(Adjacent Sibling Combinator)

A의 다음 형제 요소 B 하나만 선택

A + B{}

 

가상 클래스 선택자(Pseudo-Classes Selector)

 

Hover

A에 마우스가 올라가 있는 동안 A선택

A:hober{}

 

Active

A를 마우스로 클릭하는 동안에만 A 선택

A:active{}

 

Focus

A가 포커스 된 동안에만 A선택

대화형 콘텐츠에서 사용 가능

A:focus{}

 

First Child

A가 형제 요소 중 첫 번째 요소라면 선택

A:first-child{}

 

Last Child

A가 형제 요소 중마지막 요소라면 선택

A:last-child{}

 

Nth Child

A가 형제 요소 중 n번째 요소라면 선택

A:nth-child(n)

2n의 형태로 2의 배수로 짝수번째 요소들을 선택함

 

주의사항

.fruits p:nth-child(1){}: 클래스가 fruits인 태그들 중에 첫 번째 태그가 p태그이면 css적용함

하위요소 선택자를 사용하다 보면 원치않는 것을 선택하는 경우가 생길 수 있음

그래서 자손 선택자를 사용하는 것이 좋을 수 있음

 

Nth of Type

A의 타입과 동일한 타인인 형제 요소 중 A가 n번째 요소라면 선택

A:nth-of-type(n)

 

부정 선택자(Negation Selector)

B가 아닌 A 선택

A:not(B)

 

가상 요소 선택자(Pseudo-Elements Selector)

 

Before

A요소 내부의 앞에, 내용을 삽입

A::before

before를 통한 css 작성시 content:"";를 반드시 사용해야 함

 

After

A요소 내부의 뒤에, 내용을 삽입

A::after

after를 통한 css 자겅시 content:"";를 반드시 사용해야 함

 

HTML 속성

속성 선택자(Attribute Selectors)

 

ATTR

속성 attr을 포함한 요소 선택

[attr]의 형태로 사용함

 

ATTR=VALUE

속성 attr을 포함하며, 속성 값이 value인 요소를 선택함

[attr=value]

 

ATTR^=VALUE

속성 attr을 포함하며, 속성값이 value로 시작하는 요소 선택

캐럽 기호 들어가 있음

[attr^=value]

 

ATTR$=VALUE

속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택

[attr$=value]

 

상속(Inheritance)

특정 속성들은 부모요소에만 적용해도 하위 요소에 적용될 수 있음

텍스트를 다루는 속성들이 주로 상속됨

 

강제 상속

상속되지 않는 속성도 inherit이라는 값을 사용하여 강제 상속 시킬 수 있음

 

우선순위

 

!important

인라인 선언방식

아이디 선택자

클래스 선택자

태그 선택자

전체 선택자

상속

 

우선순위 결정

같은 요소가 여러 선언의 대상이 될 경우 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법

명시도, 선언순서, 중요도

명시도 점수가 높은 선언이 우선, 점수가 같은 경우 마지막에 선언한 것이 우선

명시도는 상속 규칙보다 우선

!important는 모든언언을 무시하고 가장 우선

 

1.!important

무한대

2. 인라인 선언 방식(Style Attribute)

1000점

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

100점

4. 클래스(클래스 선택자)

10점

5. 태그선택자

1점

6. 전체 선택자

0점

7. 상속

계산 안함

가상 클래스는 10점 가지고 있으며, 가상요소는 1점, 부정 선택자는 점수 없음