lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>CSS 시작하기</title>
  </head>

  <body>
    <h1>CSS 시작하기</h1>
    <div class="card">
      <img
        src="https://fastly.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI"
        alt="이미지"
        class="card-image"
        height="180"
        width="300"
      />
      <div class="card-content">
        <h3 class="card-title">안녕하세요</h3>
        <p class="card-description">css 공부 시작해볼까요!</p>
        <button class="card-button">더 알아보기</button>
        <div class="hidden-content">버튼을 누르셨군요!</div>
      </div>
    </div>
  </body>
</html>

# CSS 시작하기

`CSS`는 **Cascading Style Sheets**의 약자로 웹페이지의 디자인(Styling)과 레이아웃을 담당합니다.

<br />

## CSS의 주요 특징

1. `스타일 적용`: HTML 요소에 색상(Color), 글꼴(Font), 간격(Margin) 등 스타일을 적용. 웹페이지를 매력적으로 꾸밈

2. `선택자와 속성`: 특정 HTML 요소를 선택하기 위해 선택자(Selector)를 사용하고, 선택된 요소에 스타일을 정의하는 속성(Properties) 부여

```css title="CSS 기본 구조"
선택자 {
  속성: 값;
}
```

<br />

3. `계층적 스타일링`: **Cascading**이라는 단어는 웹페이지의 스타일이 다양한 계층을 통해 결합됨을 의미. 따라서 여러 개의 스타일을 우선순위에 따라 중첩해 적용할 수 있음

4. `반응형 웹 디자인`: CSS 미디어 쿼리(Media Queries)를 활용해 다양한 기기와 화면 크기에 대응하는 반응형 웹 디자인을 구현

HTML이 웹페이지의 **골격**을 만든다면, CSS는 그 골격에 **옷**을 입히는 역할이라고 생각할 수 있습니다.

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.