[html] css 파일들 적용 순서(우선순위)

html코드에서 css파일들을 여러개 사용하면.. 적용 순서가 어떻게 됐는지 이번에 알게 됐습니다.

 

<link rel="stylesheet" href="https://xxx.com/css/default.css?ver=191202">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/plugins/bootstrap/css/bootstrap.min.css?ver=191202">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/plugins/eyoom-form/css/eyoom-form.min.css?ver=191202">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/css/common.css?ver=191202">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/plugins/fontawesome5/css/fontawesome-all.min.css?ver=191202">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/css/style.css?ver=191202" type="text/css" media="screen">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/css/custom.css?ver=191202">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/plugins/slick/slick.min.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://xxx.com/theme/eb4_shop_005/plugins/scroll-tabs/scrolltabs.min.css" type="text/css" media="screen">

 

영카트 이윰빌더에서 사용되는.. css 불러오는 코드입니다.

 

전체 css파일 중 body{}쪽의 style을 적용하는 파일은

style.css, common.css, bootstrap.min.css, default.css 이렇게 4 파일입니다.

 

바로 위의 코드 상에서는

https://xxx.com/css/default.css?ver=191202">
https://xxx.com/theme/eb4_shop_005/plugins/bootstrap/css/bootstrap.min.css?ver=191202">
https://xxx.com/theme/eb4_shop_005/css/common.css?ver=191202">
https://xxx.com/theme/eb4_shop_005/css/style.css?ver=191202" type="text/css" media="screen">

 

이 네 css파일에는 동등하게 body{}의 스타일을 적용하는 코드가 있는데

나중에 로드된 css파일의 우선순위가 더 높습니다.

 

즉, style.css > common.css > bootstrap.min.css > default.css 순으로 우선순위가 높습니다.

 

결국 가장 마지막 라인의 style.css의 우선순위가 가장 높습니다.

 

int a=5;

a=3;

a=1;

에서.. 최종적으로 a가 1의 값을 가지는 것과 같네요 ㅎㅎ