[CSS ] 01.CSS 개요와 기본 문법

[CSS ] 01. CSS 개요와 기본 문법

---

1. CSS란?

CSS(Cascading Style Sheets)는 HTML 문서의 모양과 화면 표현을 담당하는 스타일 언어이다.

HTML이 문서의 구조를 정의한다면, CSS는 색상, 크기, 간격, 배치 등 시각적인 요소를 정의한다.

---

2. CSS의 역할

• 텍스트 색상, 글꼴, 크기 지정
• 요소의 배치와 정렬
• 여백과 테두리 설정
• 화면 크기에 따른 표현 조정

---

3. CSS 기본 문법

CSS는 다음과 같은 구조를 가진다.

선택자 {
    속성: 값;
}

예시:

h1 {
    color: blue;
    font-size: 24px;
}

• 선택자 : 스타일을 적용할 대상
• 속성 : 변경할 스타일의 종류
• 값 : 적용할 스타일의 값

---

4. CSS 적용 방법

1) 인라인 방식

<p style="color:red;">텍스트</p>

HTML 태그에 직접 스타일을 작성하는 방식이다.

---

2) 내부 스타일 시트

<style>
p {
    color: red;
}
</style>

HTML 문서 내부에 style 태그를 사용하여 작성한다.

---

3) 외부 스타일 시트

<link rel="stylesheet" href="style.css">

CSS 파일을 분리하여 관리하는 방식이다.

---

5. CSS 주석

CSS 주석은 코드 설명이나 임시 비활성화를 위해 사용한다.

/* CSS 주석 */

---

6. CSS 우선순위 개념

하나의 요소에 여러 스타일이 적용될 경우, 우선순위에 따라 최종 스타일이 결정된다.

1. !important
2. 인라인 스타일
3. id 선택자
4. class 선택자
5. 태그 선택자

---

7. 정리

• CSS는 HTML의 시각적 표현을 담당한다
• 선택자와 속성, 값으로 구성된다
• 적용 방식은 여러 가지가 있다
• 우선순위 개념을 이해해야 한다