Day 76 - 인라인 스타일

Day 76 - 인라인 스타일

학습 목표

• 인라인 스타일의 개념 이해하기
• style 속성 사용법 익히기
• 다양한 CSS 속성 체험하기
• 인라인 스타일의 장단점 파악하기
• 실제 예제로 직접 적용해보기

인라인 스타일이란?

정의

인라인 스타일 = HTML 태그 안에 style 속성으로 직접 CSS를 작성하는 방식

가장 간단하고 직접적인 CSS 적용 방법입니다!

비유: 포스트잇

인라인 스타일은 포스트잇 같아요! 책에 포스트잇 붙이기 = 그 페이지에만 적용 노트에 따로 정리하기 = 내부/외부 스타일시트 포스트잇은: ✓ 빠르고 간편함 ✗ 양이 많아지면 지저분 ✗ 다른 곳에 재사용 어려움

기본 문법

<태그 style="속성: 값;">내용</태그>

여러 속성:
<태그 style="속성1: 값1; 속성2: 값2;">내용</태그>

문법 핵심

• style="" : 속성 이름
• 속성: 값 : 콜론(:)으로 연결
• 세미콜론(;) : 각 속성 끝에 붙이기
• 큰따옴표("") : 전체를 감싸기

자주 쓰는 CSS 속성

1. 색상 관련

<!-- 글자색 -->
<p style="color: red;">빨간 글씨</p>
<p style="color: blue;">파란 글씨</p>
<p style="color: #00ff00;">초록 글씨 (16진수)</p>

<!-- 배경색 -->
<p style="background-color: yellow;">노란 배경</p>
<p style="background-color: #f0f0f0;">회색 배경</p>

실행 결과:

빨간 글씨

파란 글씨

초록 글씨 (16진수)

노란 배경

회색 배경

2. 크기 관련

<!-- 글자 크기 -->
<p style="font-size: 0.8em;">작은 글씨</p>
<p style="font-size: 1.5em;">큰 글씨</p>
<p style="font-size: 2em;">더 큰 글씨</p>

실행 결과:

작은 글씨

큰 글씨

더 큰 글씨

3. 글꼴 관련

<!-- 굵게 -->
<p style="font-weight: bold;">굵은 글씨</p>

<!-- 기울임 -->
<p style="font-style: italic;">기울임 글씨</p>

<!-- 밑줄 -->
<p style="text-decoration: underline;">밑줄 글씨</p>

<!-- 취소선 -->
<p style="text-decoration: line-through;">취소선 글씨</p>

실행 결과:

굵은 글씨

기울임 글씨

밑줄 글씨

취소선 글씨

4. 정렬 관련

<p style="text-align: left;">왼쪽 정렬</p>
<p style="text-align: center;">가운데 정렬</p>
<p style="text-align: right;">오른쪽 정렬</p>

실행 결과:

왼쪽 정렬

가운데 정렬

오른쪽 정렬

5. 여백 관련

<!-- 안쪽 여백 (padding) -->
<p style="padding: 1em; background: yellow;">안쪽 여백</p>

<!-- 바깥 여백 (margin) -->
<p style="margin: 2em; background: lightblue;">바깥 여백</p>

실행 결과:

안쪽 여백 (노란 부분이 늘어남)

바깥 여백 (주변 공간이 생김)

6. 테두리 관련

<p style="border: 0.125em solid black;">검은 테두리</p>
<p style="border: 0.125em dashed red;">빨간 점선 테두리</p>
<p style="border: 0.25em dotted blue;">파란 점 테두리</p>

실행 결과:

검은 테두리

빨간 점선 테두리

파란 점 테두리

여러 속성 조합하기

<!-- 예쁜 버튼 스타일 -->
<span style="
    background-color: #3498db;
    color: white;
    padding: 0.5em 1em;
    border-radius: 0.3em;
    font-weight: bold;
">버튼</span>

<!-- 강조 박스 -->
<p style="
    background-color: #fff3cd;
    border-left: 0.25em solid #ffc107;
    padding: 1em;
    color: #856404;
">중요한 내용입니다!</p>

실행 결과:

버튼

중요한 내용입니다!

인라인 스타일의 장단점

장점과 단점

장점	단점
빠르고 간단함	HTML 코드가 길어짐
특정 요소만 스타일 적용	같은 스타일 반복 작성
우선순위가 높음	유지보수 어려움
테스트/디버깅에 유용	재사용 불가

비유: 요리 레시피

요리로 비유하면: 인라인 스타일 = 매번 양념을 새로 만듦 - 된장찌개 만들 때마다 된장 비율 새로 계량 - 귀찮고 일관성 없음 내부/외부 스타일 = 양념장 미리 만들어 둠 - 한 번 만들어두면 계속 사용 - 편하고 맛이 일정함

언제 인라인 스타일을 쓸까?

인라인 스타일 사용 상황

• 빠른 테스트: 스타일 잠깐 확인할 때
• 일회성 스타일: 딱 한 곳에만 적용할 때
• 이메일 HTML: 외부 CSS 지원이 제한될 때
• 동적 스타일: JavaScript로 스타일 변경할 때

피해야 할 상황

• 반복되는 스타일: 같은 스타일 여러 번 쓸 때
• 복잡한 디자인: 많은 스타일이 필요할 때
• 실제 웹사이트: 유지보수를 생각해야 할 때

실습 과제

도전! 명함 만들기

인라인 스타일로 간단한 명함을 만들어보세요:

<div style="
    border: 0.125em solid #333;
    padding: 1.5em;
    max-width: 20em;
    font-family: 'KoPub Dotum', sans-serif;
">
    <h3 style="
        color: #2c3e50;
        margin: 0 0 0.5em 0;
        border-bottom: 0.0625em solid #3498db;
        padding-bottom: 0.5em;
    ">홍길동</h3>
    <p style="color: #7f8c8d; margin: 0.3em 0;">웹 개발자</p>
    <p style="color: #333; margin: 0.3em 0;">010-1234-5678</p>
    <p style="color: #3498db; margin: 0.3em 0;">hong@email.com</p>
</div>

실행 결과:

홍길동

웹 개발자

010-1234-5678

hong@email.com

퀴즈

오늘 배운 내용 확인

1. 인라인 스타일을 적용하는 속성 이름은?
   
   정답 보기

   style

2. 글자색을 바꾸는 CSS 속성은?
   
   정답 보기

   color

3. 배경색을 바꾸는 CSS 속성은?
   
   정답 보기

   background-color

4. CSS 속성과 값 사이에 넣는 기호는?
   
   정답 보기

   콜론 (:)

5. 인라인 스타일의 단점 2가지는?
   
   정답 보기

   1) HTML 코드가 길어짐
   2) 같은 스타일 반복 작성
   3) 유지보수 어려움
   4) 재사용 불가
   (위 중 2가지)

요약

오늘 배운 내용

• 인라인 스타일: style="속성: 값;" 형태로 태그에 직접 작성
• 색상: color (글자색), background-color (배경색)
• 크기: font-size (글자 크기)
• 글꼴: font-weight, font-style, text-decoration
• 정렬: text-align (left, center, right)
• 여백: padding (안쪽), margin (바깥)
• 테두리: border (두께 스타일 색상)

다음 시간

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

<style> 태그로 한 곳에서 여러 요소의 스타일을 관리해요!

---

Day 76 - 인라인 스타일 | EPUB 제작 365일 마스터 과정