CSS 적용 방법 및 Cascading의 원리
CSS의 적용 방법
1. Style 태그
HTML 파일 내에 <style> 태그를 사용해 스타일링하는 방법입니다.
<html>
<head>
<style>
/* 스타일 작성 */
a {
color: red;
}
<style>
<head>
</html>2. 인라인 스타일
HTML 파일에 style 속성을 추가해 스타일링하는 방법입니다.
<a href="/" style="color: red">링크</a>3. CSS 파일 작성
html 파일과 분리하여 css 파일에 별도로 스타일을 작성하는 방법입니다.
작성한 css 파일은 html 문서에 연결해서 사용합니다.
<link rel="stylesheet" href="style.css" />/* style.css
* 스타일을 위한 별도의 css 파일 ex) style.css
* 선택자: 태그 이름, id, class
*/
// 태그 이름 선택자를 이용한 스타일
a {
color: red;
}
// id 선택자(#)를 이용한 스타일
#link {
color: red;
}
// 클래스 선택자(.)를 이용한 스타일
.link {
color: red;
}Cascading이란?
CSS의 Cascading 원리는 여러 출처에서 스타일이 적용될 때, 어떤 스타일이 우선적으로 적용되는지를 결정하는 규칙입니다. Cascading은 스타일 충돌을 방지하고, 웹 페이지에 일관된 디자인을 적용하는 데 중요한 역할을 합니다.
Cascading의 주요 규칙 3가지
스타일의 우선순위
스타일의 우선순위는 CSS 규칙이 충돌할 때 어떤 규칙이 적용될지를 결정합니다. 우선순위는 다음 순서로 적용됩니다
-
인라인 스타일: HTML 요소에 지정된 style
속성으로, 가장 높은 우선순위를 가집니다.
ex) <div style=”color: red;”>예시</div>
-
<style> 태그: 문서 내부에서만 적용되며,
인라인 스타일보다는 우선순위가 낮습니다.
ex) <div style=”color: red;”>예시</div>
- 외부 스타일 시트: 여러 HTML 문서에서 공유 가능한 .css 파일로 작성된 스타일입니다. 외부 스타일 시트는 내부 스타일 시트보다 우선순위가 낮습니다.
- 브라우저 기본 스타일: 브라우저가 기본적으로 제공하는 스타일로, 개발자가 명시적으로 스타일을 정의하지 않은 경우에 적용됩니다. CSS 규칙 중 가장 낮은 우선순위를 가집니다.
명시도
스타일의 특이성은 CSS 선택자가 얼마나 구체적인지를 나타내며, 동일한 요소에 대해 여러 스타일 규칙이 적용될 때 우선순위를 결정합니다. 우선순위는 다음과 같습니다.
- 인라인 스타일
- id 선택자
- class 선택자
- 태그 선택자
<p>태그</p>
<p class="class">class 셀렉터</p>
<p id="id" class="class">id 셀렉터</p>
<p class='class' style='background-color: red'>인라인 셀렉터</p>p {
background-color: yellow;
}
.class {
background-color: green;
}
#id {
background-color: blue;
}
스타일 적용 순서
css 규칙이 여러 파일이나 여러 위치에 정의되어 있을 때, 스타일의 적용 순서는 다음과 같습니다.
- 파일의 위치: 같은 선택자에 대한 스타일 규칙이 여러 파일에서 정의되어 있을 경우, 나중에 로드된 파일의 규칙이 이전 규칙을 덮어씁니다.
- 스타일 선언 순서: 같은 파일 내에서 스타일 규칙이 나중에 선언된 것이 이전에 선언된 규칙을 덮어씁니다.
'개발 공부 일지 > CSS' 카테고리의 다른 글
| [CSS] CSS-in-CSS vs CSS-in-JS (5) | 2024.11.28 |
|---|---|
| Position 속성의 퍼포먼스 이슈 (3) | 2024.09.09 |
| 반응형 웹 (0) | 2024.09.09 |
| Cascading (0) | 2024.09.09 |