CSS 시작하기: 문법, 규칙, 연결 방식

2026-04-08Views 128약 7분

HTML이 웹페이지의 뼈대라면, CSS는 그 뼈대에 표정과 옷을 입히는 역할을 한다. 그런데 초보자가 처음 CSS를 만날 때 가장 많이 하는 질문은 의외로 비슷하다. "그래서 CSS를 어디에 써야 하죠?", "중괄호는 왜 쓰죠?", "글자 색 하나 바꾸려면 정확히 어떤 형식으로 써야 하죠?"

이 장에서는 바로 그 질문에 답한다. CSS의 기본 문법을 손에 익히고, 인라인 스타일·내부 스타일시트·외부 스타일시트의 차이를 예제로 이해하면, 이제부터는 직접 스타일을 붙일 수 있다. 작은 성공이 쌓이면 웹페이지가 갑자기 재미있어진다.

CSS 한 줄의 정체부터 보기

CSS의 가장 기본 형태는 아래와 같다.¹

selector {
  property: value;
}

겉보기엔 짧지만, 이 안에 CSS의 핵심이 다 들어 있다.

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

이 코드를 조각내서 보면 이해가 쉬워진다.

h1은 선택자(selector) 다. 어떤 HTML 요소를 꾸밀지 고른다.
color와 font-size는 속성(property) 이다. 무엇을 바꿀지 정한다.
blue, 32px는 값(value) 이다. 어떻게 바꿀지 정한다.
중괄호 { } 안의 내용은 선언 블록(declaration block) 이다.
color: blue; 같은 한 줄은 선언(declaration) 이다.

쉽게 말하면 이런 구조다.

"누구를(selector) 어떻게(property: value) 꾸밀까?"

CSS는 결국 이 문장을 반복해서 쓰는 언어다.

가장 먼저 익혀야 할 선택자 3가지

선택자는 나중에 훨씬 다양해지지만, 처음에는 세 가지만 알아도 충분하다.²

태그 선택자

HTML 태그 이름으로 요소를 고른다.

p {
  color: #333;
}

이 코드는 페이지 안의 모든 <p>에 적용된다.

클래스 선택자

점(.)으로 시작한다. 여러 요소에 공통 스타일을 줄 때 가장 자주 쓴다.

.highlight {
  background-color: yellow;
}

HTML에서는 이렇게 연결한다.

<p class="highlight">중요한 문장입니다.</p>

클래스는 "이 요소는 이런 역할이에요"라는 이름표라고 생각하면 편하다.

아이디 선택자

샵(#)으로 시작한다. 보통 한 페이지에서 하나의 특별한 요소를 가리킬 때 쓴다.

#main-title {
  color: tomato;
}

HTML에서는 이렇게 쓴다.

<h1 id="main-title">내 소개 페이지</h1>

처음에는 이렇게 기억하면 된다. 반복해서 쓸 스타일은 class, 딱 하나만 집고 싶으면 id.

속성과 값은 어떻게 읽어야 할까

CSS를 읽을 때는 속성과 값을 한 덩어리로 보면 된다.

p {
  color: red;
  font-size: 18px;
  text-align: center;
}

이 코드는 아래 뜻을 가진다.

글자 색은 빨강
글자 크기는 18픽셀
글자 정렬은 가운데

여기서 중요한 점이 있다. 속성마다 받을 수 있는 값의 종류가 다르다. 예를 들어:

color는 red, #ff0000, rgb(255, 0, 0) 같은 색상값을 받는다.
font-size는 16px, 1.2rem, 120% 같은 크기값을 받는다.
text-align은 left, center, right 같은 정렬값을 받는다.

즉 CSS는 아무 말이나 쓰는 언어가 아니다. 속성이 정해지면, 그 속성이 이해할 수 있는 값만 써야 한다.

세미콜론과 중괄호를 자꾸 틀리는 이유

초보자가 가장 자주 만나는 실수는 문법 기호다. CSS는 생각보다 예민하다.

올바른 예시는 이렇다.

h2 {
  color: navy;
  margin-bottom: 12px;
}

자주 하는 실수는 이런 모습이다.

h2 {
  color: navy
  margin-bottom: 12px;
}

