CSS는 '선택자' 라는 개념이 있는데, 이것은 HTML 태그 중, 특정요소를 선택함으로써 해당요소에 스타일이나 기능을 적용할 수 있습니다. 그리고 이러한 각종 요소들 사이에서 인터넷이 어떤 규칙을 먼저 적용할지 결정하는 방법을 '우선 순위(Specificity)' 라고 부릅니다.
목차
동일한 CSS 속성이 중복으로 사용될 때, 아래의 우선순위에 따라 적용됩니다.
그리고 외부CSS파일 보다, HTML 코드에서 내부style코드가 더 우선 적용됩니다.
| 1순위 | !important |
css 속성값 마지막에 붙이는 속성 |
| 2순위 | Inline Style |
html에서 직접 style 지정 |
| 3순위 | ID Selector |
#id로 직접 지정하는 속성 |
| 4순위 | Class Selector |
.class 클래스 이름을 직접 지정하는 속성 |
| 5순위 | Tag Selector |
html 태그를 지정하는 속성 |
| 6순위 | 상위 객체에 의한 상속된 속성 | 상위에 적용된 스타일은 하위속성에도 반영 |
| 내부 파일 내 속성 적용(html 파일 내부) > 외부 파일 적용(외부 Style.css파일) |
||
1순위. !important
- 혹시 제일 우선순위로 적용시키고 싶은 속성이 있으신가요? 그렇다면 속성값 뒤에 <!important> 를 붙입시다.
이 속성은 디자이너<->개발자 간의 커뮤니케이션에서도 중요한 역할을 합니다.
div {
color: red !important;
}2순위. Inline style
- 스타일 속성은 CSS 속성으로 HTML의 <head>내부에 쓰는 속성으로 별도의 외부 css파일을 따로 불러올 필요가 없는 속성입니다. 이 인라인 스타일 속성은 외부 CSS파일보다 우선적용됩니다.
<head>
<style>
p {
font-size : 1.6em
color : #000
}
</style>
</head>3순위. ID 선택자
- 아이디 선택자는 CSS의 특정요소를 선택할 때 사용하며, 특별하다고 생각해서 특정 아이디를 임의로 지정하는 것입니다. 아이디 선택자 사용시, 1개의 ID만 사용해야 합니다. 그 이유는 HTML과 CSS 언어로만 구성된 웹페이지는 같은 아이디 이름을 사용해도 되지만, 자바스크립트 작업시 오류가 나기 때문입니다.
<head>
<style>
#center { color: #000 ; }
</style>
</head>
<body>
<p id="center"> 아이디 선택자 </p>
</body>4순위. class 선택자
- 클래스 선택자는 여러 요소를 그룹으로 한 번에 묶어서 선택할 때 사용합니다. .클래스이름 으로 표기하며, 이 때, 같은 클래스 이름을 가진 요소를 전부 선택되니 주의해야 합니다.
<head>
<style>
.headings {
color: red;
}
</style>
</head>
<body>
<h2 class="headings"> CSS 우선순위 정하기 </h2>
<h3 class="headings"> 4순위. Class 선택자 </h3>
</body>5순위. tag 선택자
- HTML 내부 파일 중, 태그를 직접 사용하여 선택할 수 있습니다. tag {} 로 표기합니다. 내부에 원하는 스타일을 주면 됩니다.
<head>
<style>
h3 {
color: green;
}
</style>
</head>
<body>
<h2>CSS 선택자 우선순위</h2>
<h3>5순위. 태그 선택자 요소</h3>
</body>
6순위. 상위 객체에 상속된 속성
- CSS에서의 상속은 상위요소(부모)에 의해 어쩔수 없이 하위요소(자식, 자손)도 그 속성이 적용됨을 의미합니다.
여기서 주의할 점은 상속이 되지 않는 속성도 있습니다.
(▼상속되지 않는 속성 list)
border
display
margin
padding
box-sizing
width/height
background
text-decoration
position
top/right/bottom/left
z-index
overflow
float
vertical-align'HTML | CSS' 카테고리의 다른 글
| 어도비 XD 그리드 설정시 자동 입력 값 오류 해결 (0) | 2022.05.31 |
|---|---|
| <a>태그로 간단하게 문서 내로 이동하기 (0) | 2021.12.21 |
| CSS 인라인 블록 요소 레이아웃 스타일 (0) | 2021.11.03 |
| CSS position속성으로 1분만에 자유롭게 배치하기 (부모요소, 자식요소) (0) | 2021.10.29 |
| HTML5 시멘틱 구조 태그 (0) | 2021.10.28 |
