KoreaIt Academy/HTML & CSS
[CSS] 우선순위(캐스캐이딩(Cascading))
728x90
반응형
캐스캐이딩(Cascading)
요소는 하나 이상의 CSS 선언에 영향을 받을 수 있습니다.
이 때 충돌을 피하기 위해서 CSS 적용 우선순위가 필요합니다.
1. 중요도 : CSS가 어디에 선언되었는 지에 따라서 우선순위가 달라집니다.
(1) 인라인 스타일(HTML 요소 내부에 style 속성으로 사용)
(2) 내부 스타일 시트(HTML 문서의 style 태그 안에 위치)
(3) 외부 스타일 시트(CSS 파일을 따로 만들어서 불러오는 방법)
(4) 웹 브라우저 기본 스타일
우선순위는 (1)~(4)번 순입니다.
인라인 스타일의 우선순위가 가장 높습니다.
인라인 스타일
<!--
인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법.
해당 요소에만 스타일을 적용할 수 있다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 인라인 스타일</title>
</head>
<body>
<p style="color:blue;">
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.
</p>
</body>
</html>
내부 스타일 시트
<!--
내부 스타일 시트
HTML문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용한다.
내부 스타일 시트는 해당 HTML문서에만 적용할 수 있다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 내부 스타일 시트</title>
<style>
ul{
list-style-type: square;
}
ul > li{
color:red;
}
</style>
</head>
<body>
<ul>
<li>한동석</li>
<li>홍길동</li>
</ul>
</body>
</html>
외부 스타일 시트
<!--
외부 스타일 시트
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
이러한 파일은 .css 확장자를 사용하여 저장되고, 스타일을 적용할 웹 페이지의 <head>태그에
<link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 외부 스타일 시트</title>
<!-- <link rel="stylesheet" href="outStyle.css" type="text/css"> --><!-- 구버전 -->
<link rel="stylesheet" href="outStyle.css"><!-- 신버전 -->
</head>
<body>
<ul>
<li>한동석</li>
<li>홍길동</li>
</ul>
</body>
</html>
2. 명시도 : 명확하게 특정할 수록 우선순위가 높아집니다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성
※ !important를 이길 수 있는 스타일은 없습니다.
3. 선언순서 : 나중에 선언된 스타일이 우선 적용됩니다.
여러 개의 클래스 명을 사용하는 경우에도 나중에 선언된 스타일이 우선 적용됩니다.
728x90
반응형
'KoreaIt Academy > HTML & CSS' 카테고리의 다른 글
| HTML5와 시맨틱(semantic) 태그, 검색 엔진 최적화 (0) | 2021.08.20 |
|---|---|
| [CSS] 폰트 크기(em, rem, px), 글꼴(구글 폰트 적용 방법), 글씨 굵기 (0) | 2021.08.20 |
| [CSS] 선택자(전체 선택자, 요소 선택자, 클래스 선택자, 아이디 선택자, 그룹 선택자) (0) | 2021.08.20 |
| [CSS] CSS 시작하기, CSS 문법, CSS주석 (0) | 2021.08.20 |
| [HTML] 사용자에게 입력을 받을 때 사용하는 태그(form 태그, input태그, select box..) (0) | 2021.08.18 |
댓글