첫 줄 끝에 세미콜론 ; 이 빠졌다. 어떤 브라우저는 어느 정도 이해해 주기도 하지만, 예기치 않은 문제가 생길 수 있다. 특히 여러 속성을 쓸 때는 속성: 값; 형태를 습관처럼 유지하는 게 좋다.¹

또 하나, 중괄호 위치를 헷갈리는 경우가 많다.

h2
  color: navy;

이렇게 쓰면 안 된다. 선언은 반드시 중괄호 안에 들어가야 한다.

첫 번째 예제: 가장 작은 CSS 완성하기

아래 HTML 파일 하나만 있어도 CSS를 연습할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 연습</title>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>CSS를 처음 배우는 중입니다.</p>
</body>
</html>

여기에 CSS를 붙이면 이런 변화가 생긴다.

h1 {
  color: royalblue;
}

p {
  color: #444;
  font-size: 18px;
}

결과를 머릿속으로 그려 보자. 제목은 파란색이 되고, 문단은 조금 더 진하고 읽기 좋은 크기로 바뀐다. CSS는 이렇게 작은 변화에서 시작한다. 처음부터 레이아웃을 정복하려 하지 않아도 된다. 한 줄씩 바꿔 보는 게 가장 빠른 공부다.

CSS는 어디에 써야 할까

CSS를 HTML에 연결하는 대표적인 방법은 세 가지다. 인라인, 내부 스타일시트, 외부 스타일시트다.³

이 세 가지는 모두 쓸 수 있지만, 쓰임새가 다르다. 초보자 입장에서는 "무조건 하나만 정답"이라고 보기보다, 언제 무엇이 편한지 이해하는 것이 중요하다.

인라인 스타일: 요소에 바로 쓰기

인라인 스타일은 HTML 태그 안의 style 속성에 직접 CSS를 적는 방식이다.³

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

이 방식의 장점은 아주 단순하다는 점이다. 파일을 따로 만들 필요 없이 바로 눈앞의 요소 하나를 꾸밀 수 있다. 그래서 테스트하거나, 아주 예외적인 한 요소만 빠르게 바꾸고 싶을 때는 편하다.

하지만 단점도 분명하다. HTML 안에 스타일이 섞여 들어가서 코드가 금방 지저분해진다. 같은 스타일을 여러 곳에 반복하기도 쉽다. 무엇보다 나중에 수정할 때 귀찮다. 버튼 20개를 같은 색으로 바꿔야 하는데 모두 인라인으로 적혀 있다면, 생각만 해도 손목이 먼저 항의한다.

예제를 보자.

<p style="color: crimson; background-color: #fff4f4;">
  이 문장은 인라인 스타일로 꾸몄습니다.
</p>

간단한 실험에는 좋지만, 페이지 전체를 꾸미는 주력 방식으로는 잘 쓰지 않는다.

내부 스타일시트: 한 페이지 안에서 한꺼번에 관리하기

