스타일 우선순위

스타일 우선순위

선택자의 종류에 따라 적용되는 스타일의 우선순위가 달라진다. 이 문서에서는 스타일 부여 방법에 따른 우선순위를 알아본다.

우선순위에 대한 기본 규칙은 다음과 같다.

1. 같은 우선순위를 가질 경우 하단에 있는 내용이 적용된다.

2. 높은 우선순위를 가지는 스타일은 위치와 무관하게 적용된다.

3. 대상이 분명하게 지정될 수록 일반적으로 높은 우선순위를 가진다.

important 스타일

important는 특정 스타일 코드 뒤에 작성하여 우선순위를 높이는 효과를 가진다.

table {
    border-collapse:collapse !important;
}

textarea {
    resize:vertical !important;
}

위처럼 사용할 수 있으나, 이후 important를 제외한 방법으로 스타일 변경이 어렵기 때문에 권장하지 않는다. 가장 높은 우선순위를 가진다.

inline 스타일

inline 스타일은 태그에 직접 style 속성을 작성하는 경우를 말한다.

<h1 style="color:red;">Hello HTML</h1>

재 사용이 어렵고 가독성이 떨어지기 때문에 자주 사용하는 형태는 아니지만, 두 번째로 높은 우선순위를 가지기 때문에 기존 스타일에서 특정 부분을 변경하거나 추가할 경우 유용하게 사용할 수 있다.

id 스타일

id 스타일은 id 선택자를 이용하여 스타일을 부여하는 경우를 말한다.

#headline {
    color:red;
}

<h1 id="headline">Hello HTML</h1>

id는 하나의 대상을 식별하기 위해 부여하는 고유 식별자이므로 높은 우선순위를 가진다.

pesudo 스타

pesudo 스타일은 가상의 상태 또는 영역을 선택하여 스타일을 부여하는 경우를 말한다. 특정 경우에만 적용되어야 하기 때문에 높은 우선순위를 가지지만, id 선택자보다는 후순위이다.

• hover

• active

• visited

• focus

• link

• checked

h1:hover {
    color:blue;
}

<h1>Hello HTML</h1>

class 스타일

class 스타일은 class 선택자를 이용하여 스타일을 부여하는 경우를 말한다.

.user-input {
    font-size:25px;
}

<input type="text" class="user-input">

class는 여러 대상에 동시 부여가 가능하므로 id보다 낮은 우선순위를 가진다.

class의 경우 하나의 태그에 여러 개 부여가 가능하기 때문에 나중에 부여된 클래스가 높은 우선순위를 가진다.

태그 스타일

태그 스타일은 태그 선택자를 이용하여 스타일을 부여하는 경우를 말한다.

h1 {
    color:red;
}

<h1>Hello HTML</h1>

모든 태그가 선택되므로 가장 낮은 우선순위를 가진다.

연계 선택자 스타일

연계 선택자(+, ~ , > 등)를 이용하면 대상을 더 제한적으로 선택할 수 있다.

.login-wrapper > .row > input[name=id] {
    font-size:20px;
}

<div class="login-wrapper">
    <div class="row">
        <input type="text" name="id" placeholder="아이디">
    </div>
</div>

연계 선택자와 같이 태그를 여러 개 사용해야 하는 경우 태그의 각 점수를 합산하여 높은 쪽이 우선순위를 가지며, 점수가 같은 경우 나중에 작성한 쪽의 우선순위를 따라간다.