웹 스타일링을 위한 CSS 핵심 개념과 속성 가이드

CSS 기본 구문과 구조

CSS(Cascading Style Sheets)는 HTML 문서의 시각적 표현과 레이아웃을 제어하는 스타일링 언어입니다. 하나의 CSS 규칙(Rule)은 크게 선택자(Selector)와 선언 블록(Declaration Block)으로 구성됩니다.

선택자 (Selector): 스타일을 적용할 대상 HTML 요소를 지정합니다.
선언 블록 (Declaration Block): 중괄호 {}로 감싸며, 적용할 스타일의 집합을 포함합니다.
속성 (Property): 변경하고자 하는 스타일의 특성(예: 색상, 크기)을 의미합니다.
값 (Value): 속성에 할당되는 구체적인 설정값입니다.

하나의 규칙은 쉼표로 구분하여 여러 선택자에 동시에 적용할 수 있습니다.

h1, h2, h3 {
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
    line-height: 1.4;
    color: #1e293b;
}

스타일시트 적용 방식과 상속

CSS를 HTML 문서에 연동하는 방식은 크게 세 가지가 있으며, 각 방식은 우선순위와 유지보수성에서 차이를 보입니다.

외부 스타일시트 (External CSS)

<link> 태그를 사용하여 별도의 .css 파일을 불러옵니다. rel="stylesheet", href, media 등의 속성을 사용합니다. 캐싱이 가능하고 코드 분리가 용이하여 가장 권장되는 방식입니다.

내부 스타일시트 (Internal CSS)

HTML <head> 영역 내에서 <style> 태그를 사용하여 CSS를 작성합니다. 단일 페이지에만 적용되는 특수한 스타일링에 유용합니다.

인라인 스타일 (Inline CSS)

HTML 요소의 style 속성에 직접 CSS를 작성합니다. 우선순위가 가장 높지만, 재사용성이 떨어지므로 가급적 피하는 것이 좋습니다.

상속 (Inheritance)

CSS의 특정 속성(주로 color, font-family 등 타이포그래피 관련 속성)은 부모 요소에서 자식 요소로 자동으로 전달됩니다. 이를 활용하면 불필요한 코드 중복을 줄일 수 있습니다.

실전 예제: 타이포그래피 레퍼런스 UI

다음은 외부 CSS를 활용하여 타이포그래피 속성을 카드 형태의 그리드 레이아웃으로 구현한 예제입니다.

HTML 구조 (index.html)

<!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="styles.css">
</head>
<body>
    <main class="reference-container">
        <h1>주요 타이포그래피 속성</h1>
        <p class="description">문서의 텍스트 가독성과 스타일을 제어하는 핵심 CSS 속성 모음입니다.</p>
        
        <div class="card-grid">
            <article class="card">
                <code class="property">font-family</code>
                <p>텍스트에 적용할 글꼴 패밀리 및 대체 글꼴을 지정합니다.</p>
            </article>
            <article class="card">
                <code class="property">font-size</code>
                <p>글꼴의 크기를 결정하며, 절대 단위 또는 상대 단위를 사용합니다.</p>
            </article>
            <article class="card">
                <code class="property">font-weight</code>
                <p>글꼴의 두께를 설정합니다. (예: normal, bold, 100~900)</p>
            </article>
            <article class="card">
                <code class="property">line-height</code>
                <p>텍스트 줄 간의 세로 간격을 조절하여 가독성을 높입니다.</p>
            </article>
        </div>
    </main>
</body>
</html>

CSS 스타일시트 (styles.css)

:root {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-accent: #2563eb;
    --spacing-base: 16px;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: 'Inter', 'Apple SD Gothic Neo', sans-serif;
    line-height: 1.6;
}

.reference-container {
    max-width: 960px;
    margin: 0 auto;
    padding: calc(var(--spacing-base) * 3);
}

h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: var(--spacing-base);
}

.description {
    color: var(--color-text-secondary);
    margin-bottom: calc(var(--spacing-base) * 2);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-base);
}