내부 스타일시트는 HTML 문서의 <head> 안에 <style> 태그를 두고 CSS를 작성하는 방식이다.³

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내부 스타일시트 예제</title>
  <style>
    body {
      background-color: #f7f9fc;
    }

    h1 {
      color: seagreen;
    }

    p {
      color: #333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>내부 스타일시트</h1>
  <p>이 페이지 안에서만 적용됩니다.</p>
</body>
</html>

이 방식은 한 파일 안에서 HTML과 CSS를 함께 관리할 수 있어 연습용, 실험용, 단일 페이지 작업에 꽤 편리하다. 특히 초보자가 처음 CSS 문법을 익힐 때는 파일을 왔다 갔다 하지 않아도 되니 부담이 적다.

다만 페이지가 여러 개로 늘어나면 불편해진다. 같은 스타일을 다른 페이지에도 쓰려면 매번 복사해야 하기 때문이다.

외부 스타일시트: 가장 많이 쓰는 방식

외부 스타일시트는 CSS를 별도 .css 파일에 작성하고, HTML에서 <link> 태그로 연결하는 방식이다.⁴

HTML 파일:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>외부 스타일시트 예제</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>외부 스타일시트</h1>
  <p class="intro">CSS 파일을 따로 분리했습니다.</p>
</body>
</html>

CSS 파일(style.css):

body {
  background-color: #f3f6fb;
}

h1 {
  color: darkslateblue;
}

.intro {
  color: #444;
  font-size: 18px;
}

이 방식이 실무와 실제 프로젝트에서 가장 많이 쓰인다. 이유는 명확하다. HTML은 구조를 맡고, CSS는 꾸미기를 맡으니 역할이 깔끔하게 나뉜다. 게다가 여러 페이지가 하나의 CSS 파일을 함께 쓸 수 있어서 유지보수가 쉽다.⁵

한 번 수정하면 여러 페이지에 동시에 반영되는 경험은 꽤 짜릿하다. 마치 건물 하나하나에 페인트칠하는 대신, 도시 전체의 조명을 한 번에 바꾸는 느낌이다.

세 가지 방식, 언제 무엇을 쓸까

처음엔 헷갈리지만 기준은 의외로 단순하다.

방식	어디에 작성하나	범위	추천 상황
인라인 스타일	HTML 태그의 `style` 속성	요소 1개	빠른 테스트, 예외 처리
내부 스타일시트	HTML의 `<head>` 안 `<style>`	현재 페이지	연습, 단일 페이지
외부 스타일시트	별도 `.css` 파일	여러 페이지	일반적인 웹사이트, 실무

초보자에게 가장 추천하는 흐름은 이렇다. 처음 문법을 익힐 때는 내부 스타일시트로 연습하고, 익숙해지면 외부 스타일시트로 옮겨 가는 것이다. 인라인 스타일은 정말 필요한 한두 군데에만 쓰는 편이 좋다.

세 방식이 모두 섞이면 어떤 일이 생길까

같은 요소에 서로 다른 스타일이 걸리면, 어떤 규칙이 우선 적용될까? 아주 자세한 내용은 뒤에서 다루겠지만, 출발점만 알아 두면 좋다.

보통 인라인 스타일이 내부 스타일시트나 외부 스타일시트보다 우선하는 편이다.⁶

예를 들어:

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p style="color: red;">나는 무슨 색일까요?</p>
</body>
</html>

이 문장은 빨간색으로 보일 가능성이 높다. 태그에 직접 적은 style="color: red;" 가 더 강하게 작동하기 때문이다.⁶

처음에는 이렇게만 기억해도 충분하다.

가까이 붙어 있고 더 구체적인 스타일이 대체로 이긴다.

실습 예제: 같은 페이지를 세 방식으로 꾸며 보기

아래의 목표를 생각해 보자.

제목은 파란색
문단은 회색
버튼은 배경색이 있는 박스처럼 보이기

1단계: 인라인 스타일

<h1 style="color: dodgerblue;">회원 가입</h1>
<p style="color: #555;">아래 정보를 입력해 주세요.</p>
<button style="background-color: #4caf50; color: white; border: none; padding: 10px 16px;">
  제출
</button>

바로 보이기는 하지만, 조금만 요소가 늘어나도 관리가 힘들어진다.

2단계: 내부 스타일시트

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
    h1 {
      color: dodgerblue;
    }

    p {
      color: #555;
    }

    button {
      background-color: #4caf50;
      color: white;
      border: none;
      padding: 10px 16px;
    }
  </style>
</head>
<body>
  <h1>회원 가입</h1>
  <p>아래 정보를 입력해 주세요.</p>
  <button>제출</button>
</body>
</html>

코드가 훨씬 읽기 쉬워진다.

3단계: 외부 스타일시트

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>회원 가입</h1>
  <p>아래 정보를 입력해 주세요.</p>
  <button>제출</button>
</body>
</html>

style.css

h1 {
  color: dodgerblue;
}

p {
  color: #555;
}

button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 16px;
}

이제야 좀 "웹페이지를 만들고 있다"는 느낌이 난다. 구조와 스타일이 분리되면서 코드도 덜 복잡해진다.

파일 연결할 때 자주 하는 실수

외부 스타일시트를 처음 연결할 때는 아래 실수가 정말 흔하다.

파일 경로를 잘못 적기

<link rel="stylesheet" href="style.css">

style.css 파일이 HTML 파일과 같은 폴더에 있어야 한다. 다른 폴더에 있다면 경로를 바꿔야 한다.

