CSS 기초

seokhyeon_k·2025년 2월 19일

CSS 기초 정리

CSS란?

CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어로, 웹페이지의 디자인을 결정하는 데 사용됩니다. CSS는 HTML과 분리되어 있어 코드의 유지보수성을 높이고, 여러 페이지에서 일관된 스타일을 적용할 수 있습니다.

CSS 적용 방법

CSS를 HTML에 적용하는 방법에는 세 가지가 있습니다.

1. 외부 스타일 시트 (External Style Sheet)

<link rel="stylesheet" href="/src/css/styles/01-css-basic.css" />

link 태그를 사용하여 별도의 CSS 파일을 불러옵니다.
여러 HTML 파일에서 동일한 스타일을 적용할 수 있어 유지보수에 유리합니다.

2. 내부 스타일 시트 (Embedded Style Sheet)

<style>
  h2 {
    font-size: 36px;
  }
</style>

style 태그를 사용하여 HTML 문서 내에서 직접 CSS를 정의합니다.
특정 페이지에서만 적용할 때 유용합니다.

3. 인라인 스타일 (Inline Style)

<h1 style="color: red">CSS 기초</h1>

style 속성을 사용하여 특정 요소에 직접 스타일을 적용합니다.
다른 스타일보다 우선순위가 높지만, 유지보수가 어렵기 때문에 최소한으로 사용하는 것이 좋습니다.

CSS 기본 문법

선택자 {
  속성: 값;
}

예제:

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

h1 : 선택자 (스타일을 적용할 HTML 요소)
color : 속성 (텍스트 색상을 지정)
blue : 값 (파란색 지정)

실전 예제

<!doctype html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS 기초</title>
    <link rel="stylesheet" href="/src/css/styles/01-css-basic.css" />
    <style>
      h2 {
        font-size: 36px;
      }
    </style>
  </head>
  <body>
    <h1 style="color: red">CSS 기초</h1>
    <h2>CSS 기본 문법</h2>
    <p>
      AI 코딩 도구를 활용하면 코드 생성 및 자동화, 개발 워크플로우와의 통합 등이 가능하며 기존 개발 환경 대비 생산성을 높일 수 있습니다. 그러나 개발자를 꿈꾸며 학습하는 예비 개발자에게 AI 코딩 도구는 양날의 검이 될 수 있습니다. AI 코딩 도구에만 의존하는 주니어 개발자는 경쟁력을 갖출 수 없기 때문입니다. 오히려 더 깊이 있게 언어를 학습하고 좋은 질문을 할 수 있도록 문해력(Literacy)을 기르는 것이 필요합니다. 다만 AI 도구를 완전히 배제하는 것이 아닌 학습을 위한 파트너로서 활용할 것을 추천합니다.
    </p>
  </body>
</html>