본문 바로가기
AI로 배우는 epub 시리즈

Day 77 - 내부 스타일시트

by 전자책제작자 2026. 2. 21.
Day 77 - 내부 스타일시트

Day 77 - 내부 스타일시트

학습 목표

  • 내부 스타일시트의 개념 이해하기
  • <style> 태그 사용법 익히기
  • CSS 선택자 기초 이해하기
  • 내부 스타일시트의 장단점 파악하기
  • 인라인 스타일과 비교하기

내부 스타일시트란?

정의

내부 스타일시트 = HTML 문서의 <head> 안에 <style> 태그로 CSS를 작성하는 방식

한 곳에서 여러 요소의 스타일을 관리할 수 있어요!

비유: 드레스 코드

파티를 여는데 손님마다 옷을 정해준다면? 인라인 스타일 = 손님 한 명씩 개별 연락 "철수님은 빨간 넥타이요, 영희님은 파란 드레스요..." → 너무 힘들어요! 내부 스타일시트 = 초대장에 드레스 코드 공지 "남성분은 넥타이, 여성분은 드레스 착용" → 한 번에 전달!

기본 문법

<!DOCTYPE html>
<html>
<head>
    <title>제목</title>
    <style>
        선택자 {
            속성: 값;
            속성: 값;
        }
    </style>
</head>
<body>
    내용
</body>
</html>

핵심 포인트

  • <style> 태그는 <head> 안에 위치
  • 선택자로 스타일 적용 대상 지정
  • 중괄호 { } 안에 CSS 속성 작성
  • 세미콜론(;)으로 각 속성 구분

CSS 선택자 기초

1. 태그 선택자

<style>
    /* 모든 h1 태그에 적용 */
    h1 {
        color: blue;
    }

    /* 모든 p 태그에 적용 */
    p {
        font-size: 1.2em;
    }
</style>

태그 선택자 설명

  • h1 → 모든 <h1> 태그 선택
  • p → 모든 <p> 태그 선택
  • div → 모든 <div> 태그 선택

2. 클래스 선택자

<style>
    /* .클래스명 으로 선택 */
    .highlight {
        background-color: yellow;
    }

    .important {
        color: red;
        font-weight: bold;
    }
</style>

<p class="highlight">노란 배경</p>
<p class="important">빨간 굵은 글씨</p>
<p class="highlight important">둘 다 적용</p>

실행 결과:

노란 배경

빨간 굵은 글씨

둘 다 적용

클래스 선택자 규칙

  • CSS에서: 점(.)으로 시작
  • HTML에서: class="클래스명" 사용
  • 여러 클래스: 공백으로 구분 (class="a b c")
  • 여러 요소에 같은 클래스 사용 가능

3. ID 선택자

<style>
    /* #아이디명 으로 선택 */
    #header {
        background-color: navy;
        color: white;
    }

    #footer {
        background-color: gray;
    }
</style>

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

실행 결과:

헤더 영역
푸터 영역

ID vs 클래스

구분 ID (#) Class (.)
CSS #아이디명 .클래스명
HTML id="아이디명" class="클래스명"
사용 횟수 페이지에서 1번만 여러 번 가능
용도 유일한 요소 반복되는 스타일

완전한 예제

<!DOCTYPE html>
<html>
<head>
    <title>내 블로그</title>
    <style>
        body {
            font-family: 'KoPub Dotum', sans-serif;
            background-color: #f5f5f5;
        }

        h1 {
            color: #2c3e50;
            text-align: center;
        }

        .post {
            background-color: white;
            padding: 1em;
            margin: 1em;
            border-radius: 0.5em;
        }

        .post-title {
            color: #3498db;
            border-bottom: 0.0625em solid #ddd;
        }

        .post-content {
            color: #333;
            line-height: 1.8;
        }

        #footer {
            text-align: center;
            color: #999;
            margin-top: 2em;
        }
    </style>
</head>
<body>
    <h1>내 블로그</h1>

    <div class="post">
        <h2 class="post-title">첫 번째 글</h2>
        <p class="post-content">오늘은 CSS를 배웠습니다.</p>
    </div>

    <div class="post">
        <h2 class="post-title">두 번째 글</h2>
        <p class="post-content">내부 스타일시트를 사용했어요.</p>
    </div>

    <p id="footer">&copy; 2026 내 블로그</p>
</body>
</html>

실행 결과:

내 블로그

첫 번째 글

