웹 문서의 스타일을 정의하는 문서로,
.css확장자를 가진 파일이다.
- CSS는 롤 기반(Rule-based)의 언어이다.
- 이를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.
🤔 롤 기반(Rule-based)의 언어란 무엇일까?
언어를 이해하고 생성하는 데 규칙을 사용하는 방법을 말한다.
이러한 방식은 언어의 문법, 구조, 문장 형태 등을 기반으로 특정 규칙을 정의하고, 이 규칙에 따라 언어를 분석하거나 생성한다.
예를 들어, "나는 학교에 간다"라는 문장을 분석해보자.
"나는"은 주어, "학교에"는 목적어, "간다"는 동사로 분류할 수 있다.
즉, 예시처럼 문장의 각 부분을 규칙에 따라 분류하고 이해하는 것이 롤 기반 언어 처리이다.
💡 그렇다면 CSS는
Rule기반으로 어떤 구조를 가지고 있는지 알아보자.선택자(Selector) { 속성(Property): 값(Value); 속성1: 값1; }
h1 {
color: red;
background-color: yellow;
}selecotr로h1을 선택했는데, 이것은 원하는HTML요소의 스타일을 정의할 수 있다는 걸 의미한다.- 그 다음 중괄호
{…}는선언블럭이라 부르며, 이 안에서 스타일을 선언한다. - 선언할 때는
속성과값의 쌍의 형태로 선언하고, 이를 마무리한다는 의미로 마지막에 세미콜론(;)을 붙인다.
세미콜론을 사용하면 해당 속성의 선언이 끝났다고 웹 엔진에 알려준다. 선택자 { 하나 이상의 선언 }의 형태로 이루어진 하나의 Rule(혹은 Rule Set)
⭐️ Cascading의 원칙
CSS 코드를 작성하기 전에는 꼭 지켜야할 규칙이 있다.
1. 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라서 우선 순위가 정해진다.(
브라우저에 의해 정의된 스타일<개발자가 선언한 스타일<사용자가 구성한 스타일) - 적용 범위가 적을 수록 우선시 된다. (
Tag 스타일<Class 스타일<id 스타일<인라인 스타일) - 소스 코드는 순차적으로 실행되기 때문에, 중복 선택인 경우 뒤의 코드로 실행된다.
2. 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
- 자식 요소에서 스타일을 재정의한 경우에는 부모 스타일을 덮어쓴다.
- 간혹 상속이 되지 않는 속성도 있다. (예: 배경 이미지, 배경 색 등)
🔥 CSS를 적용하는 방법
앞의 내용 복습!
1. 내부 스타일(embedded)
style 태그 내에 요소의 스타일을 적용하면, 웹 브라우저는 이 태그의 내부를 스타일 시트로 인식하기 때문에 정상적으로 스타일이 적용된다.
<head>
<style>
h1 {
color: red;
}
</style>
</head>2. 인라인 스타일(inline)
하나의 요소에만 스타일 속성을 적용하고 싶을 때 사용한다.
<body>
<h1 style="color:red">인라인 스타일 적용</h1>
</body>3. 외부 스타일(extermal)
<head>
<link rel="stylesheet" href="스타일시트문서경로" />
</head>
໒꒰ྀ ˶ • ༝ •˶ ꒱ྀིა