CSS 독학 가이드 1 - CSS 기초와 선택자

2025년 11월 25일 learning by Seven Fingers Studio 18분

CSS웹디자인프론트엔드선택자스타일링

CSS가 뭔가요?

HTML로 웹페이지를 만들었는데, 뭔가 밋밋하죠? 그냥 검은 글씨에 흰 배경… 1990년대 웹사이트 같은 느낌이 들 거예요.

CSS는 Cascading Style Sheets의 약자로, HTML로 만든 웹페이지에 색상, 레이아웃, 폰트, 여백 등을 입혀서 예쁘게 꾸며주는 언어입니다. 마치 집을 지은 후에 페인트칠하고 가구 배치하는 것과 비슷해요.

저는 처음 CSS를 배울 때 “이거 하나만 바꾸면 전체 디자인이 바뀐다니!” 하고 신기해했던 기억이 있어요. HTML과 CSS를 분리해서 관리하면 코드도 깔끔하고 유지보수도 쉬워집니다.

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

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

HTML 태그에 직접 style 속성을 넣는 방법이에요.

<p style="color: red; font-size: 20px;">빨간 글씨</p>

실행 결과:

빨간 글씨

장점: 빠르게 적용 가능 단점: 재사용 불가, 유지보수 어려움

급하게 테스트할 때나 쓰고, 실제 프로젝트에선 거의 안 씁니다.

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

HTML 파일의 <head> 안에 <style> 태그를 넣는 방법이에요.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>파란 글씨</p>
</body>
</html>

장점: 한 파일 안에서 관리 단점: 여러 HTML 파일에서 재사용 불가

3. 외부 스타일시트 (External Stylesheet) ⭐ 추천

별도의 .css 파일을 만들고 HTML에서 링크로 연결하는 방법입니다.

style.css 파일:

p {
  color: green;
  font-size: 16px;
}

HTML 파일:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>초록 글씨</p>
</body>
</html>

장점: 여러 HTML 파일에서 재사용 가능, 코드 관리 편함 단점: 없음 (사실상 표준 방법)

실무에서는 거의 100% 이 방법을 씁니다!

CSS 기본 문법

CSS는 이렇게 생겼어요:

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

예를 들면:

p {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

실행 결과:

이렇게 빨강색 굵은 글씨가 됩니다

선택자 (Selector): 어떤 요소를 꾸밀지 선택
속성 (Property): 무엇을 바꿀지 (색상, 크기 등)
값 (Value): 어떻게 바꿀지 (빨강, 20px 등)
세미콜론 (;): 각 속성 끝에 필수 (마지막 속성은 생략 가능하지만 습관적으로 붙이기)

선택자의 종류

1. 태그 선택자 (Type Selector)

HTML 태그 이름으로 선택합니다.

h1 {
  color: navy;
}

p {
  line-height: 1.6;
}

모든 <h1>, 모든 <p> 태그에 적용돼요.

2. 클래스 선택자 (Class Selector) ⭐ 가장 많이 씀

.클래스명으로 선택합니다.

<p class="intro">소개 문구</p>
<p class="intro">또 다른 소개</p>

.intro {
  background-color: yellow;
  padding: 10px;
}

실행 결과:

소개 문구

또 다른 소개

같은 클래스를 가진 모든 요소에 적용됩니다. 여러 요소에 재사용 가능!

3. ID 선택자 (ID Selector)

#아이디명으로 선택합니다.

<div id="header">헤더 영역</div>

#header {
  background-color: black;
  color: white;
}

실행 결과:

헤더 영역

주의: ID는 페이지에서 단 한 번만 사용해야 해요. 고유한 요소에만 쓰세요.

4. 전체 선택자 (Universal Selector)

*로 모든 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

주로 초기화(reset)할 때 사용합니다.

5. 그룹 선택자 (Group Selector)

여러 선택자를 쉼표로 묶어서 같은 스타일을 적용합니다.

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  color: #333;
}

실행 결과:

제목 1 (H1)

제목 2 (H2)

제목 3 (H3)

세 개의 제목이 같은 스타일을 적용받습니다

선택자 우선순위

같은 요소에 여러 스타일이 적용되면 어떤 게 적용될까요? CSS는 우선순위가 있어요.