예를 들어 CSS 파일이 css 폴더 안에 있다면:

<link rel="stylesheet" href="css/style.css">

파일 확장자를 빼먹기

<link rel="stylesheet" href="style">

이렇게 쓰면 연결되지 않는다. .css까지 정확히 적어야 한다.

`link` 태그를 `body`에 넣기

스타일시트 연결은 보통 <head> 안에 둔다.⁴

<head>
  <link rel="stylesheet" href="style.css">
</head>

CSS 파일 안에 HTML을 넣기

style.css 파일에는 CSS만 들어가야 한다. <h1> 같은 HTML 태그를 파일에 넣으면 안 된다.⁴

보기 좋은 CSS는 배우기 쉬운 CSS다

CSS는 문법만 맞는다고 끝이 아니다. 읽기 쉽게 쓰면 실수도 줄어든다.

.button {
  background-color: #2563eb;
  color: white;
  padding: 12px 18px;
  border: none;
}

이렇게 한 줄에 몰아 쓰는 것보다,

.button{background-color:#2563eb;color:white;padding:12px 18px;border:none;}

초보자에게는 줄바꿈이 있는 형태가 훨씬 낫다. CSS는 결국 사람이 읽고 고치는 코드다. 브라우저는 둘 다 이해하지만, 미래의 나는 첫 번째를 더 사랑할 가능성이 크다.

주석도 사용할 수 있다

CSS에는 메모를 남길 수 있다.

/* 버튼 기본 스타일 */
button {
  background-color: tomato;
  color: white;
}

주석은 브라우저가 무시한다. 그래서 "이 코드는 무슨 역할이지?"를 적어 두기에 좋다. 특히 연습 중에는 주석이 작은 표지판 역할을 한다.

아주 짧은 미니 프로젝트

이제 문법과 연결 방식을 한 번에 써 보자. 작은 소개 카드 하나를 만들어 보자.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>소개 카드</title>
  <link rel="stylesheet" href="card.css">
</head>
<body>
  <div class="card">
    <h1>김초보</h1>
    <p>CSS를 배우는 중입니다.</p>
    <a href="#">프로필 보기</a>
  </div>
</body>
</html>

CSS

body {
  background-color: #f5f7fb;
}

.card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
}

.card h1 {
  color: #1d4ed8;
}

.card p {
  color: #555;
}

.card a {
  color: white;
  background-color: #2563eb;
  text-decoration: none;
  padding: 8px 12px;
}

여기서 꼭 눈여겨볼 부분은 이것이다.

.card h1

이 선택자는 "card 안에 들어 있는 h1"을 뜻한다. 선택자를 조금만 조합해도 원하는 요소를 더 정확하게 고를 수 있다. 아직은 이 정도 감각만 익혀도 충분하다.

오늘 꼭 손에 넣어야 할 핵심

CSS를 시작할 때 가장 중요한 것은 복잡한 기능이 아니라, 기본 문장을 정확하게 쓸 수 있는가다.

첫째, CSS의 기본 구조는 선택자 { 속성: 값; } 이다.¹

둘째, 가장 기초적인 선택자는 태그, 클래스, 아이디다.²

셋째, CSS를 HTML에 넣는 방법은 인라인, 내부 스타일시트, 외부 스타일시트의 세 가지가 있다.³

넷째, 실제로 페이지를 만들수록 외부 스타일시트가 가장 관리하기 편하다.⁵

처음에는 코드 한 줄 쓰는 것도 어색하다. 하지만 직접 써 보면 금방 감이 온다. 제목 색을 바꾸고, 문단 크기를 키우고, 버튼에 배경색을 넣는 순간부터 CSS는 더 이상 낯선 문법이 아니라 "눈에 보이는 변화"가 된다. 그때부터 재미가 붙는다.

참고

¹CSS Syntax

²CSS selectors - CSS MDN

³How to add CSS

⁴How to Add CSS in HTML

⁵Adding CSS to HTML: Inline, Internal, and External Stylesheets

⁶Difference between Inline, Internal and External CSS - GeeksforGeeks

책 목록

처음부터 끝까지 배우는 CSS 기초

전체 목차 보기