CSS를 어디에 쓰는지부터 익히기

CSS는 '어디에 쓰는지'부터 알아야 한다

CSS를 처음 배울 때 많은 사람이 색상 이름이나 속성부터 외우려고 합니다. 하지만 실제 웹사이트를 고칠 때 먼저 부딪히는 질문은 이것입니다.

"이 코드를 어디에 넣어야 하지?"

CSS는 같은 내용이라도 넣는 위치에 따라 영향 범위가 달라집니다. 포스트잇을 어디에 붙이느냐와 비슷합니다. 버튼 하나에만 붙이면 그 버튼만 바뀌고, 한 페이지 안내문에 붙이면 그 페이지 전체가 바뀌고, 회사 전체 매뉴얼에 붙이면 모든 페이지의 규칙이 바뀝니다.

CSS를 쓰는 대표적인 위치는 세 가지입니다.¹

1. HTML 태그 안에 바로 쓰는 인라인 스타일

2. 한 페이지 안의 <style> 태그에 모아 쓰는 내부 CSS

3. 별도의 .css 파일에 저장해 연결하는 외부 CSS 파일

이 세 가지를 구분하면 템플릿을 수정할 때도 덜 헤맵니다. "지금 나는 버튼 하나만 바꾸려는가, 한 페이지를 바꾸려는가, 사이트 전체를 바꾸려는가?"라고 생각하면 됩니다.

AI 생성 이미지

버튼 하나만 급히 바꿀 때: 인라인 스타일

인라인 스타일은 HTML 요소 안에 style이라는 속성을 직접 적는 방식입니다. 예를 들어 버튼 하나만 파란색으로 만들고 싶다면 이런 식입니다.

<button style="background-color: blue; color: white;">
  구매하기
</button>

여기서 CSS는 버튼 태그 안에 들어 있습니다. 그래서 이 스타일은 이 버튼 하나에만 적용됩니다.

인라인 스타일은 아주 작은 수정에는 편합니다. 예를 들어 이메일 템플릿에서 특정 문장 하나만 빨간색으로 표시하거나, 관리자 화면에서 배너 하나만 임시로 강조할 때 사용할 수 있습니다.

하지만 단점도 큽니다. 같은 모양의 버튼이 20개 있다면 20개 모두에 같은 코드를 붙여야 합니다. 나중에 파란색을 초록색으로 바꾸려면 20곳을 찾아 고쳐야 합니다. 또 인라인 스타일은 해당 요소에 직접 붙어 있기 때문에, 나중에 다른 CSS로 덮어쓰려고 할 때 헷갈리는 원인이 되기도 합니다.

그래서 인라인 스타일은 "빠른 임시 수정"에 가깝고, 오래 관리할 디자인에는 잘 맞지 않습니다.

정리하면 이렇습니다.

한 페이지 분위기를 바꿀 때: style 태그

<style> 태그는 CSS를 한곳에 모아 적는 방식입니다. 보통 HTML 문서의 위쪽, 즉 <head> 영역 안에 넣습니다.

<style>
  .notice {
    background-color: #fff3cd;
    padding: 16px;
    border-radius: 8px;
  }
</style>

이 CSS는 notice라는 이름표가 붙은 요소를 꾸밉니다. 예를 들어 공지 박스, 이벤트 안내 박스, 배송 안내 박스처럼 한 페이지 안에서 반복되는 요소를 관리할 때 좋습니다.

이 방식의 장점은 같은 페이지 안의 여러 요소를 한 번에 바꿀 수 있다는 점입니다. 공지 박스가 세 개 있어도 .notice 스타일을 한 번만 수정하면 됩니다.

다만 이 스타일은 보통 그 페이지 안에서만 관리됩니다. 여러 페이지에 같은 공지 박스를 쓰고 싶다면 페이지마다 <style> 코드를 복사해야 할 수 있습니다. 복사가 늘어나면 나중에 어디를 고쳐야 하는지 헷갈립니다.

사이트 전체를 관리할 때: 외부 CSS 파일

외부 CSS 파일은 style.css, theme.css, custom.css처럼 따로 저장된 CSS 파일입니다. HTML 문서에서는 이 파일을 연결해서 사용합니다.

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

그리고 style.css 파일 안에는 CSS만 적습니다.

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

외부 CSS 파일은 사이트 전체 디자인을 관리할 때 가장 많이 쓰입니다. 회사 소개 페이지, 블로그 글 목록, 상품 상세 페이지, 문의하기 페이지가 모두 같은 버튼 디자인을 써야 한다면 외부 CSS 파일이 편합니다. 버튼 색을 한 번 바꾸면 여러 페이지에 함께 반영될 수 있습니다.

비유하자면 인라인 스타일은 "개별 상품에 붙인 메모"이고, <style> 태그는 "한 매장 안의 안내문"이며, 외부 CSS 파일은 "전 지점 공통 운영 매뉴얼"입니다.

실제 서비스에서는 어디를 찾아야 할까

