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/