[CSS] CASCADING

티스토리 뷰

FRONT-END/CSS

진심스테이크 2019. 1. 16. 20:48

CSS (Cascading Style Sheet) : 위에서 아래로 흐르는 스타일 시트

스타일 우선순위 : 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙

1. 중요도

- 사용자 스타일 시트가 최우선 : 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트

ex) 글자를 명확히 읽기 위해 윈도우의 '고대비' 설정 기능을 이용

- !important : 어느 스타일 보다 최우선 적용해야 할 스타일에 붙힘

2. 명시도 (우선순위 순으로 나열)

- 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그에만 스타일을 적용

- id 스타일 : 지정한 id 부분에만 적용되는 스타일 -> 한 문서 안에 한 번만 적용 가능

- 클래스 스타일 : 지정한 클래스에만 적용되는 스타일 -> 한 문서 안에 여러 번 적용 가능

- 태그 스타일 : 특정 태그에 똑같이 적용되는 스타일

3. 소스에서의 순서 : 소스에서 나중에 오는 스타일이 먼저 온 스타일을 덮어씀

스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

<body>
    <h1>---</h1>
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</body>

body {
    font-family: "돋움";
    color: darkgray;
}

위와 같은 상태일 때, <body> 스타일이 자식 요소인 <h1>, <ul>, <li>에도 적용이 됨