.card {
    background-color: var(--color-surface);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: calc(var(--spacing-base) * 1.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.property {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: var(--color-accent);
    background-color: #eff6ff;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

타이포그래피 및 텍스트 제어

폰트 속성

font-family: Serif, Sans-serif, Monospace 등 글꼴 패밀리를 정의합니다.
font-size: 텍스트 크기를 지정합니다. px, em, rem 또는 vw/vh 단위를 사용합니다.
font-weight: 글꼴 두께를 조절합니다. 키워드(normal, bold) 또는 수치(100~900)를 사용합니다.
font-style: italic 또는 oblique를 통해 기울임체를 적용합니다.
font-variant: small-caps를 사용하여 작은 대문자로 표시할 수 있습니다.

텍스트 포맷팅 및 정렬

color: 텍스트의 전경색을 지정합니다.
text-align: 수평 정렬 방식을 설정합니다 (left, right, center, justify).
vertical-align: 인라인 또는 테이블 셀 요소의 수직 정렬을 제어합니다.
text-decoration: 밑줄, 취소선 등의 텍스트 장식을 추가합니다.
text-indent: 문단 첫 줄의 들여쓰기 크기를 지정합니다.
letter-spacing / word-spacing: 문자 간 또는 단어 간의 간격을 조절합니다.
white-space: 공백 문자와 줄 바꿈 처리 방식을 정의합니다.
text-shadow: 텍스트에 그림자 효과를 적용합니다.

의사 요소 (Pseudo-elements)

텍스트의 특정 부분에만 스타일을 적용할 때 사용합니다.

::first-letter: 블록 요소의 첫 번째 글자에 스타일을 적용합니다.
::first-line: 블록 요소의 첫 번째 줄에 스타일을 적용합니다.

CSS 선택자 심화

정확한 요소 타겟팅을 위해 다양한 선택자를 조합하여 사용할 수 있습니다.

일반 선택자 (Universal): * 문서의 모든 요소를 타겟팅합니다.
타입 선택자 (Type): h1, p, div 특정 HTML 태그를 선택합니다.
클래스 선택자 (Class): .classname 특정 클래스를 가진 모든 요소를 선택합니다.
ID 선택자 (ID): #idname 고유한 ID를 가진 단일 요소를 선택합니다.
자식 선택자 (Child): A > B A의 직접적인 자식인 B만 선택합니다.
하위 선택자 (Descendant): A B A 내부에 포함된 모든 세대 B를 선택합니다.
인접 형제 선택자 (Adjacent Sibling): A + B A 바로 다음에 위치하는 형제 B를 선택합니다.
속성 선택자 (Attribute): [type="text"] 특정 속성과 값을 가진 요소를 선택합니다.

수치 단위와 박스 모델

길이 단위

절대 단위: px, pt, cm, mm, in 등 물리적 크기에 기반합니다. 주로 px이 화면 출력에 사용됩니다.
상대 단위: em, rem, ex, %, vw, vh 등 부모 요소나 뷰포트 크기에 비례하여 계산됩니다. 반응형 웹 디자인에 필수적입니다.

박스 모델(Box Model)

모든 HTML 요소는 사각형의 박스로 간주되며, CSS 박스 모델은 이 요소들의 크기와 여백을 계산하는 방식을 정의합니다.

Content (콘텐츠): 실제 텍스트나 이미지가 들어가는 영역 (width, height).
Padding (내부 여백): 콘텐츠와 테두리 사이의 공간. 요소의 배경색이 적용됩니다.
Border (테두리): 패딩을 감싸는 경계선. border-width, border-style, border-color 속성으로 제어하거나 border 단축 속성을 사용합니다.
Margin (외부 여백): 요소의 테두리 바깥쪽 공간으로, 인접 요소와의 거리를 확보합니다. 투명합니다.

크기 및 오버플로우 제어

min-width, max-width, min-height, max-height: 요소의 최소/최대 크기를 제한하여 유연한 레이아웃을 구현합니다.
line-height: 줄 높이를 지정하여 텍스트 블록의 세로 리듬을 조절합니다.
overflow: 콘텐츠가 박스 크기를 초과할 때 처리 방식(visible, hidden, scroll, auto)을 결정합니다.

태그: CSS css-selectors box-model typography web-styling

6월 15일 22:28에 게시됨

괴물 클럽