Day 08. 선택자 우선순위, 가변크기

11773 단어 멋쟁이 사자처럼TILTIL

📌 선택자 우선순위

선택자 우선순위에는 3가지 원칙이 있습니다.
1. 후자 우선의 원칙
2. 구체성의 원칙
3. 중요성의 원칙

1. 후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다.

2. 구체성의 원칙

한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다.

ul#navigation li.item {}
id 선택자 100점 + 타입선택자2개 2점 + class 선택자 10점 = 112점

또한, 선택자의 우선순위는 상위 선택자의 우선순위를 넘지 못합니다!
동메달을 10개 가지고 있다고 해도 은메달, 금메달보다는 가치가 없는 것처럼 id > class > type 의 우선순위가 지켜집니다.

<head>
    <style>
        .h1 {
            color: red;
        }

        html body div div div div div div div div div h1 {
            background: #000;
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <h1 class="h1">hello</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

타입선택자로 13점이지만 class가 가지는 10점이 더 우선합니다!
따라서 클래스 하나보다 중요도가 낮습니다!

3. 중요성의 원칙

!important : 절대적인 우선순위. 가중치 점수를 무시하고 무조건적인 우선순위를 가집니다. 불가피한 상황이 아니라면 사용하지 않는 것이 좋습니다! (순위 계산을 어렵게 만들기 때문)

🔥 !important 끼리 우선순위는 어떻게 될까?
=> 절대자라고 하더라도! 점수는 중요하다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        button.im {
            background-color: blue !important;
        }
        /* 절대자라고 하더라도 점수는 중요하다! */
        button { 
            background-color: lightblue !important;
        }
    </style>
</head>
<body>
    <button class="im" style="background-color:red">버튼</button>
</body>
</html>

📌 가변 크기

  1. em :배수 단위 (부모의 글자크기에 따라 기준점이 달라짐)
  2. rem : root em (최상위 요소의 글자크기에 따라 달라짐)
  3. vw : 화면비 백분율 단위
  4. vh : 화면비 백분율 단위
가변크기단위 / em, %, rem, vw, vh, vmin, vmax
Git-Flow & Commit message & Issue 이용해서 협업하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage