728x90
반응형
1. CSS 적용 방법
| 선언방식 | 형태 | 내용 | 특성 |
| 인라인 방식 | <태그 style="속성: 속성값;"> | HTML 문서 안에 각 엘리먼트에 속성으로 스타일을 끼어 넣는 방식 |
HTML 태그 안에 style 속성을 설정 |
| 내부 방식 | <head> <style> 태그 {속성: 속성값;} <style> </head> |
HTML 문서 내부에 스타일 시트를 삽입 |
style 태그 내에 스타일시트 작성 |
| 외부 방식 | <head> <link rel="stylesheet" type="text/css" href="css파일 경로"> </head> |
HTML 문서 외부에 독립된 스타일 시트 파일을 작성하여 연결하는 방식 |
link 태그를 통해 외부 CSS파일을 연결 |
| 임포트 방식 | <head> <style> @IMPORT URL("css파일 경로") </style> </head> |
스타일시트 안에서 별개의 스타일시트 파일을 포함하는 방식 |
스타일 시트 안에 @import 규칙으로 CSS파일을 포함 |
2. CSS 적용 우선순위
1. 스타일 적용 우선순위
- !important >>> HTML style >>> #id >>> .class, :가상클래스 (가상 클래스 > 클래스)
>>> 태그선택자, ::가상요소 >>> 부모에게 상속받은 스타일 - 같은 우선순위 상에 있는 경우, 부모-자식 관계가 많은 경우 우선적으로 적용
- 서로 완전히 똑같은 순위를 갖는다면, 나중에 선언된 것이 적용
- 전체 선택자(*)는 우선순위가 가장 낮음
2. 스타일 적용 우선순위 계산
1. 속성 값으로 !important가 들어간 경우 (가장 우선시 됨)
#important_style {
color: white !important;
}
2. html 태그에 inline으로 직접 style 속성을 적용하는 경우 (1000점)
<div style="color: blue;" class="description">inline으로 style속성 지정</div>
3. selector가 #id인 경우 (100점)
#id_style {
color: red;
}
4. selector가 .class이거나 :pseudo (=가상클래스)인 경우 (10점)
.class_style {
color: black;
}
5. selector가 tag인 경우 (1점)
div {
color: yellow;
}
6. *(전체) 선택자인 경우 (0점)
*{margin: 0; padding: 0;}
7. 상위 객체의 style속성을 상속받는 경우 (점수 없음)
<div class="text">
<div>상속된 속성</div>
</div>.text {
color: red;
}
728x90
반응형
'📌 Front End > └ CSS3' 카테고리의 다른 글
| [CSS] 패딩(Padding), 마진(Margin), 테두리(Border) (0) | 2024.05.27 |
|---|---|
| [CSS] CSS Grid(그리드) 레이아웃 (0) | 2024.05.25 |
| [CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] (0) | 2024.05.24 |
| [CSS] 다양한 반응형 CSS 단위 (%, em, rem, vw, vh) (2) | 2024.05.23 |
| [CSS] 뷰포트(viewport), 뷰포트 단위(vw, vh, vmin, vmax) (0) | 2024.05.23 |
