html 코드를 작성할 때 좋은 페이지를 만들려면 여러 태그, 속성을 써야 한다.
또한 태그, 속성에 맞추어 스타일을 입힐 때가 있는데 css 스타일 우선순위를 알아야 원하는대로 스타일을 입힐 수 있다.
<html>
<head>
<title>My Favorite Movies</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p id="summary">하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.<br>
새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.<br>
좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.<br>
집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>
이렇게 스타일이 적용되지 않은 기본적인 영화 소개 페이지가 만들어진다.
밋밋하다. 스타일을 적용해보자.
<html>
<head>
<title>My Favorite Movies</title>
<meta charset="utf-8">
<style>
.movie {
color: blue;
}
#summary {
color: red;
}
</style>
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p id="summary">하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.<br>
새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.<br>
좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.<br>
집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>html 코드 내부 상단에 <style> 태그를 이용해 별도로 스타일을 정의했다.
이렇게 <style></style> 형식으로 html 상단에 스타일 정의하는 건 CSS 내부 스타일임.
참고로 '.'은 class 선택자를, '#'은 id 선택자를 정의하는 기호임.
영화 설명 문단 스타일을 보면
<p> 태그를 감싸는 <div> 태그의 클래스인 'movie'에 파랑색이라는 스타일을 지정해줬는데 이건 적용되지 않고
'summary' 아이디에 red 색상을 지정한 것만 적용됐다.
CSS 우선순위 판별로 인한 결과이다.
1. CSS 우선순위 - CSS 명시도
!important >> inline style >> id >> class >> tag(요소)
이 순서를 따라 우선순위를 자연수 1000자리 숫자에 비유해서 설명하는 게 명시도.
<!--
inline style 1000(천의 자리)
id 100(백의 자리)
class 10(십의 자리)
tag 1(일의 자리)-->ex) div>p#summary
∴명시도 = 102
인라인 스타일은
<div style="color:blue; font-size:15px;">조창대 블로그 fhaktj8-18.tistory.com</div>
<div style="color:red; text-align:center;">조창대 블로그 fhaktj8-18.tistory.com</div>html 태그 안에 style 속성 값을 "속성 값1;속성 값2;속성 값3;" 형식으로 넣어준다.
현재는 스타일을 html과 분리하는 추세라 인라인 스타일보단 CSS 내부/외부 스타일이 추천되는 방식이라고 한다.
명시도를 이용해 우선순위를 가려보자.
<html>
<head>
<title>My Favorite Movies</title>
<meta charset="utf-8">
<style>
.movie { /* class 값 1개 : 10 */
color: blue;
}
#summary { /* id 값 1개 : 100 */
color: red;
}
</style>
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p id="summary">하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.<br>
새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.<br>
좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.<br>
집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>#summary의 속성 값이 100의 명시도를 가지고
.movie의 속성 값이 10의 명시도를 가지니 <p> 태그의 텍스트에는 #summary의 속성 값이 적용된다.
2. 같은 명시도 점수일 경우
<html>
<head>
<title>My Favorite Movies</title>
<meta charset="utf-8">
<style>
.movie { /* class 값 1개 : 10 */
color: blue;
}
#summary1 { /* id 값 1개 : 100 */
color: red;
}
.movie .summary2 { /* class 값 2개 : 20 */
color: purple;
}
.summary3 { /* class 값 1개 : 10 */
color: green;
}
.summary3 { /* class 값 1개 : 10 */
color: violet;
}
</style>
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p id="summary1">하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.</p>
<p>새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.</p>
<p class="summary2">좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.</p>
<p class="summary3">집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>
<p> 요소의 summary3 클래스의 스타일 우선순위
->.summary3에 의해 color: violet 적용 > .summary3에 의해 color: green 적용 > .movie
같은 명시도라도 .movie 보다 직접적인 선언인 .summary3,
두 개의 .summary3 중에서도 더 나중에 선언된 .summary3의 violet 스타일이 적용된다.
같은 스타일 명시도인 경우엔 순서에 의해 순위가 결정돼서 맨 마지막에 선언된 스타일이 우선이다.
3. 클래스 추가해 명시도 높여 우선 적용
<style>
p { /* 명시도: 1 */
color: red;
}
p.paragraph { /* 명시도 : 11 */
color: purple;
}
</style>
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p class="paragraph">
하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.<br>
새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.<br>
좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.<br>
집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>
같은 p 요소에 대한 선언이라도 어떻게 선언하느냐에 따라 우선순위가 달라진다.
p.paragraph가 더 직접적으로 선언해서 purple 색이 우선 적용됐다.
4. 아이디와 클래스가 같은 태그 안에 있는 경우
<style>
p#p_id {
color: blue;
}
p.p_class {
color: red;
}
</style>
</head>
<body>
<h1>My Favorite Movies</h1>
<div class="movie">
<h2 class="title">소공녀</h2>
<img class="poster" src="https://bloreview.com/wp-content/uploads/2020/08/1-1.jpg" height="300">
<p id="p_id" class="p_class">
하루 한 잔의 위스키와 한 모금의 담배 그리고 사랑하는 남자친구만 있다면 더 바라는 것이 없는 3년 차 프로 가사도우미 ‘미소’.<br>
새해가 되자 집세도 오르고 담배와 위스키 가격마저 올랐지만 일당은 여전히 그대로다.<br>
좋아하는 것들이 비싸지는 세상에서 포기한 건 단 하나, 바로 ‘집’.<br>
집만 없을 뿐 일도 사랑도 자신만의 방식대로 살아가는 사랑스러운 현대판 소공녀 ‘미소’의 도시 하루살이가 시작된다!</p>
</body>
같은 태그 안에 아이디와 클래스 선택자가 함께 있다면
css 우선순위에 따라 id에 선언된 스타일이 우선 적용된다.
하지만 명시도는 스타일간의 우선순위를 숫자에 빗대어 표현한 것이라 우선순위 판별의 척도일 뿐이지 스타일 그 고유의 값은 아니다.
class 속성을 10개 합친다고 해도 id 속성 값보다 더 높아지지 않는단 소리다.
요소간의 우선순위는 부동이라 숫자의 개념으로 생각하면 안 된다.
또한, 소개하지 않은 !import는 color:red !import 와 같이
정의되는 css 요소 값 뒤에 쓴다.
!import는 모든 요소들의 우선순위를 제치고 무적권 우선적용되어서 급한 상황이 아닐 경우엔 사용을 권장하지 않는다.
'WEB > html5 & css3' 카테고리의 다른 글
| [html/css]웹 페이지 만들 때 유용한 기능 모음 (0) | 2022.06.23 |
|---|