비개발자가 CSS를 만지는 상황은 보통 직접 HTML 파일을 여는 경우보다, 워드프레스나 쇼피파이 같은 도구 안에서 설정 화면을 찾는 경우가 많습니다. 도구마다 이름은 다르지만, 찾는 방향은 비슷합니다.

중요한 점이 하나 있습니다. Custom CSS라고 적힌 칸은 보통 CSS만 넣으면 됩니다. 하지만 Custom Code, Head Code, Header Code처럼 HTML 코드를 넣는 칸이라면 CSS를 <style>...</style>로 감싸야 할 때가 있습니다. 입력칸의 안내 문구를 먼저 확인하세요.

워드프레스

워드프레스에서는 보통 다음 위치를 확인합니다.

• 클래식 테마: 외모 → 사용자 정의하기 → 추가 CSS

• 블록 테마: 외모 → 편집기 → 스타일 → 추가 CSS

• 블록 편집기나 페이지 빌더의 Custom CSS 입력칸

• 테마 설정의 커스텀 코드, 헤더 코드, 추가 스타일 영역

• 개발자가 관리하는 테마 파일 또는 플러그인 파일

운영 중인 사이트라면 테마 파일을 바로 수정하기보다 "추가 CSS"나 페이지 빌더의 CSS 입력칸을 먼저 찾는 편이 안전합니다. 테마 파일을 직접 고치면 업데이트 과정에서 수정 내용이 사라질 수 있기 때문입니다. 워드프레스의 추가 CSS는 미리보기로 확인하면서 조정할 수 있고, 테마의 기본 CSS보다 나중에 불러와져 덮어쓰기용으로 쓰기에도 좋습니다.²

다만 테마를 바꾸면 기존 테마에 묶여 있던 추가 CSS가 더 이상 적용되지 않을 수 있습니다. 큰 수정 전에는 현재 CSS를 따로 복사해 두는 습관을 들이면 안전합니다.

쇼피파이

쇼피파이에서는 보통 다음 위치를 봅니다.

• 테마 편집기의 Custom CSS 입력 영역

• 섹션별 설정 안의 CSS 입력칸

• 테마 코드 편집기의 assets 폴더 안 CSS 파일

• 섹션, 블록, 스니펫 파일 안의 스타일 영역

쇼피파이는 테마 구조 안에서 섹션이나 블록에 적은 스타일을 모아 처리하는 방식도 제공합니다. 테마 코드 수준에서는 {% stylesheet %} 같은 태그를 사용해 섹션·블록·스니펫의 CSS를 관리할 수 있습니다.³ 다만 이 태그는 파일마다 한 번만 쓸 수 있고, 그 안에서는 Liquid 코드가 렌더링되지 않는다는 제한이 있습니다. 비개발자라면 먼저 테마 편집기의 Custom CSS 영역을 찾고, 코드 파일 수정은 백업 후 진행하는 것이 좋습니다.

노션 기반 페이지와 웹빌더

노션 자체 문서에서는 CSS 파일을 자유롭게 수정하는 방식이 제한적일 수 있습니다. 대신 노션을 웹사이트처럼 보여 주는 외부 도구나 웹빌더에서는 보통 다음 이름의 메뉴를 제공합니다.

• Custom Code

• Custom CSS

• Site Settings

• Page Settings

• Header Code

• Embed Code

웹플로우, 아임웹, 윅스, 카페24, 랜딩페이지 빌더도 이름은 다르지만 원리는 비슷합니다. 전체 사이트에 넣는 CSS인지, 특정 페이지만 바꾸는 CSS인지 확인해야 합니다.

처음에는 설정 화면에서 다음 단어를 찾아보세요.

• CSS

• Style

• Custom Code

• Head

• Theme

• Design

• Advanced

이 단어가 보이면 CSS를 넣는 위치일 가능성이 높습니다.

CSS 한 문장은 이렇게 생겼다

CSS 문장은 기본적으로 다음 구조를 가집니다.

.button { background-color: blue; }

짧지만 중요한 부품이 여럿 들어 있습니다.

.button        { background-color: blue; }
선택자          중괄호  속성             값  세미콜론

하나씩 풀어보겠습니다.

선택자는 "누구를 바꿀지" 고르는 부분입니다. .button은 button이라는 클래스 이름이 붙은 요소를 고르겠다는 뜻입니다. 옷가게에서 "파란 라벨이 붙은 옷만 가져오세요"라고 말하는 것과 비슷합니다.

중괄호 { }는 "여기 안에 바꿀 내용을 적겠다"는 표시입니다. 선택자 뒤에 열고, 스타일 내용이 끝나면 닫습니다.

속성은 "무엇을 바꿀지"입니다. background-color는 배경색을 바꾸는 속성입니다.

값은 "어떻게 바꿀지"입니다. blue는 파란색으로 바꾸겠다는 값입니다.

세미콜론 ;은 한 줄의 스타일이 끝났다는 표시입니다. 문장 끝에 찍는 마침표와 비슷합니다.

조금 더 실제 버튼처럼 만들면 다음과 같습니다.

.button {
  background-color: #2563eb;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
}

이 코드는 이렇게 읽으면 됩니다.

• .button이 붙은 요소를 고른다.

