0️⃣ summary
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- .클래스, :추상클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됨.
1️⃣ 어떤 것(what)을 왜(why) 공부했나
A. Why
CSS를 적용해보는 연습을 하던 도중 설정한 값과 다르게 지정된 부분을 발견함 -> 중복 지정된 부분이 존재함을 알게됨.
CSS 지정 방법들 중 어떤 방법이 가장 우선순위를 가지는지 알아봐야겠다고 생각함.
B. What
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
1. 기본적으로 css 속성 덮어쓴다.
2. !important; 0순위
3. 예외) inline 방식 1순위(inline 방식으로 적용된 것이 제일 마지막에 적용됨)
4. id 선택자 2순위
5. class 선택자 3순위
6. 태그선택자 4순위
10. 요소 선택 {css 속성명:css 값; ; ; }
10-1. 선택하는 방법: 태그명 / #id값 / .class 속성값
-->
<style type="text/css">
p{background-color:olive; color:blue}/* 태그선택{속성명:값}, 모든 p 태그에 올리브 색상 적용 */
#first{color: lime;}
.pinkGroup{color: pink}
h3 {color: orange !important;}
h1, h3 {color: orange} 이런식으로 여러개 선택도 가능 하지만 권장하지 않음
h1 h3 =>h1내부에 포함된 h3 이라는 의미가 됨
h1#first.pinkGroup 세가지 조건 만족하는 태그가 선택됨.
</style>
<link href="my.css" rel="stylesheet">
</head>
<body>
<h1 id="first" class="pinkGroup">스타일 연습 페이지1</h1>
<h1 class="pinkGroup">스타일 연습 페이지2</h1>
<h3 class="pinkGroup">스타일 연습 페이지3</h3>
<p style="color: red">스타일 지정 방법을 연습합니다(1.inline 방식)</p><!-- 특정태그를 찾아 내부에 작성 -->
<p>스타일 지정 방법을 연습합니다(2.내부파일지정방식)</p><!-- style 태그 부분 -->
<p>스타일 지정 방법을 연습합니다(3.외부파일지정방식)</p><!-- link태그 부분 -->
</body>
* 여러개 선택하는 방법: 그룹을 만든다
<style>
.pinkGroup{color: pink}
</style>2️⃣ 가져갈 것들 및 생각(takeaway)
1. <link> 태그로 css 만 분리된 파일을 연결하는 방법,
2. <style>태그를 쓰는 방법,
3. inline 으로 지정 태그 안에 작성하는 방법
순으로 CSS 적용이 권장되어진다는 것.
참고(reference)
CSS 적용 우선순위 - ofcourse
개요 CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요, CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다. 우선순위는 아래와 같습니다. 속성 값 뒤에 !important 를 붙
ofcourse.kr
728x90
'Weekly I Learned > TIL' 카테고리의 다른 글
| [WIL] 유데미 STARTERS 취업 부트캠프 3기(백엔드) week 2 (0) | 2022.12.03 |
|---|---|
| [221128 TIL] 증감 연산자, 전위/후위 연산자, 복합연산자 (0) | 2022.11.28 |
| [WIL] 유데미 STARTERS 취업 부트캠프 3기(백엔드) week 1 (1) | 2022.11.27 |
| [221124 TIL] 절대경로와 상대경로 (0) | 2022.11.24 |
| [221123 TIL] 서버와 클라이언트(Server, Client) (0) | 2022.11.23 |
