본문으로 건너뛰기

2. 시작하기

CSS를 배우기 위한 첫걸음은 적절한 개발 환경을 설정하고, HTML 문서에 CSS를 적용하는 방법을 이해하는 것입니다.
이 장에서는 개발 환경을 설정하는 방법과 CSS를 HTML에 적용하는 세 가지 주요 방식을 자세히 다룹니다.

개발 환경 설정​

효율적인 CSS 개발을 위해 적절한 도구와 환경을 갖추는 것이 중요합니다. 다음은 기본적인 개발 환경 설정 방법입니다:

  1. 텍스트 에디터 선택

    • Visual Studio Code (VS Code): 풍부한 확장 기능과 사용자 친화적인 인터페이스를 제공하여 많은 개발자들이 선호합니다.
    • 그 이외 툴들이 있지만, VS Code가 독점 했다고 생각합니다. 웹스톰도 있지만 유료이기에 제외했습니다. 크게 상관은 없습니다.

  2. 브라우저 설치

    • Google Chrome, Mozilla Firefox, Microsoft Edge 등 최신 브라우저를 설치하여 다양한 개발자 도구를 활용할 수 있습니다.
      -> Google Chrome 추천
    • 브라우저의 개발자 도구(F12)를 사용하여 실시간으로 CSS를 테스트하고 디버깅할 수 있습니다.

  3. 프로젝트 폴더 구조 설정

    • 프로젝트를 체계적으로 관리하기 위해 폴더 구조를 설정합니다. 예를 들어: 
      my-project/
      ├── index.html
      ├── css/
      │   └── styles.css
      ├── js/
      │   └── scripts.js
      └── images/
          └── logo.png

HTML에 CSS 적용하기​

CSS를 HTML에 적용하는 방법은 크게 세 가지로 나눌 수 있습니다: 인라인 스타일, 내부 스타일시트, 외부 스타일시트. 각 방법의 특징과 사용법을 살펴보겠습니다.

1. 인라인 스타일 (Inline Styles)​

인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일을 지정하는 방법입니다. 특정 요소에만 스타일을 적용할 때 유용합니다.

예제:

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>인라인 스타일 예제</title>
  </head>
  <body>
    <h1 style="color: blue; text-align: center;">안녕하세요!</h1>
    <p style="font-size: 18px; color: green;">
      이 문장은 인라인 스타일로 꾸며졌습니다.
    </p>
  </body>
</html>

2. 내부 스타일시트 (Internal Stylesheet)​

내부 스타일시트는 HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다. 동일한 HTML 문서 내에서 여러 요소에 스타일을 적용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>내부 스타일시트 예제</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
      }
      h1 {
        color: navy;
        text-align: center;
      }
      p {
        font-size: 18px;
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이 문장은 내부 스타일시트로 꾸며졌습니다.</p>
  </body>
</html>

3. 외부 스타일시트 (External Stylesheet)​

외부 스타일시트는 별도의 .css 파일을 만들어 HTML 문서에 링크하여 스타일을 적용하는 방법입니다. 가장 권장되는 방식으로, 스타일의 재사용성과 유지보수성이 뛰어납니다.

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  font-size: 18px;
  color: green;
}
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>외부 스타일시트 예제</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이 문장은 외부 스타일시트로 꾸며졌습니다.</p>
  </body>
</html>

스타일 적용 방식 비교​

스타일 적용 방식장점단점
인라인 스타일 (Inline Styles)- 특정 요소에 빠르게 스타일 적용 가능
- 소규모 프로젝트나 단일 요소에 적합		- 스타일 재사용성 낮음
- 코드 관리 어려움
- 유지보수 힘듦
내부 스타일시트 (Internal Stylesheet)- 하나의 HTML 문서 내 여러 요소에 스타일 적용 가능
- 외부 파일 필요 없음		- 여러 문서에서 동일 스타일 사용 시 반복 필요
- 대규모 프로젝트에서 관리 복잡
외부 스타일시트 (External Stylesheet)- 여러 HTML 문서에서 스타일 재사용 가능
- CSS와 HTML 분리로 코드 관리 용이
- 캐싱으로 로딩 속도 향상		- 초기 설정 시 별도 파일 필요
- 외부 파일 로드 실패 시 스타일 적용 안될 수 있음