색상, 폰트, 텍스트 스타일링

h1 { color: tomato; }
body { background-color: lightgray; }

p { color: #333333; } /* 진한 회색 */
.hero { background-color: #F8F8F8; } /* 아주 연한 회색 */

button { background-color: rgb(76, 175, 80); } /* 진한 초록색 */
.overlay { background-color: rgba(0, 0, 0, 0.7); } /* 70% 불투명 검정 */

.accent-color { color: hsl(210, 90%, 40%); } /* 다크 블루 */

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트 스타일링 예제 - 나의 블로그</title>
    <link rel="stylesheet" href="css/blog.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1 class="main-title">나의 웹 개발 이야기</h1>
        <p class="subtitle">CSS 색상, 폰트, 텍스트 스타일링 연습</p>
    </header>

    <main>
        <article class="blog-post">
            <h2 class="post-title">CSS로 웹 페이지에 생명 불어넣기</h2>
            <div class="post-meta">
                <p>작성자: 김코딩 | <time datetime="2025-06-15">2025년 6월 15일</time></p>
            </div>

            <p>CSS로 웹 페이지의 시각 표현을 구성하는 방법을 다룹니다.
                HTML이 웹의 구조를 담당한다면, CSS는 그 구조에 <b>색상, 간격, 질감, 강조</b>를 적용합니다.</p>

            <p class="important-text">이 단락은 특히 중요한 내용이므로, 다른 스타일이 적용되었습니다.
                CSS는 웹 디자인의 핵심 요소이며, 사용자 경험(UX)에 지대한 영향을 미칩니다.</p>

            <h3>색상 선택의 중요성</h3>
            <p>웹 디자인에서 색상 팔레트를 잘 선택하는 것은 매우 중요합니다.
                <span class="color-example red">빨간색</span>은 열정적이고 경고의 의미를,
                <span class="color-example blue">파란색</span>은 신뢰와 안정감을,
                <span class="color-example green">초록색</span>은 자연과 성장을 나타낼 수 있습니다.</p>
            <p>HEX, RGB, HSL 등 다양한 색상 표기법을 사용하여 원하는 색상을 정확하게 표현할 수 있습니다.</p>

            <h3>가독성을 높이는 폰트 설정</h3>
            <p>사용자가 정보를 쉽게 읽을 수 있도록 <mark>폰트의 종류와 크기, 줄 간격</mark>을 신중하게 선택해야 합니다.
                너무 작거나 너무 큰 폰트, 혹은 가독성이 떨어지는 폰트는 사용자에게 피로감을 줄 수 있습니다.</p>
            <p class="quote-text">"좋은 디자인은 사용자가 내용을 쉽게 이해하도록 돕는 것이다."</p>

            <h3>텍스트 정렬과 효과</h3>
            <p>텍스트의 정렬 방식(`text-align`)이나 자간(`letter-spacing`), 단어 간격(`word-spacing`) 조절은
                페이지의 미적 완성도를 높이는 데 기여합니다. 또한, <span class="shadow-text">텍스트 그림자 효과</span>(`text-shadow`)를 통해
                입체감을 주거나 독특한 시각적 효과를 만들 수 있습니다.</p>

            <p>CSS를 통해 이 모든 것을 제어할 수 있으며, 이는 여러분의 웹 페이지를 더욱 특별하게 만들 것입니다.</p>
        </article>
    </main>

    <footer>
        <p>&copy; 2025 나의 웹 개발 블로그. 모든 권리 보유.</p>
        <p class="small-info">학습 목적으로 제작되었습니다.</p>
    </footer>
</body>
</html>

/* Google Fonts Noto Sans KR 적용 (웹 폰트) */
body {
    font-family: 'Noto Sans KR', sans-serif; /* Noto Sans KR을 1순위로, 없으면 sans-serif 사용 */
    background-color: #eef1f5; /* 아주 연한 파란색 배경 */
    color: #34495e; /* 진한 회색 텍스트 */
    line-height: 1.7; /* 기본 줄 간격 설정으로 가독성 향상 */
    margin: 0;
    padding: 0;
}

/* 헤더 스타일링 */
header {
    background-color: #2c3e50; /* 어두운 남색 배경 */
    color: white;
    padding: 30px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.main-title {
    font-size: 2.8em; /* 큰 제목 */
    font-weight: 700; /* 굵게 */
    letter-spacing: 1px; /* 자간 조절 */
    margin-bottom: 5px;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.3); /* 제목에 그림자 */
}

.subtitle {
    font-size: 1.2em;
    font-style: italic; /* 기울임 */
    color: #bdc3c7; /* 연한 회색 */
}

/* 메인 콘텐츠 영역 */
main {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 블로그 게시물 전체 스타일 */
.blog-post {
    padding: 20px;
}

.post-title {
    font-size: 2.2em;
    color: #2980b9; /* 파란색 제목 */
    text-align: left;
    margin-bottom: 15px;
    border-bottom: 2px solid #2980b9;
    padding-bottom: 10px;
}

.post-meta {
    font-size: 0.9em;
    color: #7f8c8d; /* 회색 메타 정보 */
    margin-bottom: 25px;
    text-align: right; /* 오른쪽 정렬 */
}

/* 일반 문단 스타일 */
.blog-post p {
    font-size: 1.1em;
    margin-bottom: 1.2em;
    word-spacing: 1px; /* 단어 간격 미세 조정 */
    text-indent: 20px; /* 첫 줄 들여쓰기 */
}

/* 중요 텍스트 스타일 */
.blog-post .important-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #c0392b; /* 진한 빨간색 */
    background-color: #fcecec; /* 연한 빨간색 배경 */
    padding: 10px 15px;
    border-left: 5px solid #e74c3c; /* 왼쪽 테두리 */
    margin-bottom: 20px;
    border-radius: 5px;
}

/* 색상 예시 텍스트 */
.color-example {
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
}
.red { background-color: #ffe0e0; color: #cc0000; }
.blue { background-color: #e0f2f7; color: #0056b3; }
.green { background-color: #e6ffe6; color: #008000; }

/* mark 태그 스타일 오버라이드 */
mark {
    background-color: #ffff99; /* 기본 노란색 */
    padding: 0 3px;
}

/* 인용문 스타일 */
.blog-post .quote-text {
    font-style: italic;
    color: #555;
    border-left: 4px solid #f39c12; /* 주황색 세로선 */
    padding-left: 15px;
    margin-left: 20px;
    font-size: 1.15em;
    line-height: 1.5;
    text-align: center; /* 가운데 정렬 */
    background-color: #fffaf0; /* 아주 연한 주황색 배경 */
    border-radius: 0 5px 5px 0;
}

/* 그림자 텍스트 */
.shadow-text {
    color: #555;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 그림자 효과 */
    font-weight: bold;
}

/* 푸터 스타일링 */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
    font-size: 0.9em;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}
.small-info {
    color: #bdc3c7;
    font-size: 0.8em;
    margin-top: 5px;
}