CSS 적용 우선순위

By | 2020년 10월 26일
Table of Contents

CSS 적용 우선순위

인라인 스타일(inline style)

인라인 스타일(inline style) 이 최우선 적용됩니다.

내부 스타일(internal style) 과 외부 스타일(external sytle)

내부 스타일(internal style) 과 외부 스타일(external sytle) 이 공존하는 경우 아래쪽에 적혀있는 스타일이 적용됩니다.

동일 레벨(내부 스타일 or 외부 스타일)

동일 레벨(내부 스타일 or 외부 스타일) 에 클래스 스타일과 태그 스타일이 공존하는 경우 클래스 우선 적용됩니다.

여러개의 외부 스타일

여러개의 외부 스타일이 있는 경우 가장 마지막 외부 스타일이 우선 적용됩니다.

// test.css
p {
    color: #FFFF00;
}
.testp {
    color: #00FFFF;
}
div {
    color: #FFFF00;
}
.testdiv {
    color: #00FFFF;
}
// test2.css
.testdiv {
    color: #000000;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
    <style>
    .testp {
        color: #0000FF;
    }
    p {
        color: #00FF00;
    }
    </style>
    <link rel="stylesheet" href="test.css">
    <link rel="stylesheet" href="test2.css">
</head>
<body>

    <!-- 인라인 스타일(inline style) 이 최우선 적용 -->
    <p style="color: #FF0000;">
        #FF0000
    </p>

    <!-- 내부 스타일(internal style) 과 외부 스타일(external sytle) 이 공존하는 경우 아래쪽에 적혀있는 스타일이 적용 -->
    <p>
        #FFFF00
    </p>

    <!-- 동일 레벨(내부 스타일 or 외부 스타일) 에 클래스 스타일과 태그 스타일이 공존하는 경우 클래스 우선 적용 -->
    <p class="testp">
        #00FFFF
    </p>

    <!-- 여러개의 외부 스타일이 있는 경우 가장 마지막 외부 스타일이 우선 적용 -->
    <div class="testdiv">
        #000000
    </div>

</body>
</html>
Category: Web

답글 남기기