CSS
CSS(Cascading Style Sheets)는 HTML 요소에 스타일(색상, 폰트, 배치 등)을 적용하기 위한 언어이다.
HTML이 문서의 구조를 담당한다면, CSS는 시각적인 표현을 담당한다.
예를 들어 아래와 같이 HTML만으로는 단순한 구조만 표현할 수 있지만:
<p>환영합니다!</p>CSS를 사용하면 다음과 같이 꾸밀 수 있다.
p {
color: blue;
font-size: 20px;
text-align: center;
}CSS의 주요 특징
css의 주요 특징은 캐스캐이딩과 상속이다. 이 두 가지 특징을 알면 css를 더 잘 이해할 수 있다.
1. 캐스캐이딩 (Cascading)
캐스캐이딩(Cascading)은 여러 CSS 규칙이 하나의 요소에 적용될 때, 어떤 규칙을 우선 적용할지 결정하는 원칙이다.
브라우저는 명시성, 중요도, 작성 순서를 기준으로 최종 스타일을 선택하며, 덕분에 여러 스타일이 겹쳐도 오류 없이 처리된다.
1.1 명시성(Specificity)
명시성은 CSS 선택자가 얼마나 구체적인지를 수치로 나타낸 것이다.
명시성 점수가 높을수록 해당 스타일이 우선 적용된다.
선택자 유형 예시 명시성 점수
| 스타일을 적용할 요소 | 예시 | 명시성 값 |
| 태그 선택자 | p | 1 |
| 클래스 선택자 | .box | 10 |
| ID 선택자 | #main | 100 |
| 인라인 스타일 | style="" | 1000 |
/* 아래 두 스타일이 모두 적용된다면? */
p { color: red; }
#text { color: blue; }→ #text가 더 구체적이므로 파란색이 적용된다.
1.2 중요도 (!important)
!important가 붙은 스타일은 명시성보다 우선이다.
1.3 작성 순서
같은 명시성과 중요도를 가진 규칙이라면 나중에 작성된 것이 우선이다.
h1 {
color: red;
}
h1 {
color: green;
}→ 초록색이 적용된다.
2. 상속
일부 CSS 속성은 부모 요소의 값을 자식 요소가 자동으로 물려받습니다.
<div style="color: blue;">
<p>이 텍스트도 파란색입니다.</p>
</div>→ p 태그에 별도의 색상을 지정하지 않아도 div의 color 속성을 상속받는다.
모든 속성이 상속되는 것은 아니고 상속되는 속성이 따로 있습니다.
상속되는 주요 속성:
- color
- font-family
- font-size
- line-height
상속되지 않는 속성:
- margin
- padding
- border
CSS 적용 방법
CSS를 HTML에 적용하는 방법은 3가지 방식이 있다.
1. 인라인 스타일
HTML 요소 안에 직접 style 속성을 사용한다.
<p style="color:red;">인라인 스타일입니다.</p>- 명시성이 가장 높음
- 단점: 재사용 불가, 유지보수 어려움
2. 내부 스타일시트
HTML 파일의 <style> 태그에 CSS를 작성한다.
<head>
<style>
p {
font-size: 18px;
}
</style>
</head>- 간단한 문서나 테스트에 적합
3. 외부 스타일시트
CSS를 .css 파일로 분리하고 별도로 link 또는 import 해온다.
<head>
<link rel="stylesheet" href="styles.css">
</head>
#html의 경우 헤더에 추가/* styles.css 파일 **/
body {
background-color: #f5f5f5;
}- 가장 일반적이며 권장되는 방식
- 유지보수와 재사용에 유리
CSS 기본 문법
CSS는 다음과 같은 구조를 갖는다.
선택자 {
속성: 값;
}
h1 { color: red }- 선택자: 스타일을 적용할 대상을 지정
- 선언부: 선택자가 적용할 스타일을 정의하는 부분, 중괄호로 작성하며 각 속성은 ; 로 구분한다.
'기술 > HTML,CSS' 카테고리의 다른 글
| [CSS] CSS 전처리기와 후처리기, 뭐가 다를까? (1) | 2025.05.13 |
|---|---|
| [CSS] CSS Diner: 선택자 연습을 위한 CSS 학습 사이트 (0) | 2025.05.13 |
| [HTML] 시맨틱 태그(Semantic tag) (0) | 2025.05.07 |