CSS

CSS 기초 & 텍스트 관련 스타일

CSS 기초

CSS (Cascading Style Sheets)는 HTML로 작성된 문서의 표현을 꾸미기 위한 스타일 시트 언어이다. 폰트, 색상, 레이아웃 등 웹 페이지의 시각적인 부분을 담당한다.

CSS 규칙의 구조

CSS 한 줄은 "어떤 요소를(선택자), 무엇을(속성), 어떻게(값) 바꿀지"를 적는다. 이 한 덩어리를 규칙(rule)이라 부른다.

h1 { color: blue; }

선택자 — 어떤 요소에 속성 — 무엇을 값 — 어떻게

선택자와 { } 사이의 한 쌍 속성: 값;을 선언(declaration)이라 하며, ;(세미콜론)으로 구분해 여러 개를 쓸 수 있다.

1. CSS 적용 방법

CSS를 HTML에 적용하는 방법은 세 가지가 있다.

인라인 스타일 (Inline Style): HTML 태그에 직접 style 속성을 사용하여 적용한다. 간단한 스타일을 적용할 때 유용하지만, 유지보수가 어려워 권장하지는 않는다.

<h1 style="color: blue; font-size: 20px;">인라인 스타일</h1>

내부 스타일 시트 (Internal Style Sheet): HTML 문서의 <head> 태그 안에 <style> 태그를 사용하여 작성한다. 해당 HTML 문서에만 스타일이 적용된다.

