반응형
CSS 적용 방법
1. 인라인 스타일(Inline style)
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법으로, 해당 요소에만 스타일을 적용할 수 있다.
<font style="color:green; text-decoration:underline">인라인 스타일</font>2. 내부 스타일 시트(Internal style sheet)
- HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 지정하는 방법으로, 해당 문서에만 스타일을 적용할 수 있다.
<head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
</head>3. 외부 스타일 시트(External style sheet)
- 웹 사이트 전체의 스타일을 하나의 외부 파일에서 변경할 수 있는 방법으로, 스타일을 적용할 페이지의 <head> 내 <link>태그를 사용하여 외부 스타일 시트를 불러오면 된다.
<head>
<link rel="stylesheet" href="/examples/media/expand_style.css">
</head><!-- 외부의 시트 expand_style.css -->
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }4. 웹 브라우저 기본 스타일(Reset CSS)
- 모든 웹 브라우저는 브라우저가 내장하고 있는 기본 스타일을 가지고 있어 별도의 CSS 없이도 잘 작동하지만 각 웹브라우저마다 스타일이 다양해 주의가 필요하다.
- 그래서 브라우저 별로 제각각인 스타일을 하나의 스타일로 초기화해주는 Reset CSS를 사용하는데, 주로 Eric Meyer’s reset css와 normalize.css가 사용되며 보통 이 형식을 기준으로 Css 스타일을 완성하는 것이 유용하다.
상속(Inheritance)
- 상속이란 상위 요소의 속성을 하위 요소가 물려 받는 것을 의미하는데, 모든 속성이 상속되는 것은 아니다.
- 상속받지 않는 요소 또는 상속되지 않는 경우, inherit 키워드를 사용하면 명시적으로 상속받게 할 수 있다.
- 상속 가능: visibility, opacity, font, color, line-height, text-align, white-space
- 상속 불가능: width/height, margin, padding, border, box-sizing, position, top/right/bottom/left, z-index, overflow, float, display, background, vertical-align, text-decoration
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
.text-red button {
color: inherit;
}
.text-red p {
border: inherit;
padding: inherit;
}
스타일 적용 우선순위(Cascading)
- 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있는데, 이 때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 Cascading Order이라 한다.
- 스타일 적용 방법들이 혼합될 경우 ① 인라인 스타일, ② 내외부 스타일 시트 ③ 웹 브라우저 기본 스타일순으로 우선순위가 결정된다. 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
- 중요도: style 요소 > style 내 @import문 > link문 > link 내 @import문 > 브라우저 기본 스타일순으로 우선순위가 달라진다.
- 명시도: !important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트/가상 선택자 > 태그 선택자 > 전체 선택자 > 상위 요소에 의해 상속된 속성순으로 우선순위가 높다.
- 선언순서: 선언된 순서에 따라 우선 순위가 적용되는데 나중에 선언된 스타일이 우선 적용된다.
Reference
반응형
'Language > Css' 카테고리의 다른 글
| [Css] 박스 모델 - 콘텐츠, 패딩, 보더, 마진, 아웃라인 (0) | 2023.06.19 |
|---|---|
| [Css] 레이아웃 - UI, 다중 컬럼, 반응형 웹디자인, 플렉서블 박스 (0) | 2023.06.19 |
| [Css] 선택자 - 태그, 아이디, 속성, 동위, 의사 요소 클래스 (0) | 2023.06.19 |
| [Css] 제어 규칙 - @규칙, 미디어쿼리 (0) | 2023.06.19 |
| [Css] 기본 문법 - 구조, 주석, 벤더 프리픽스 (0) | 2023.06.19 |