• 배경색은 파란색으로 한다.

• 글자는 흰색으로 한다.

• 안쪽 여백을 넣어 버튼답게 만든다.

• 모서리를 둥글게 만든다.

CSS를 외우려고 하기보다 "무엇을 골랐고, 무엇을 바꿨는가?"로 읽으면 훨씬 편합니다.

초보자가 자주 만나는 문법 실수

CSS가 적용되지 않을 때는 대부분 큰 문제가 아닙니다. 작은 기호 하나가 빠졌을 가능성이 큽니다. 아래 네 가지를 먼저 확인하세요.

1. 세미콜론을 빠뜨린 경우

.card {
  background-color: white
  padding: 20px;
}

background-color: white 뒤에 ;이 없습니다. CSS는 마지막 줄의 세미콜론이 없어도 넘어가는 경우가 있지만, 중간 줄에서 빠지면 다음 줄까지 한 덩어리처럼 해석되어 스타일이 적용되지 않을 수 있습니다.

수정하면 이렇게 됩니다.

.card {
  background-color: white;
  padding: 20px;
}

2. 중괄호를 닫지 않은 경우

.banner {
  background-color: yellow;
  padding: 24px;

.button {
  color: blue;
}

.banner의 닫는 중괄호 }가 빠졌습니다. 그러면 아래 .button 코드까지 엉뚱하게 이어져 보일 수 있습니다.

확인할 때는 {와 }가 짝을 이루는지 보세요.

3. 콜론과 세미콜론을 헷갈린 경우

.title {
  color; red;
}

속성과 값 사이에는 콜론 :을 씁니다. 세미콜론 ;은 한 줄이 끝날 때 씁니다.

.title {
  color: red;
}

짧게 외우면 이렇습니다.

속성: 값;

4. 따옴표를 불필요하게 쓴 경우

.text {
  color: "red";
}

색상 이름에는 보통 따옴표를 쓰지 않습니다.

.text {
  color: red;
}

CSS에서 따옴표는 글꼴 이름처럼 공백이 있는 값을 감쌀 때 자주 씁니다. 예를 들어 font-family: "Noto Sans KR", sans-serif;처럼 사용할 수 있습니다. 하지만 색상, 여백, 크기에는 대체로 따옴표를 쓰지 않습니다.

CSS를 넣기 전 체크리스트

CSS를 붙여 넣기 전에 아래 질문을 확인하세요.

• 버튼 하나만 바꾸나요? → 인라인 스타일도 가능하지만 임시 수정에 가깝습니다.

• 한 페이지 안에서만 바꾸나요? → <style> 태그나 페이지별 Custom CSS를 찾습니다.

• 사이트 전체에서 반복되는 디자인인가요? → 외부 CSS 파일이나 전체 Custom CSS 영역을 사용합니다.

• CSS만 넣는 칸인가요, HTML 코드까지 넣는 칸인가요? → 필요하면 <style> 태그로 감쌉니다.

• 내가 고치는 곳이 전체 사이트에 영향을 주나요? → 저장 전 미리보기와 백업이 필요합니다.

• 선택자 이름이 실제 HTML과 맞나요? → .button, .card, .banner 같은 이름을 확인합니다.

• { }, :, ; 기호가 빠지지 않았나요? → 적용이 안 될 때 가장 먼저 봅니다.

작은 실습: 공지 박스 꾸미기

이번에는 공지 박스를 하나 꾸며 보겠습니다. 완성 결과는 "옅은 노란 배경, 적당한 안쪽 여백, 둥근 모서리"를 가진 안내 박스입니다.

수정 전 HTML은 다음과 같다고 생각해 보겠습니다.

<div class="notice">
  오늘 주문하면 내일 출고됩니다.
</div>

아무 CSS가 없으면 그냥 문장처럼 보입니다. 이제 CSS를 추가합니다.

.notice {
  background-color: #fff7cc;
  padding: 16px;
  border-radius: 8px;
}

이 코드를 읽어 보겠습니다.

• .notice는 notice라는 이름표가 붙은 박스를 고릅니다.

• background-color는 배경색을 바꿉니다.

• padding은 박스 안쪽 여백을 만듭니다.

• border-radius는 모서리를 둥글게 만듭니다.

수정 전후를 비교하면 이렇습니다.

여기서 한 가지만 바꿔 보세요.

padding: 24px;

padding 값을 16px에서 24px로 키우면 글자와 박스 가장자리 사이가 더 넓어집니다. 박스가 조금 더 여유 있어 보입니다. CSS는 이렇게 값 하나를 바꾸며 화면 변화를 확인하는 방식으로 익히는 것이 좋습니다.

이번 장의 핵심은 간단합니다. CSS는 쓰는 위치에 따라 영향 범위가 달라집니다. 그리고 CSS 한 문장은 "누구를 고르고, 무엇을 어떻게 바꿀지"를 적는 구조입니다. 이 두 가지만 잡으면 다음 장에서 선택자를 배울 준비가 됩니다.

참고

¹How to add CSS

²CSS - Advanced Administration Handbook

³JavaScript and stylesheet tags