<head>
    <style>
        h1 {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>내부 스타일 시트</h1>
</body>

외부 스타일 시트 (External Style Sheet): 별도의 .css 파일을 만들어 스타일을 작성하고, HTML 문서의 <head> 태그 안에서 <link> 태그로 연결한다. 가장 권장되는 방식이다.

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>외부 스타일 시트</h1>
</body>

/* style.css */
h1 {
    color: blue;
    font-size: 20px;
}

세 방법 모두 결과는 같다 — <h1>이 파란색 20px로 보인다.

스타일이 적용된 제목

2. 선택자와 우선순위

선택자 (Selector): 스타일을 적용할 HTML 요소를 특정하는 역할을 한다.
우선순위 (Specificity): 여러 규칙이 동일한 요소에 적용될 때, 어떤 스타일을 최종적으로 적용할지 결정하는 규칙이다.

우선순위 점수 계산 (높은 점수가 이김)

!important: 모든 것을 무시함 (남용 금물)
인라인 스타일 (style="..."): 1000점
ID 선택자 (#id): 100점
클래스(.class), 속성([type=text]), 가상 클래스(:hover): 10점
태그(h1), 가상 요소(::before): 1점
전체 선택자 (*): 0점

동일한 우선순위일 때

점수가 같으면 나중에 작성된 규칙이 적용된다. 이것이 CSS의 'Cascading'(폭포) 원칙.

/* 예시: 세 규칙이 <p class="warning" id="msg"> 에 적용될 때 */
p { color: black; }            /* 1점 */
.warning { color: orange; }    /* 10점 */
#msg { color: red; }           /* 100점 → 이게 이김: 빨강색 */

세 규칙이 같은 요소를 두고 경쟁하지만, 점수가 가장 높은 ID 선택자가 이긴다.

p → 1점 .warning → 10점 #msg → 100점 🏆

→ 최종 적용 결과: 빨간색 텍스트

실무 팁

!important는 수정이 어려워서 되도록 피하고, 선택자를 더 구체적으로 쓰는 방식으로 해결하는 것이 좋다.

3. 주석 (Comment)

CSS 주석은 /* 로 시작하여 */ 로 끝난다. 브라우저는 이 부분을 해석하지 않으므로 코드에 대한 설명을 작성할 때 사용한다.

/* 이 부분은 주석입니다. 코드에 영향을 주지 않습니다. */
p {
    color: green; /* 글자 색상을 녹색으로 변경 */
}

주요 선택자

선택자	이름	설명	예시
`*`	전체	모든 요소를 선택한다	`* { color: black; }`
`tag`	태그	지정된 태그 이름을 가진 모든 요소	`p { font-size: 16px; }`
`.class`	클래스	지정된 클래스 이름을 가진 모든 요소	`.info { color: gray; }`
`#id`	ID	지정된 ID를 가진 유일한 요소	`#header { width: 100%; }`
`A, B`	그룹	A와 B 요소를 모두 선택 (쉼표로 구분)	`h1, h2 { color: navy; }`

텍스트 관련 스타일 (Font)

`font-family`

글꼴을 지정한다. 여러 글꼴을 쉼표로 나열할 수 있으며, 첫 번째 글꼴이 없으면 다음 글꼴을 순서대로 적용한다. 이를 fallback(대체) 순서라고 한다. 이름에 공백이나 한글이 있으면 따옴표로 감싼다.

p {
    font-family: "Malgun Gothic", Dotum, sans-serif;
}

실무 권장 순서: 영문 폰트 → 한글 폰트 → generic 폰트(sans-serif, serif, monospace) 순으로 작성한다. 마지막의 generic 폰트는 모든 폰트가 실패했을 때의 최종 안전망이다.

`@font-face`

사용자 컴퓨터에 설치되지 않은 웹 폰트를 불러와 사용할 수 있게 한다.

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/myfont.woff2') format('woff2');
}
body {
    font-family: 'MyCustomFont', sans-serif;
}

`font-size`

글자의 크기를 지정한다. (단위: px, em, rem, % 등)

h1 { font-size: 32px; }
p { font-size: 1.2rem; }

단위 차이

px: 절대 단위. 고정된 크기가 필요한 경우에 사용.
em: 부모 요소의 font-size를 기준으로 한 상대 단위. 중첩되면 계산이 복잡해질 수 있음.
rem (root em): 루트 요소(<html>)의 font-size를 기준으로 하는 상대 단위. 일관성이 있어 반응형 웹에 널리 사용.
%: 부모 요소 기준의 백분율.

권장: 본문에는 rem을 사용하고, <html>에 font-size: 62.5%를 주면 1rem = 10px로 계산하기 쉬워진다.

`font-weight`

글자의 굵기를 지정한다. (normal, bold, 100 ~ 900). 키워드 대응은 normal=400, bold=700.

.bold-text { font-weight: bold; } /* 700과 동일 */
.light-text { font-weight: 300; }

`font-style`

글자를 기울일 때 사용한다. (normal, italic, oblique)

em { font-style: italic; }

`font-variant`

소문자를 작은 대문자(Small Caps)로 표시할 때 사용한다.

h3 { font-variant: small-caps; }

폰트 속성 한눈에 보기

font-size14px · 20px · 28px font-weight300 가늘게 · 400 보통 · 700 굵게 font-stylenormal · italic 기울임 font-variantSmall Caps Example

텍스트 스타일 (Text)

`color`

글자의 색상을 지정한다.

p { color: #333333; }
a { color: rgb(0, 123, 255); }

`text-decoration`

텍스트에 줄을 긋거나 없앨 때 사용한다. text-decoration-line(none, underline, line-through, overline), text-decoration-style(solid, dashed, wavy 등), text-decoration-color를 한 번에 지정하는 단축 속성이다.

a { text-decoration: none; } /* 링크 밑줄 제거 */
.cancel { text-decoration: line-through; }

`text-transform`

영문 텍스트의 대소문자를 변경한다. (none, capitalize, uppercase, lowercase)

.title { text-transform: capitalize; } /* 단어의 첫 글자를 대문자로 */
.shout { text-transform: uppercase; }

`text-shadow`

텍스트에 그림자 효과를 준다. (x-offset y-offset blur-radius color)

h1 { text-shadow: 2px 2px 5px gray; }

`white-space`

공백 문자를 처리하는 방법을 지정한다.

pre { white-space: pre-wrap; } /* 소스코드처럼 공백과 줄바꿈 유지 */

`letter-spacing` & `word-spacing`

각각 자간(글자 사이 간격)과 어간(단어 사이 간격)을 조절한다.

.wide { letter-spacing: 2px; }
.spaced { word-spacing: 10px; }

텍스트 속성 한눈에 보기

text-decorationunderline · ~~line-through~~ · wavy text-transformuppercase → hello world text-shadow그림자 효과 letter-spacing자간 넓힘

문단 스타일 (Paragraph)

`text-align`

문단의 수평 정렬을 지정한다. (left, right, center, justify)

p { text-align: justify; }
h1 { text-align: center; }

`text-indent`

문단의 첫 줄을 들여쓰기한다.

p { text-indent: 20px; }

`line-height`

줄 간격을 지정한다. 보통 단위 없이 숫자로 지정하여 글자 크기의 배수로 설정한다.

p { line-height: 1.6; }

문단 정렬·들여쓰기·줄간격 미리보기

text-align: center — 가운데 정렬

text-indent: 2em — 이 문단은 첫 줄이 들여쓰기되어 시작합니다. 줄이 길어지면 둘째 줄부터는 들여쓰기가 적용되지 않습니다.

line-height: 2 — 줄 간격이
넓어져 두 줄 사이가
시원하게 벌어집니다.

`text-overflow`

내용이 영역을 벗어날 때 어떻게 처리할지 지정한다. 보통 white-space: nowrap과 overflow: hidden이 함께 사용되어야 한다.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ...으로 표시 */
}

여러 줄을 ...으로 줄이고 싶을 때

.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 최대 2줄까지 표시 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

한 줄 말줄임 (너비 220px):

이 문장은 칸을 넘기면 끝부분이 점점점으로 잘려서 표시됩니다.

목록 스타일 (List)

`list-style-type`

목록의 마커(bullet) 종류를 변경한다.

ul { list-style-type: square; }      /* 채워진 사각형 */
ol { list-style-type: upper-roman; } /* 로마 숫자 대문자 */

square

사과
바나나

upper-roman

준비
조리

none + 이모지

🥕 당근
🧅 양파

`list-style-image`

마커를 이미지로 대체한다.

ul { list-style-image: url('images/bullet.png'); }

`list-style-position`

마커의 위치를 지정한다. (inside 또는 outside)

ul { list-style-position: inside; }

`list-style`

위의 속성들을 한 번에 지정하는 단축 속성이다.

ul { list-style: square inside; }
ol { list-style: upper-roman; }

종합 실습: 나만의 레시피 페이지 꾸미기

지금까지 배운 CSS 속성들을 활용하여 간단한 레시피 소개 페이지를 스타일링 한다.

요구사항

전체 페이지에 웹 폰트('Noto Sans KR' 등)를 적용하고, 기본 글자색은 #333, 줄 간격은 1.7로 설정한다.
레시피 제목(<h1>)은 가운데 정렬하고, 글자 크기는 36px, 굵기는 bold, 색상은 darkorange로 지정한다. 2px 2px 4px #ccc의 text-shadow를 추가한다.
레시피 설명 문단(<p>)은 양쪽 정렬(justify)하고, 첫 줄을 1em 만큼 들여쓰기한다.
재료 목록(<ul>)의 기본 마커를 없애고, ::before 가상 요소를 사용해 원하는 아이콘(예: 🥕)으로 변경한다.
요리 순서(<ol>)는 로마 숫자 소문자(lower-roman)로 표시되도록 변경한다.
참고 링크(<a>)의 밑줄을 없애고, 색상은 #007bff로 지정한다.

완성 코드

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>초간단 토마토 스파게티 레시피</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="recipe_style.css">
</head>
<body>
    <div class="recipe-container">
        <h1>초간단 토마토 스파게티</h1>

        <p class="description">
            누구나 15분 안에 만들 수 있는 가장 기본적인 토마토 스파게티 레시피입니다.
            간단한 재료로도 충분히 깊은 맛을 낼 수 있어 자취생이나 요리 초보자에게 안성맞춤입니다.
            주말 점심 메뉴로 강력 추천합니다.
        </p>

        <h2>재료 준비</h2>
        <ul class="ingredients">
            <li>스파게티 면 1인분 (100g)</li>
            <li>토마토 소스 150ml</li>
            <li>마늘 3쪽</li>
            <li>양파 1/4개</li>
            <li>올리브 오일 2큰술</li>
            <li>소금, 후추 약간</li>
        </ul>

        <h2>요리 순서</h2>
        <ol class="steps">
            <li>마늘은 편으로 썰고, 양파는 잘게 다집니다.</li>
            <li>끓는 물에 소금을 넣고 스파게티 면을 8분간 삶습니다.</li>
            <li>팬에 올리브 오일을 두르고 마늘과 양파를 볶아 향을 냅니다.</li>
            <li>토마토 소스와 면수를 약간 넣고 끓입니다.</li>
            <li>삶은 면을 소스에 넣고 잘 섞어준 뒤, 소금과 후추로 간을 맞춥니다.</li>
        </ol>

        <p class="reference">
            더 많은 레시피는 <a href="#">여기</a>를 참고하세요.
        </p>
    </div>
</body>
</html>

recipe_style.css

/* 요구사항 1: 전체 페이지 스타일 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.7;
    margin: 40px;
}

.recipe-container {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* 요구사항 2: 레시피 제목 스타일 */
h1 {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: darkorange;
    text-shadow: 2px 2px 4px #ccc;
}

/* 요구사항 3: 레시피 설명 문단 스타일 */
.description {
    text-align: justify;
    text-indent: 1em;
}

/* 요구사항 4: 재료 목록 스타일 */
.ingredients {
    list-style-type: none;
    padding-left: 40px;
}

.ingredients li::before {
    content: "🥕 ";
    margin-right: 8px;
}

/* 요구사항 5: 요리 순서 스타일 */
.steps {
    list-style-type: lower-roman;
}

/* 요구사항 6: 참고 링크 스타일 */
.reference a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

마지막 수정 2026년 10월 22일

CSS 기초 & 텍스트 관련 스타일

#CSS 기초

#CSS 규칙의 구조

#1. CSS 적용 방법

#2. 선택자와 우선순위

#3. 주석 (Comment)

#주요 선택자

#텍스트 관련 스타일 (Font)

#font-family

#@font-face

#font-size

#font-weight

#font-style

#font-variant

#텍스트 스타일 (Text)

#color

#text-decoration

#text-transform

#text-shadow

#white-space

#letter-spacing & word-spacing

#문단 스타일 (Paragraph)

#text-align

#text-indent

#line-height

#text-overflow

#목록 스타일 (List)

#list-style-type

#list-style-image

#list-style-position

#list-style

#종합 실습: 나만의 레시피 페이지 꾸미기

#요구사항

#완성 코드