Table of Contents

1주차｜CSS 기본 개념 완전 정복: HTML에 옷을 입히는 법

웹사이트를 처음 만들 때 가장 먼저 배우는 언어가 바로 CSS 기본 개념입니다.
CSS는 “코딩”이라기보다, 웹사이트에 옷을 입히는 시각 언어에 가깝습니다.
HTML이 사이트의 뼈대를 만든다면, CSS는 그 위에 색상·글자·여백·배경·움직임을 더합니다.
이번 강의에서는 완전 초보자도 단번에 이해할 수 있도록,
CSS 기본 개념부터 선택자, 색상, 글자 스타일까지 단계별로 쉽게 배워봅시다.

CSS란 무엇인가?

CSS(Cascading Style Sheets) 는 웹사이트의 모양과 느낌을 결정하는 언어입니다.
HTML로 제목과 문단, 이미지 구조를 만든 다음 CSS로 꾸미면
사이트는 단순한 문서가 아니라 ‘디자인된 웹페이지’가 됩니다.

예를 들어 HTML이 이런 코드라면:

<h1>안녕하세요</h1>
<p>이건 단락입니다.</p>

CSS를 이렇게 입히면 사이트 분위기가 달라집니다.

h1 {
  color: blue; /* 글자색을 파란색으로 */
  font-size: 32px; /* 글자 크기를 32픽셀로 */
}
p {
  color: gray; /* 단락 글자색을 회색으로 */
}

이처럼 CSS 기본 개념은 “누구에게(선택자)” “어떤 스타일을(속성)” “어떻게(값)” 적용하느냐를 정하는 것입니다.
그 세 가지 요소만 이해해도 기본적인 모든 디자인을 구현할 수 있습니다.

선택자 이해하기

CSS의 가장 핵심은 선택자(selector) 입니다.
선택자는 “어떤 요소를 꾸밀지”를 지정하는 부분이에요.

가장 기본적인 예시부터 보겠습니다.

h1 {
  color: red; /* 모든 h1 제목에 빨간색 적용 */
}

이건 태그 선택자입니다.
모든 <h1> 요소에 같은 스타일을 입히죠.

다음은 클래스 선택자입니다.

.highlight {
  background-color: yellow; /* highlight 클래스를 가진 요소만 노란 배경 */
}

HTML에서는 이렇게 쓰죠:

<p class="highlight">중요한 부분</p>

마지막으로 아이디 선택자입니다.
한 페이지에서 단 하나만 존재해야 할 고유 영역에 사용합니다.

#header {
  background-color: black; /* 헤더 영역 검정 배경 */
  color: white; /* 헤더 글자 흰색 */
}

이 세 가지 선택자(태그, .클래스, #아이디)만 알아도 CSS 기본 개념의 절반 이상은 이해한 셈입니다.

CSS 기본 개념: 속성과 값의 관계

선택자를 지정했다면, 중괄호 { } 안에 “속성: 값;” 형태로 스타일을 넣습니다.

p {
  font-size: 18px; /* 글자 크기 */
  line-height: 1.6; /* 줄 간격 */
  color: #333; /* 글자색 */
}

이 한 덩어리를 규칙(rule) 이라고 부릅니다.
CSS 기본 개념에서는 이렇게 “규칙들의 집합”이 모여 전체 디자인을 구성합니다.

색상과 배경 꾸미기

웹사이트의 인상을 바꾸는 첫 번째 요소는 색상(color) 과 배경(background) 입니다.
이 부분은 초보자들이 CSS 기본 개념을 익힐 때 가장 흥미로워하는 부분이기도 하죠.

색상 지정 방법

CSS에서는 세 가지 주요 방식으로 색을 표현합니다.

이름(name) — color: red;
HEX 코드 — color: #ff0000;
RGB/RGBA — color: rgba(255,0,0,0.8); (투명도 0~1)

HEX 코드는 가장 많이 쓰이는 방식으로, 디자이너들이 즐겨 사용합니다.
예를 들어 #0066ff는 파란색, #00ccff는 하늘색입니다.

배경 꾸미기

배경은 단색뿐 아니라 그라데이션, 이미지, 패턴 등 다양하게 설정할 수 있습니다.

body {
  background: linear-gradient(45deg, #0066ff, #00ccff);
  /* 45도 각도로 파란색에서 하늘색으로 점차 바뀌는 배경 */
}

이 한 줄만으로 사이트의 분위기가 완전히 달라집니다.
이런 감각이 바로 CSS 기본 개념을 실무에 적용하는 힘이에요.

글자 스타일링 (Typography)

사이트의 인상을 결정하는 또 하나의 핵심은 글자입니다.
CSS 기본 개념에서는 폰트, 줄 간격, 자간 등을 다룹니다.

body {
  font-family: 'Noto Sans KR', sans-serif; /* 글꼴 지정 */
  font-size: 16px; /* 글자 크기 */
  line-height: 1.7; /* 줄 간격 */
  color: #111827; /* 글자색 */
}

font-family: 글꼴 (한글은 'Noto Sans KR' 추천)
sans-serif: 글끝이 깔끔한 글꼴, 모바일 가독성 높음
line-height: 줄 간격, 너무 좁으면 답답하고 넓으면 시선이 분산됨
color: 글자색

SEO 측면에서도 글자 가독성은 매우 중요합니다.
읽기 쉬운 폰트와 여백은 페이지 체류 시간 증가 → 검색 순위 향상으로 이어집니다.

워드프레스에서 CSS 적용하기

CSS 기본 개념을 배웠다면, 이제 직접 사이트에 적용해봐야겠죠.
워드프레스에서는 아래 세 가지 방법으로 CSS를 쉽게 추가할 수 있습니다.

테마 사용자 정의 → 추가 CSS
가장 안전한 방법입니다. 전체 사이트에 공통 적용됩니다.
블록 편집기 내 “고급 설정 → 추가 CSS 클래스”
특정 문단이나 이미지에만 스타일 적용 가능.
전문가용: style.css 파일 수정
코드에 익숙한 사용자만 권장합니다.

예를 들어, 사이트 전체의 배경색을 살짝 변경하려면
추가 CSS에 다음 코드를 넣어보세요.

body {
  background-color: #f5f5f5; /* 밝은 회색 배경 */
}

이 한 줄로 전체 분위기가 훨씬 부드러워집니다.

CSS 기본 개념 실습: 나만의 스타일 만들기

직접 실습해볼까요?
아래처럼 HTML 구조를 만들어 놓고, CSS를 한 줄씩 적용해보세요.

<h1 class="title">나의 첫 번째 웹페이지</h1>
<p class="intro">CSS 기본 개념을 배우면 디자인이 즐거워집니다.</p>

.title {
  color: #0066ff; /* 제목 파란색 */
  font-size: 28px; /* 제목 크기 */
}
.intro {
  color: #444; /* 본문 색 */
  background-color: #eaf4ff; /* 부드러운 배경 */
  padding: 10px; /* 여백 */
}

이렇게 한 줄씩 바꾸면서 직접 눈으로 변화를 보는 것이
CSS 기본 개념을 몸으로 익히는 가장 좋은 방법입니다.