오늘은 CSS를 배웠습니다.

두 번째 글

내부 스타일시트를 사용했어요.

© 2026 내 블로그

인라인 vs 내부 스타일시트

비유: 집안일

집안일을 할 때: 인라인 스타일 = 방마다 청소 규칙 다름 - 거실은 빗자루 - 침실은 청소기 - 화장실은 걸레 → 방마다 다르게 기억해야 함 내부 스타일시트 = 청소 규칙 통일 - 모든 방: 청소기 → 걸레 → 규칙 하나만 기억!

비교표

항목 인라인 스타일 내부 스타일시트
위치 태그 안 style 속성 <head> 안 <style> 태그
적용 범위 해당 태그만 선택자에 맞는 모든 요소
재사용 불가능 (매번 작성) 가능 (선택자로 지정)
유지보수 어려움 쉬움
코드 정리 HTML과 CSS 혼합 CSS가 한 곳에 모임

내부 스타일시트의 장단점

장점

  • 관리 편리: CSS가 한 곳에 모여 있음
  • 재사용: 같은 스타일을 여러 요소에 적용
  • 선택자 사용: 다양한 방식으로 요소 선택 가능
  • 인라인보다 깔끔: HTML이 깔끔해짐

단점

  • 해당 페이지만: 다른 HTML 파일에서 재사용 불가
  • 페이지마다 작성: 같은 CSS를 반복 작성해야 함
  • 파일 크기: HTML 파일이 커질 수 있음

실습 과제

도전! 프로필 카드 만들기

내부 스타일시트로 프로필 카드를 만들어보세요:

<!DOCTYPE html>
<html>
<head>
    <title>프로필</title>
    <style>
        body {
            background-color: #ecf0f1;
            font-family: sans-serif;
        }

        .profile-card {
            background-color: white;
            max-width: 18em;
            margin: 2em auto;
            padding: 1.5em;
            border-radius: 0.5em;
            text-align: center;
        }

        .profile-name {
            color: #2c3e50;
            margin-bottom: 0.5em;
        }

        .profile-job {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .profile-intro {
            border-top: 0.0625em solid #ddd;
            padding-top: 1em;
            margin-top: 1em;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="profile-card">
        <h2 class="profile-name">김개발</h2>
        <p class="profile-job">웹 개발자</p>
        <p class="profile-intro">
            안녕하세요! CSS를 공부하고 있어요.
        </p>
    </div>
</body>
</html>

실행 결과:

김개발

웹 개발자

안녕하세요! CSS를 공부하고 있어요.

퀴즈

오늘 배운 내용 확인

  1. 내부 스타일시트를 작성하는 태그는?
    정답 보기

    <style>

  2. <style> 태그는 어디에 위치해야 하나요?
    정답 보기

    <head> 안에

  3. 클래스 선택자는 어떤 기호로 시작하나요?
    정답 보기

    점 (.)

  4. ID 선택자는 어떤 기호로 시작하나요?
    정답 보기

    샵 (#)

  5. 내부 스타일시트의 장점 2가지는?
    정답 보기

    1) CSS가 한 곳에 모여 관리 편리
    2) 같은 스타일 재사용 가능
    3) HTML 코드가 깔끔해짐
    (위 중 2가지)

요약

오늘 배운 내용

  • 내부 스타일시트: <style> 태그 안에 CSS 작성
  • 위치: <head> 안에 배치
  • 태그 선택자: 태그명 그대로 (h1, p, div)
  • 클래스 선택자: .클래스명 (여러 요소에 사용 가능)
  • ID 선택자: #아이디명 (페이지에서 1번만)
  • 장점: 재사용 가능, 관리 편리

다음 시간

Day 78에서는 외부 스타일시트를 배웁니다!

CSS를 별도 파일로 분리해서 여러 페이지에서 공유해요!

Day 77 - 내부 스타일시트 | EPUB 제작 365일 마스터 과정

저작자표시 비영리 변경금지 (새창열림)

'AI로 배우는 epub 시리즈' 카테고리의 다른 글

Day 79 - 3가지 방법 비교  (0) 2026.02.23
Day 78 - 외부 스타일시트  (0) 2026.02.22
Day 76 - 인라인 스타일  (1) 2026.02.20
Day 75 - CSS란 무엇인가요?  (0) 2026.02.19
Day 74 - 주간 복습 + 퀴즈  (0) 2026.02.18

관련글

티스토리툴바