● 캐스케이딩(Cascading)
- 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
- 이때 충돌을 피하기 위해서는 CSS 적용 우선순위가 필요하다.
1. 중요도
- CSS가 어디에 선언되었는지에 따라서 우선순위가 달라진다.
(1) 인라인 스타일(HTML 요소 내부에 style 속성으로 사용)
(2) 내부 스타일 시트(HTML 문서의 style 태그 안에 위치)
(3) 외부 스타일 시트(CSS 파일을 외부에 따로 만들어서 불러오는 방법)
(4) 웹 브라우저 기본 스타일
2. 명시도
- 명확하게 특정할수록 우선순위가 높아진다.
!important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성
3. 선언순서
- 나중에 선언된 스타일이 우선 적용된다.
- 여러 개의 클래스 명을 사용하는 경우에도 나중에(아래에) 선언된 스타일이 우선 적용된다.
실습(CSS 인라인 스타일)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 인라인 스타일</title>
</head>
<body>
<p style="color: blue; text-align: center;">
간단한 스타일 정보라면 스타일 시트를 사용하지 않고
스타일을 적용할 대상에 직접 표시한다.
</p>
</body>
</html>
실습(내부 스타일 시트)
1. 직계 자식 태그에만 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트</title>
<style>
ul {
list-style-type: square;
}
/* 직계 자식 태그에만 스타일 적용 */
#test > li {
color: red;
}
</style>
</head>
<body>
<ul id="test">
<li>
홍길동
</li>
<ul>
<li>이순신</li>
</ul>
</ul>
</body>
</html>
2. 모든 자식 태그에 스타일 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트</title>
<style>
ul {
list-style-type: square;
}
/* 직계 자식 태그에만 스타일 적용 */
#test > li {
color: red;
}
/* 모든 자식 태그에 스타일 적용 */
#test li {
color: green;
}
</style>
</head>
<body>
<ul id="test">
<li>
홍길동
</li>
<ul>
<li>이순신</li>
</ul>
</ul>
</body>
</html>
3. p 태그에 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트</title>
<style>
/* #test > p {
color: red;
} */
#test p {
color: red;
}
</style>
</head>
<body>
<div id="test">
<p>홍길동</p> 딸
<div> 딸
<p style="color:green">이순신</p> 손녀
</div>
</div>
</body>
</html>
실습(외부 스타일 시트)
1. outStyle.css 작성
@charset "UTF-8";
ol > li {
font-size: 30px;
}
#first {
color: red;
}
li #second {
color: gray;
}
ol li #third {
color: orange;
}
.ordered {
font-weight: bold;
}
2. out.html 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 외부 스타일 시트</title>
<link rel="stylesheet" href="outStyle.css">
</head>
<body>
<ol type="1">
<li id="first" class="ordered">야채곱창</li>
<li id="second" class="ordered" style="color: red;">치즈불닭</li>
<li id="third">고추바사삭 치킨</li>
</ol>
</body>
</html>
실습(우선순위)
1. important 사용 X
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우선순위 실습</title>
<style>
.apple {
color: red;
}
#banana {
color: black;
}
/* 사과가 초록색으로 나오게 하기 */
div.apple {
color: green;
}
</style>
</head>
<body>
<!-- 바나나가 노란색으로 나오게 하기 -->
<p id="banana" class="apple" style="color: yellow">바나나</p>
<div class="apple">사과</div>
</body>
</html>
2. important 사용 O
- cascadingCss.css 작성
@charset "UTF-8";
p {
color: yellow !important;
}
- cascadingTest.html 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우선순위 실습</title>
<link rel="stylesheet" href="cascadingCss.css">
<style>
.apple {
color: red;
}
#banana {
color: black;
}
/* important 사용 방법
속성명 : 속성값 !important;
*/
/* 사과가 초록색으로 나오게 하기 */
div.apple {
color: green;
}
</style>
</head>
<body>
<!-- 바나나가 노란색으로 나오게 하기 -->
<p id="banana" class="apple" style="color: black">바나나</p>
<div class="apple">사과</div>
</body>
</html>
실습(CSS 상속)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- CSS 속성은 자동으로 상속되는 속성과 강제로 상속해야 하는 속성이 있다. -->
<title>CSS 상속</title>
<style>
body {
color: green;
}
.inherit-test {
color: red;
border: 3px dashed #30f;
padding: 20px;
}
/* div 태그의 자식 요소인 h와 p 태그에 border와 padding을 상속해준다. */
h1, p {
border: inherit;
padding: inherit;
}
button {
color: inherit;
}
</style>
</head>
<body>
<div class="inherit-test">
Div
<h1>Heading</h1>
<p>
Paragraph <strong>Strong</strong>
</p>
<button>Button</button>
</div>
</body>
</html>
실습(바깥 여백 - margin)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>바깥 여백 - margin</title>
<style>
div#div1 {
/* margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
margin-right: 30px; */
margin: 30px;
border: 1px solid #000;
}
div#div2 {
margin-top: 60px; /* 위의 요소와 바깥여백이 겹친다면 px은 +되지 않고 겹친다. */
margin-bottom: 30px;
border: 1px solid #324;
}
div#div3 {
margin-top: 20px;
margin-right: 30px;
border: 1px solid #e10;
}
div#div4 {
/* margin : 상하값 좌우값; */
display: inline-block;
margin: 30px 0;
}
div#div5 {
/* margin: 위 오른쪽 아래 왼쪽; */
display: inline-block;
margin: 0 0 20px 30px;
}
div#div6 {
display: inline;
border: 1px solid black;
margin-right: 30px;
}
div#div7 {
display: inline;
border: 1px solid black;
margin-left: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
안녕하세요 DIV1입니다.
</div>
<div id="div2">
안녕하세요 DIV2입니다.
</div>
<div id="div3">
안녕하세요 DIV3입니다.
</div>
<div id="div4">
안녕하세요 DIV4입니다.
</div>
<div id="div5">
안녕하세요 DIV5입니다.
</div>
<div id="div6">
안녕하세요 DIV6입니다.
</div>
<div id="div7">
안녕하세요 DIV7입니다.
</div>
</div>
</body>
</html>
'웹 개발 > CSS' 카테고리의 다른 글
| [Web_CSS] 06 (0) | 2022.04.24 |
|---|---|
| [Web_CSS] 05 (0) | 2022.04.23 |
| [Web_CSS] 04 (0) | 2022.04.22 |
| [Web_CSS] 02 (0) | 2022.04.20 |
| [Web_CSS] 01 (0) | 2022.04.19 |
