CSS란? HTML에 옷을 입히는 방법

HTML 페이지가 이렇게 투박한 이유#

HTML 시리즈에서 만든 소개 페이지를 브라우저에서 열면 아무 꾸밈 없이 흰 배경에 검은 텍스트만 있죠. 링크는 파란색 밑줄이고, 제목은 그냥 크고 굵을 뿐입니다.

실제 웹사이트들은 왜 예쁜 걸까요? 바로 CSS 때문입니다.

CSS란?#

CSS는 Cascading Style Sheets의 줄임말입니다.

• Cascading: 위에서 아래로 흐르며 적용됨 (나중에 자세히 배울 개념)
• Style: 디자인, 외관
• Sheets: 스타일 정의 목록

쉽게 말하면 HTML로 만든 구조에 색깔, 크기, 레이아웃, 글꼴 등 디자인을 입히는 언어입니다.

HTML이 집의 뼈대(기둥, 벽, 지붕)라면, CSS는 인테리어(도배, 가구, 조명)입니다.

CSS 기본 문법#

선택자 {
  속성: 값;
  속성: 값;
}

예시:

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

• 선택자(selector): 어떤 HTML 요소에 스타일을 적용할지 지정
• 속성(property): 어떤 스타일을 바꿀지 (color, font-size, background 등)
• 값(value): 어떻게 바꿀지 (blue, 32px, #ff0000 등)
• 각 선언은 세미콜론(;)으로 끝납니다.

CSS를 HTML에 연결하는 3가지 방법#

방법 1: 외부 파일 연결 (권장 ✅)#

별도의 .css 파일을 만들고 HTML의 <head> 에서 연결합니다.

style.css 파일:

h1 {
  color: navy;
}
p {
  color: gray;
}

index.html:

<head>
  <meta charset="UTF-8" />
  <title>내 페이지</title>
  <link rel="stylesheet" href="style.css" />
</head>

여러 HTML 파일에서 같은 CSS 파일을 사용할 수 있어서 유지보수가 쉽습니다. 실제 프로젝트에서는 이 방법을 씁니다.

방법 2: <style> 태그 안에 작성#

HTML 파일 안의 <head> 에 <style> 태그를 넣고 그 안에 CSS를 씁니다.

<head>
  <meta charset="UTF-8" />
  <style>
    h1 {
      color: navy;
    }
    p {
      color: gray;
    }
  </style>
</head>

간단한 연습이나 한 페이지짜리 프로젝트에 적합합니다.

방법 3: 인라인 스타일 (비추천 ⚠️)#

태그에 직접 style 속성으로 씁니다.

<h1 style="color: navy; font-size: 32px;">안녕하세요</h1>

나중에 수정이 어렵고 코드가 지저분해집니다. 임시 테스트 외에는 쓰지 않는 것이 좋습니다.

자주 쓰는 CSS 속성 맛보기#

이번 편에서는 가장 기본적인 속성 몇 가지만 먼저 봅니다.

body {
  /* 배경색 */
  background-color: #f0f0f0;

  /* 글자색 */
  color: #333333;

  /* 글꼴 크기 */
  font-size: 16px;
}

h1 {
  /* 파란색 글자 */
  color: blue;
}

p {
  /* 회색 글자 */
  color: #666666;
}

색상을 표현하는 방법#

CSS에서 색상을 지정하는 방법은 여러 가지입니다.

색상 이름#

color: red;
color: blue;
color: green;
color: white;
color: black;
color: orange;

영어 색상 이름을 그대로 씁니다. 약 140가지 색상 이름이 있습니다.

HEX 코드 (16진수)#

color: #ff0000;   /* 빨강 */
color: #0000ff;   /* 파랑 */
color: #333333;   /* 짙은 회색 */
color: #f5f5f5;   /* 연한 회색 */

# 뒤에 6자리 16진수로 표현합니다. 디자인 작업에서 가장 많이 쓰이는 방식입니다.

RGB#

color: rgb(255, 0, 0);    /* 빨강 */
color: rgb(0, 0, 255);    /* 파랑 */
color: rgba(0, 0, 0, 0.5); /* 반투명 검정 (마지막이 투명도 0~1) */

실습: 소개 페이지에 기본 색상 입히기#

HTML 시리즈에서 만든 소개 페이지에 style.css 파일을 만들어 연결하고 아래 스타일을 추가해 보세요.

/* style.css */

body {
  background-color: #fafafa;
  color: #222222;
  font-family: sans-serif;
}

header {
  background-color: #1a1a2e;
  color: white;
  padding: 20px;
}

h1 {
  color: #e94560;
}

h2 {
  color: #16213e;
  border-bottom: 2px solid #e94560;
}

footer {
  background-color: #1a1a2e;
  color: #aaaaaa;
  padding: 20px;
}

저장하고 브라우저를 새로고침하면 변화를 바로 볼 수 있습니다.

직접 해보기 ✏️#

본인이 원하는 색상으로 소개 페이지를 꾸며 보세요.

1. 좋아하는 색상 테마를 정하세요 (예: 파란 계열, 핑크 계열, 다크 모드 등)
2. 배경색(background-color)과 글자색(color)을 변경합니다.
3. coolors.co↗(새 창) 에서 어울리는 색상 조합을 찾아보세요.

정리#

• CSS는 HTML 구조에 디자인을 입히는 언어입니다.
• 기본 문법: 선택자 { 속성: 값; }
• 외부 파일 연결이 권장 방식입니다: <link rel="stylesheet" href="style.css" />
• 색상 지정 방식: 색상 이름, HEX 코드(#), RGB

다음 편에서는 원하는 HTML 요소를 정확히 고르는 선택자(Selector) 를 자세히 배웁니다.