Day 75 - CSS란 무엇인가요?
학습 목표
- CSS가 무엇인지 이해하기
- HTML과 CSS의 관계 알아보기
- CSS가 왜 필요한지 이해하기
- CSS의 기본 역할 파악하기
- CSS 없는 웹페이지와 있는 웹페이지 비교하기
CSS란?
CSS의 정의
CSS = Cascading Style Sheets
우리말로 하면 "연속적인 스타일 시트"입니다.
쉽게 말해, 웹페이지를 예쁘게 꾸미는 언어예요!
HTML과 CSS의 관계
비유: 집짓기
집을 짓는다고 생각해보세요:
HTML = 집의 구조 (벽, 지붕, 방)
CSS = 인테리어 (벽지, 페인트, 가구 배치)
HTML이 없으면? → 꾸밀 집이 없음!
CSS가 없으면? → 회색 콘크리트만 있는 집
둘 다 필요해요!
비유: 사람
사람으로 비유하면:
HTML = 몸 (뼈, 근육, 장기)
CSS = 옷, 화장, 헤어스타일
HTML이 내용을 담당하고
CSS가 겉모습을 담당해요!
비유: 문서 작성
워드 문서로 비유하면:
HTML = 글자 입력
CSS = 글꼴 바꾸기, 색상 바꾸기, 정렬하기
HTML로 "안녕하세요"를 쓰고
CSS로 빨간색, 굵게, 가운데 정렬!
CSS가 하는 일
CSS로 할 수 있는 것들
| 분류 | 할 수 있는 것 | 예시 |
|---|---|---|
| 색상 | 글자색, 배경색 | 빨간 글씨, 파란 배경 |
| 크기 | 글자 크기, 요소 크기 | 큰 제목, 작은 설명 |
| 위치 | 배치, 정렬, 여백 | 가운데 정렬, 왼쪽 여백 |
| 글꼴 | 폰트 종류, 굵기 | 고딕체, 굵은 글씨 |
| 테두리 | 선, 모서리 | 빨간 테두리, 둥근 모서리 |
| 효과 | 그림자, 투명도 | 박스 그림자, 반투명 |
CSS 없이 vs CSS 있을 때
예제: 같은 HTML, 다른 결과
<!-- HTML만 있는 경우 --> <h1>오늘의 뉴스</h1> <p>날씨가 좋습니다.</p>
CSS 없는 결과:
오늘의 뉴스
날씨가 좋습니다.
기본 스타일만 적용된 상태
<!-- CSS를 추가한 경우 --> <h1 style="color: blue; text-align: center;">오늘의 뉴스</h1> <p style="color: green; font-size: 1.2em;">날씨가 좋습니다.</p>
CSS 있는 결과:
오늘의 뉴스
날씨가 좋습니다.
CSS로 스타일을 적용한 상태
왜 CSS가 필요할까요?
CSS의 장점
- 디자인 분리: 내용(HTML)과 디자인(CSS)을 분리
- 유지보수 쉬움: CSS만 바꾸면 전체 디자인 변경 가능
- 일관성: 모든 페이지에 같은 스타일 적용
- 재사용: 한 번 만든 스타일을 여러 곳에서 사용
- 반응형: 화면 크기에 따라 다르게 보이게 할 수 있음
CSS 적용 방법 3가지
CSS를 HTML에 적용하는 방법
| 방법 | 설명 | Day |
|---|---|---|
| 인라인 스타일 | 태그에 직접 style 속성 사용 | Day 76 |
| 내부 스타일시트 | <style> 태그 안에 CSS 작성 | Day 77 |
| 외부 스타일시트 | 별도 .css 파일로 분리 | Day 78 |
이번 주에 차례대로 배워볼 거예요!
CSS 기본 문법 미리보기
선택자 {
속성: 값;
속성: 값;
}
예시:
h1 {
color: blue;
font-size: 2em;
}
문법 설명
- 선택자: 스타일을 적용할 대상 (h1, p, div 등)
- 속성: 바꾸고 싶은 것 (color, font-size 등)
- 값: 어떻게 바꿀지 (blue, 2em 등)
자세한 내용은 앞으로 차근차근 배워요!
실습: CSS 맛보기
직접 해보세요
아래 코드를 HTML 파일로 저장하고 브라우저에서 열어보세요:
<!DOCTYPE html>
<html>
<head>
<title>CSS 맛보기</title>
<style>
h1 {
color: purple;
text-align: center;
}
p {
color: green;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>안녕하세요!</h1>
<p>CSS를 배우고 있어요.</p>
</body>
</html>
실행 결과:
안녕하세요!
CSS를 배우고 있어요.
주의사항
CSS 학습 전 알아둘 것
- HTML을 먼저 알아야: CSS는 HTML 위에서 동작해요
- 오타 주의: 세미콜론(;)을 빠뜨리면 안 돼요
- 대소문자: CSS는 대부분 소문자 사용
- 단위 필수: 숫자에는 보통 단위(em, px 등)가 필요
퀴즈
오늘 배운 내용 확인
- CSS의 약자는?
정답 보기
Cascading Style Sheets
- CSS의 역할은?
정답 보기
웹페이지를 예쁘게 꾸미는 것 (색상, 크기, 위치, 글꼴 등)
- HTML이 집의 구조라면 CSS는?
정답 보기
인테리어 (벽지, 페인트, 가구 배치 등)
- CSS를 적용하는 3가지 방법은?
정답 보기
인라인 스타일, 내부 스타일시트, 외부 스타일시트
- CSS가 필요한 이유 2가지는?
정답 보기
1) 내용과 디자인 분리
2) 유지보수 쉬움
3) 일관성 유지
4) 스타일 재사용
(위 중 2가지)
요약
오늘 배운 내용
- CSS란: Cascading Style Sheets, 웹페이지 디자인 언어
- 역할: 색상, 크기, 위치, 글꼴, 테두리 등 스타일 지정
- 관계: HTML은 구조, CSS는 디자인
- 적용 방법: 인라인, 내부 스타일시트, 외부 스타일시트
- 기본 문법: 선택자 { 속성: 값; }
Day 75 - CSS란 무엇인가요? | EPUB 제작 365일 마스터 과정
'AI로 배우는 epub 시리즈' 카테고리의 다른 글
| Day 77 - 내부 스타일시트 (0) | 2026.02.21 |
|---|---|
| Day 76 - 인라인 스타일 (1) | 2026.02.20 |
| Day 74 - 주간 복습 + 퀴즈 (0) | 2026.02.18 |
| Day 73 - 실습 - 특수문자가 있는 문서 (0) | 2026.02.17 |
| Day 72 - 한글 특수문자 (0) | 2026.02.16 |