lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <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>px 예시</title>
  </head>
  <body>
    <div class="container">
      <p class="sample-text">이 단락의 글자 크기는 px 단위로 지정되었습니다.</p>
    </div>
  </body>
</html>

# 픽셀(px)

아래 CSS 코드는 p 태그로 구성된 단락(Paragraph)의 글자 크기를 **12px**로 조정하고, 글자색을 **파란색**으로 꾸밉니다.

```css title="p 태그 CSS 예시"
p {
  font-size: 12px;
  color: blue;
}
```

<br />

그렇다면 `font-size: 12px;`에서 px은 무엇을 의미할까요?

px은 디지털 화면상의 작은 점 하나를 의미하는 픽셀(Pixel)을 뜻합니다.

CSS는 픽셀 단위로 길이, 너비, 여백 등을 지정하며 상대적인 단위인 em이나 %와 달리 고정된 크기를 갖습니다.

따라서 px로 정의된 치수는 다양한 디바이스와 화면에서도 일관된 결과를 보여줍니다.

참고로 치수 단위는 px 외에도 아래와 같은 단위들을 사용합니다.

- **em**: 요소의 상대적인 크기를 지정하는 단위로, 부모 요소의 크기에 따라 변화

- **%**: 부모 요소의 크기에 대한 백분율로 크기 지정

- **rem**: 루트 요소(일반적으로 `<html>` 요소)의 크기를 기준으로 상대적인 크기 지정

- **vw와 vh**: 뷰포트(Viewport, 웹페이지가 표시되는 화면 영역) 너비(w)와 높이(h)에 대한 백분율로 크기 지정

각 단위는 다음 수업에서 자세히 설명하겠습니다 :)

<br />

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