우선순위 (높음 → 낮음):

!important (비추천, 비상용으로만)
인라인 스타일 (style 속성)
ID 선택자
클래스 선택자
태그 선택자
전체 선택자

p { color: blue; }           /* 태그 선택자 */
.text { color: green; }      /* 클래스 선택자 - 이게 적용됨 */
#special { color: red; }     /* ID 선택자 - 가장 강력 */

<p class="text" id="special">무슨 색일까요?</p>

실행 결과:

무슨 색일까요?

답: 빨강 - ID 선택자가 클래스와 태그 선택자보다 우선순위가 높습니다

답: 빨강 (ID 선택자가 가장 우선순위 높음)

주석 달기

CSS 주석은 /* */로 씁니다.

/* 이것은 주석입니다 */
p {
  color: blue; /* 파란색 글씨 */
}

HTML 주석()과 다르니 주의하세요!

자주 쓰는 CSS 속성

글자 스타일

p {
  color: #333;              /* 글자색 */
  font-size: 16px;          /* 글자 크기 */
  font-weight: bold;        /* 굵기 (normal, bold, 100~900) */
  font-family: Arial;       /* 폰트 종류 */
  text-align: center;       /* 정렬 (left, center, right) */
  line-height: 1.6;         /* 줄 간격 */
  text-decoration: none;    /* 밑줄 제거 (링크에 자주 씀) */
}

배경 스타일

div {
  background-color: #f0f0f0;  /* 배경색 */
  background-image: url('bg.jpg'); /* 배경 이미지 */
}

크기와 여백

div {
  width: 300px;      /* 가로 크기 */
  height: 200px;     /* 세로 크기 */
  padding: 20px;     /* 안쪽 여백 */
  margin: 10px;      /* 바깥 여백 */
  border: 1px solid black; /* 테두리 */
}

실전 예제: 버튼 만들기

이제 배운 내용으로 버튼을 예쁘게 꾸며볼게요.

<button class="btn">클릭하세요</button>

.btn {
  /* 글자 스타일 */
  color: white;
  font-size: 16px;
  font-weight: bold;

  /* 배경과 크기 */
  background-color: #007bff;
  padding: 12px 24px;

  /* 테두리와 기타 */
  border: none;
  border-radius: 5px;  /* 둥근 모서리 */
  cursor: pointer;     /* 마우스 올리면 손가락 모양 */
}

.btn:hover {
  background-color: #0056b3;  /* 마우스 올리면 색 변경 */
}

실행 결과:

마우스를 올리면 색상이 진하게 변합니다

:hover는 마우스를 올렸을 때 스타일이 바뀌는 가상 클래스예요. 나중에 더 자세히 배울 거예요.

개발자 도구로 CSS 확인하기

CSS를 배울 때 가장 좋은 방법은 실제 웹사이트를 뜯어보는 거예요.

크롬에서 F12 키 누르기 (또는 우클릭 → 검사)
Elements 탭에서 HTML 요소 선택
오른쪽 Styles 패널에서 CSS 확인
실시간으로 값 수정해보기

네이버, 유튜브 같은 사이트 가서 “이 버튼은 어떻게 만들었지?” 하고 직접 확인해보세요. 엄청 도움 됩니다!

다음 단계

CSS 기초와 선택자를 배웠으니, 이제 박스 모델과 레이아웃을 배울 차례예요. 여백이랑 정렬을 제대로 다루려면 박스 모델 개념이 필수거든요.

다음 글에서는 margin, padding, border의 차이와 레이아웃 잡는 법을 다룰 거예요. CSS의 꽃이라고 할 수 있죠!

실습 팁:

VS Code로 HTML, CSS 파일 만들어보기
Live Server 확장 프로그램 설치하면 실시간으로 결과 확인 가능
매일 30분씩 코드 쳐보기 (보기만 하면 절대 안 늘어요!)

CSS는 많이 쳐볼수록 감이 와요. 처음엔 색깔이나 크기 바꾸는 것만 해도 재밌을 거예요!

시리즈 네비게이션

현재글: CSS 독학 가이드 - CSS 기초와 선택자
다음글: CSS 독학 가이드 - 박스 모델과 레이아웃

← 블로그 목록으로