HTML 입문 문법

HTML 내부 스타일 시트

HTML 내부 스타일 시트 — 초급

내부 스타일 시트

1. 도입 (왜 배워야 하는가)

웹 페이지를 만들 때, 사용자에게 매력적이고 일관된 디자인을 제공하는 것은 매우 중요합니다. 이를 위해 CSS(Cascading Style Sheets)라는 스타일 시트를 사용합니다. 그 중에서도 '내부 스타일 시트'는 한 문서 안에서 CSS를 직접 작성할 수 있는 방법으로, 페이지의 디자인을 쉽고 빠르게 조정할 수 있게 도와줍니다.

내부 스타일 시트를 사용하지 않으면 몇 가지 문제가 발생할 수 있습니다. 예를 들어, HTML 파일과 CSS 파일이 분리되어 있다면, 스타일을 수정할 때마다 여러 파일을 열어야 하므로 비효율적입니다. 또한, 작은 프로젝트에서는 외부 CSS 파일을 만드는 것이 불필요하게 복잡해질 수 있습니다. 이런 경우, 내부 스타일 시트를 활용하면 효율적으로 작업할 수 있습니다.

2. 핵심 개념 설명

내부 스타일 시트: HTML 문서의 <head> 섹션에 CSS를 직접 작성하는 방법입니다. 이를 통해 특정 HTML 문서에만 적용되는 스타일을 정의할 수 있습니다.

비유하자면, 내부 스타일 시트는 여러분이 집 안에서만 사용하는 맞춤형 가구를 만드는 것과 같습니다. 외부 스타일 시트가 집 전체에 적용되는 가구라면, 내부 스타일 시트는 특정 방에 맞는 가구를 만드는 것이죠.

용어	설명
CSS (Cascading Style Sheets)	웹 페이지의 스타일을 정의하는 언어
`<head>`	HTML 문서의 머리 부분, 메타데이터 및 스타일 정의
`<style>`	CSS를 작성하는 HTML 태그

3. 기본 코드 예제

다음은 내부 스타일 시트를 사용하는 가장 기본적인 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 시트 예제</title>
    <style>
        body {
            background-color: lightblue; / 배경색을 연한 파란색으로 설정 /
        }
        h1 {
            color: white; / 제목 색상을 흰색으로 설정 /
            text-align: center; / 제목을 중앙 정렬 /
        }
    </style>
</head>
<body>
    <h1>내부 스타일 시트 예제</h1>
</body>
</html>

실행 결과

이 코드를 실행하면, 배경이 연한 파란색인 웹 페이지가 열리고, 중앙에 흰색 제목이 표시됩니다.

코드 한 줄씩 동작 설명

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다.
<head>: 문서의 메타데이터를 포함하는 부분입니다.
<meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹을 위한 뷰포트 설정입니다.
<title>: 웹 페이지의 제목을 설정합니다.
<style>: 내부 스타일 시트를 시작합니다.
body { background-color: lightblue; }: 페이지의 배경색을 연한 파란색으로 설정합니다.
h1 { color: white; text-align: center; }: 제목의 색상을 흰색으로 설정하고 중앙 정렬합니다.
<body>: 실제 콘텐츠가 포함되는 부분입니다.
<h1>: 제목을 정의합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 제품 리스트

쇼핑몰에서 제품 리스트를 디자인할 때, 내부 스타일 시트를 사용하여 각 제품의 제목과 가격을 꾸밀 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>쇼핑몰 제품 리스트</title>
    <style>
        .product {
            border: 1px solid #ccc; / 테두리 설정 /
            padding: 10px; / 패딩 추가 /
            margin: 10px; / 마진 추가 /
            text-align: center; / 텍스트 중앙 정렬 /
        }
        .product-title {
            font-size: 1.5em; / 제목 크기 설정 /
            color: #333; / 제목 색상 설정 /
        }
        .product-price {
            color: red; / 가격 색상 설정 /
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="product-title">제품 A</div>
        <div class="product-price">가격: 10,000원</div>
    </div>
</body>
</html>

예제 2: 블로그 포스트 스타일링

블로그 포스트의 제목과 본문을 꾸밀 때도 내부 스타일 시트를 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블로그 포스트</title>
    <style>
        .post-title {
            font-size: 2em; / 제목 크기 설정 /
            color: navy; / 제목 색상 설정 /
            margin-bottom: 20px; / 아래쪽 여백 추가 /
        }
        .post-content {
            font-size: 1em; / 본문 크기 설정 /
            line-height: 1.5; / 줄 간격 설정 /
        }
    </style>
</head>
<body>
    <h1 class="post-title">내부 스타일 시트의 장점</h1>
    <p class="post-content">내부 스타일 시트를 사용하면 CSS를 HTML 문서 내에 직접 정의할 수 있어...</p>
</body>
</html>

5. 흔한 실수와 주의사항

실수 1: `<style>` 태그를 잘못된 위치에 작성

잘못된 코드:

<body>
    <style>
        body { background-color: lightblue; }
    </style>
</body>

올바른 코드:

<head>
    <style>
        body { background-color: lightblue; }
    </style>
</head>

주의사항: <style> 태그는 항상 <head> 섹션 안에 있어야 합니다.

실수 2: 선택자 오타