포스트

CSS 입문 가이드 - 스타일시트의 기초

CSS의 개념과 HTML에 CSS를 적용하는 3가지 방법, 선택자의 종류와 기본 작성법을 학습합니다. 인라인, 내부, 외부 스타일시트의 장단점을 비교하고 실전 프로젝트에 적용하는 방법을 배웁니다. 클래스와 ID 선택자의 우선순위를 이해하고 효율적인 CSS 코드를 작성합니다.

게시일
작성자 ChangSu Park
읽는 시간 8분
CSS 입문 가이드 - 스타일시트의 기초

1. CSS란?

CSS(Cascading Style Sheets)는 HTML에 디자인을 입히는 스타일시트 언어입니다.

  • HTML: 구조와 내용
  • CSS: 디자인과 레이아웃
1
2
3

<!-- HTML: 구조 -->
<h1>제목</h1>
<p>내용</p>

1
2
3
4
5
6
7
8
9
10

/* CSS: 디자인 */
h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
  line-height: 1.6;
}

2. CSS 적용 방법

2.1 인라인 스타일 (Inline Style)

1

<h1 style="color: red; font-size: 24px;">제목</h1>

장점:

  • ✅ 빠르고 간단

단점:

  • ❌ 가독성 저하
  • ❌ 재사용 불가
  • ❌ 유지보수 어려움

Warning: 실무에서는 거의 사용하지 않습니다.

2.2 내부 스타일시트 (Internal CSS)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 {
      color: #123456;
      font-size: 20px;
    }

    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h2>제목</h2>
  <p>내용</p>
</body>
</html>

장점:

  • ✅ HTML과 같은 파일에서 관리
  • ✅ 단일 페이지에 적합

단점:

  • ❌ 여러 페이지에서 재사용 불가
  • ❌ HTML과 CSS가 혼재

2.3 외부 스타일시트 (External CSS) ⭐️

index.html:

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>제목</h1>
  <p>내용</p>
</body>
</html>

style.css:

1
2
3
4
5
6
7
8
9

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

p {
  color: #333;
  line-height: 1.6;
}

장점:

  • ✅ HTML과 CSS 분리 (관심사의 분리)
  • ✅ 여러 페이지에서 재사용
  • ✅ 유지보수 용이
  • ✅ 캐싱으로 성능 향상

Tip: 실무에서는 외부 스타일시트를 사용합니다.

1

<link href="style.css" rel="stylesheet" type="text/css">
속성설명값
hrefCSS 파일 경로"style.css"
rel관계 명시"stylesheet" (고정)
type파일 타입"text/css" (생략 가능)

3. CSS 기본 문법

3.1 구조

1
2
3
4

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

1
2
3
4

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

구성 요소:

  • 선택자(Selector): p - 스타일을 적용할 대상
  • 속성(Property): color, font-size - 변경할 스타일 종류
  • 값(Value): red, 16px - 속성의 값
  • 선언(Declaration): color: red; - 속성과 값의 쌍

3.2 주석

1
2
3
4
5
6
7
8
9
10

/* 한 줄 주석 */

/*
여러 줄
주석
*/

p {
  color: red;
}

4. CSS 선택자

4.1 태그 선택자

1
2
3
4
5
6
7
8
9
10

/* 모든 p 태그에 적용 */
p {
  font-size: 12px;
  color: #333;
}

h1 {
  font-size: 32px;
  font-weight: bold;
}

1
2

<p>이 단락은 12px입니다.</p>
<p>이 단락도 12px입니다.</p>

4.2 클래스 선택자

1
2
3
4
5
6
7
8
9

/* .클래스명 */
.highlight {
  background-color: yellow;
}

.profile-detail {
  font-weight: bold;
  color: #007bff;
}

1
2

<p class="highlight">강조된 텍스트</p>
<span class="profile-detail">프로필 상세</span>

4.3 아이디 선택자

1
2
3
4
5
6
7
8
9
10
11

/* #아이디명 */
#header {
  background-color: #333;
  color: white;
  padding: 20px;
}

#profile {
  border: 1px solid black;
  text-align: center;
}

1
2

<header id="header">헤더</header>
<div id="profile">프로필</div>

4.4 선택자 비교

선택자문법사용예시
태그태그명모든 해당 태그p { }
클래스.클래스명여러 요소.btn { }
아이디#아이디명고유 요소#main { }

5. 실전 예제

5.1 완전한 웹페이지

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 웹사이트</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="main-header">
    <h1>웹사이트 제목</h1>
  </header>

  <main class="content">
    <h2 class="section-title">섹션 제목</h2>
    <p>본문 내용입니다.</p>
    <p class="highlight">강조된 내용입니다.</p>
  </main>

  <footer id="main-footer">
    <p>&copy; 2024</p>
  </footer>
</body>
</html>

style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

/* 전체 스타일 */
body {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* 헤더 */
#main-header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

#main-header h1 {
  margin: 0;
}

/* 메인 콘텐츠 */
.content {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-title {
  color: #007bff;
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

/* 강조 텍스트 */
.highlight {
  background-color: #fff3cd;
  padding: 10px;
  border-left: 4px solid #ffc107;
}

/* 푸터 */
#main-footer {
  background-color: #f8f9fa;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

6. Best Practices

✅ 좋은 예

1
2
3
4
5
6
7
8
9
10
11
12

/* 외부 CSS 파일 사용 */
/* 의미 있는 클래스명 */
.button-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
}

❌ 나쁜 예

1
2
3
4
5
6

<!-- 인라인 스타일 남용 -->
<p style="color: red; font-size: 16px; margin: 10px; padding: 5px;">...</p>

<!-- 의미 없는 클래스명 -->
<div class="a1">...</div>
<div class="box2">...</div>

7. 적용 방법 비교

방법장점단점사용 시기
인라인빠름유지보수 어려움❌ 사용 지양
내부한 파일에서 관리재사용 불가단일 페이지
외부재사용, 유지보수 용이파일 관리 필요✅ 권장

정리

CSS 적용 (권장)

1
2

<!-- HTML -->
<link rel="stylesheet" href="style.css">

1
2
3
4

/* style.css */
선택자 {
  속성: 값;
}

선택자 종류

1
2
3
4
5
6
7
8

/* 태그 */
p { }

/* 클래스 */
.class-name { }

/* 아이디 */
#id-name { }

핵심 원칙:

  1. 외부 CSS 사용
  2. 의미 있는 이름 사용
  3. HTML과 CSS 분리

다음 단계

CSS의 기본을 익혔다면 다음 단계로 나아가세요:

  1. CSS Position 완벽 가이드 - 요소 배치의 모든 것
  2. CSS Float - 레이아웃 기초
  3. CSS Media Query - 반응형 웹 디자인
  4. JavaScript 입문 가이드 - CSS로 만든 웹에 동적 기능 추가

관련 포스트

참고 자료

Web, CSS
css selector
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.