` 요소를 선택합니다.

```css p { color: blue; } ``` - 클래스 선택자 : 특정 클래스가 지정된 요소를 선택합니다.

클래스 선택자는 점(`.`)으로 시작합니다.

```css .my-class { font-size: 16px; } ``` - 아이디 선택자 : 특정 아이디가 지정된 요소를 선택합니다.

아이디 선택자는 샵(` `)으로 시작합니다.

```css my-id { background-color: yellow; } ``` - 자식 선택자 : 특정 부모 요소의 직계 자식 요소를 선택합니다.

`>` 기호를 사용합니다.

```css div > p { margin: 10px; } ``` - 후손 선택자 : 특정 요소의 모든 후손 요소를 선택합니다.

공백으로 구분합니다.

```css div p { color: red; } ```

2. 선언 블록(Declaration Block) 선택자 다음에는 중괄호 `{}`로 둘러싸인 선언 블록이 옵니다.

이 블록 안에는 하나 이상의 선언이 포함됩니다.

각 선언은 속성과 값으로 구성됩니다.

- 속성(Property) : 스타일을 적용할 CSS 속성을 나타냅니다.

예를 들어, `color`, `font-size`, `margin` 등이 있습니다.

- 값(Value) : 속성에 적용할 값을 나타냅니다.

예를 들어, `red`, `16px`, `10px` 등이 있습니다.



3. 선언(Declaration) 각 선언은 속성과 값으로 구성되며, 콜론(`:`)으로 구분됩니다.

여러 선언은 세미콜론(`;`)으로 구분합니다.

```css h1 { color: blue; /* 텍스트 색상 */ font-size: 24px; /* 글자 크기 */ margin: 20px; /* 외부 여백 */ } ```

4. 전체 예제 아래는 CSS의 기본 문법을 사용하여 작성된 예제입니다.

```css /* 모든 h1 요소의 스타일 */ h1 { color: blue; /* 텍스트 색상 */ font-size: 24px; /* 글자 크기 */ text-align: center; /* 텍스트 정렬 */ } /* .highlight 클래스를 가진 요소의 스타일 */ .highlight { background-color: yellow; /* 배경 색상 */ font-weight: bold; /* 글자 두께 */ } /* main-id 아이디를 가진 요소의 스타일 */ main-id { padding: 15px; /* 내부 여백 */ border: 1px solid black; /* 테두리 */ } ```

5. CSS 주석 CSS에서는 주석을 사용하여 코드에 설명을 추가할 수 있습니다.

주석은 `/*`로 시작하고 `*/`로 끝납니다.

```css /* 이 부분은 주석입니다.

*/ p { color: green; /* 이 텍스트는 초록색입니다.

*/ } ```

6. CSS 파일 구조 CSS는 보통 외부 스타일 시트로 작성되어 HTML 문서에 링크됩니다.

HTML 문서의 `` 섹션에 `<link>` 태그를 사용하여 CSS 파일을 연결할 수 있습니다.

```html content="width=device-width, initial-scale=1.0">

안녕하세요, CSS!

이 문장은 강조 표시된 텍스트입니다.