CSS 기본 스타일링 가이드: 색상, 글꼴, 여백, 테두리, 배경

소개: 스타일링의 기본 요소들

웹 디자인에서 색상, 글꼴, 여백, 테두리, 배경은 가장 기본적이면서도 중요한 스타일링 요소입니다. 이 요소들을 잘 활용하면 웹사이트의 시각적 매력을 높이고, 사용자 경험을 개선할 수 있습니다.

기본 스타일링 요소들은 다음과 같은 역할을 합니다:

• 색상: 브랜드 아이덴티티를 표현하고, 사용자 주의를 끌며, 콘텐츠의 계층 구조를 시각화합니다.
• 글꼴: 콘텐츠의 가독성을 결정하고, 웹사이트의 성격과 분위기를 형성합니다.
• 여백: 콘텐츠의 호흡을 만들고, 요소 간 관계를 정의하며, 레이아웃을 구성합니다.
• 테두리: 요소를 구분하고, 시각적 강조를 더하며, 인터페이스 요소를 정의합니다.
• 배경: 콘텐츠의 배경을 형성하고, 시각적 흥미를 더하며, 섹션을 구분합니다.

이 글에서는 각 스타일링 요소의 속성과 값, 효과적인 사용법을 상세히 알아보겠습니다.

색상 스타일링

색상은 웹 디자인의 핵심 요소로, 브랜드 아이덴티티 표현과 사용자 경험 향상에 중요한 역할을 합니다.

색상 값 표현 방법

CSS에서 색상을 표현하는 다양한 방법을 알아봅시다:

1. 색상 이름

CSS는 red, blue, green과 같은 기본 색상 이름과 mediumseagreen, rebeccapurple 같은 확장 색상 이름을 지원합니다.

p {
    color: red;
    background-color: lightgray;
}

h1 {
    color: navy;
    border-bottom: 2px solid tomato;
}

장점: 직관적이고 기억하기 쉬움
단점: 선택할 수 있는 색상이 제한적이며, 미세한 조정이 어려움

2. RGB / RGBA

RGB 모델은 빨강(Red), 초록(Green), 파랑(Blue)의 양으로 색상을 표현합니다. 각 값은 0부터 255 사이의 정수입니다. RGBA는 여기에 알파(투명도) 채널을 추가한 것입니다.

div {
    /* RGB 형식 */
    color: rgb(255, 0, 0);  /* 빨강 */

    /* RGBA 형식 (알파값: 0 = 완전 투명, 1 = 완전 불투명) */
    background-color: rgba(0, 0, 255, 0.5);  /* 반투명 파랑 */
}

장점: 정밀한 색상 조정 가능, 투명도 제어 가능
단점: 직관적으로 이해하기 어려울 수 있음

3. HEX 코드

16진수(Hexadecimal) 값을 사용하여 색상을 표현합니다. 형식은 #RRGGBB입니다.

section {
    color: #FF0000;  /* 빨강 */
    background-color: #00FF00;  /* 초록 */
    border: 1px solid #0000FF;  /* 파랑 */
}

/* 축약형 (같은 숫자가 반복될 때) */
.shorthand {
    color: #F00;  /* #FF0000과 동일 */
    background-color: #0F0;  /* #00FF00과 동일 */
}

장점: 디자인 도구에서 흔히 사용되는 형식, 간결한 표현
단점: 숫자만으로는 어떤 색상인지 직관적으로 알기 어려움

4. HSL / HSLA

색조(Hue), 채도(Saturation), 명도(Lightness)를 기반으로 색상을 표현합니다. 직관적인 색상 조정이 가능합니다.

button {
    /* HSL 형식 (색조: 0-360, 채도 및 명도: 0-100%) */
    color: hsl(0, 100%, 50%);  /* 빨강 */

    /* HSLA 형식 (알파값 추가) */
    background-color: hsla(240, 100%, 50%, 0.5);  /* 반투명 파랑 */
}

장점: 인간의 색상 인식 방식과 유사하여 직관적인 조정 가능
단점: 아직 익숙하지 않은 개발자들이 많음

주요 색상 속성

웹 페이지에서 색상을 적용하는 주요 CSS 속성을 알아봅시다:

1. color

텍스트 색상을 지정합니다.

p {
    color: #333;  /* 어두운 회색 */
}

a {
    color: #0066cc;  /* 파란색 링크 */
}

a:hover {
    color: #004080;  /* 마우스 오버 시 더 어두운 파란색 */
}

2. background-color

요소의 배경색을 지정합니다.

body {
    background-color: #f5f5f5;  /* 연한 회색 배경 */
}

.highlight {
    background-color: rgba(255, 255, 0, 0.3);  /* 반투명 노란색 하이라이트 */
}

3. border-color

테두리 색상을 지정합니다.

.box {
    border: 1px solid #ddd;  /* 연한 회색 테두리 */
}

input:focus {
    border-color: #66afe9;  /* 포커스 시 파란색 테두리 */
}

4. 기타 색상 속성

• outline-color: 외곽선 색상
• box-shadow: 그림자 색상
• text-shadow: 텍스트 그림자 색상
• caret-color: 텍스트 입력 커서 색상

색상 적용 팁

1. 색상 일관성 유지하기

웹사이트 전체에서 일관된 색상 팔레트를 사용하는 것이 중요합니다.

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-color: #333;
    --background-color: #f9f9f9;
}

.button-primary {
    background-color: var(--primary-color);
    color: white;
}

.button-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.highlight {
    color: var(--accent-color);
}

2. 대비(Contrast) 고려하기

텍스트와 배경 간의 충분한 대비를 유지하여 가독성을 확보하세요. WCAG 지침에 따르면 일반 텍스트는 최소 4.5:1, 큰 텍스트는 3:1의 대비가 필요합니다.

/* 나쁜 예 - 대비가 낮음 */
.low-contrast {
    color: #999;
    background-color: #777;
}

/* 좋은 예 - 대비가 높음 */
.high-contrast {
    color: #333;
    background-color: #fff;
}

3. 색상의 심리적 효과 활용하기

• 빨강: 열정, 중요성, 경고
• 파랑: 신뢰, 안정, 평화
• 초록: 자연, 성장, 허가
• 노랑: 에너지, 주의, 낙관
• 보라: 창의성, 고급, 신비

.error-message {
    color: #d9534f;  /* 빨간색 - 경고 */
}

.success-message {
    color: #5cb85c;  /* 초록색 - 허가/성공 */
}

.info-message {
    color: #5bc0de;  /* 파란색 - 정보 */
}

.warning-message {
    color: #f0ad4e;  /* 주황색 - 주의 */
}

글꼴 스타일링

글꼴은 웹사이트의 성격을 결정하고 콘텐츠의 가독성에 직접적인 영향을 미칩니다.

글꼴 패밀리 설정

font-family 속성을 사용하여 텍스트에 적용할 글꼴을 지정합니다.

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 {
    font-family: Georgia, 'Times New Roman', serif;
}

여러 글꼴을 쉼표로 구분하여 나열하면, 브라우저는 왼쪽부터 순서대로 사용자의 시스템에 설치된 글꼴을 확인하여 적용합니다. 가장 마지막에는 일반적인 글꼴 계열을 지정하는 것이 좋습니다.

주요 글꼴 계열:

• serif: 삐침이 있는 글꼴 (예: Times New Roman)
• sans-serif: 삐침이 없는 글꼴 (예: Arial, Helvetica)
• monospace: 고정폭 글꼴 (예: Courier, Consolas)
• cursive: 필기체 스타일 글꼴
• fantasy: 장식용 글꼴

글꼴 크기와 단위

font-size 속성으로 텍스트 크기를 지정할 수 있습니다.

body {
    font-size: 16px;  /* 기본 글꼴 크기 */
}

h1 {
    font-size: 2.5em;  /* 기본 크기의 2.5배 */
}

h2 {
    font-size: 2rem;  /* 루트 요소 크기의 2배 */
}

.small-text {
    font-size: 0.8em;  /* 부모 요소 크기의
 0.8배 */
}

주요 크기 단위:

• px: 픽셀 (고정 크기)
• em: 부모 요소의 font-size에 상대적
• rem: 루트 요소(html)의 font-size에 상대적
• %: 부모 요소 크기의 백분율
• vw: 뷰포트 너비의 1/100
• vh: 뷰포트 높이의 1/100

반응형 텍스트를 위한 권장 단위: rem, em, vw

글꼴 스타일과 두께

font-weight (글꼴 두께)

p {
    font-weight: normal;  /* 또는 400 */
}

strong, h1, h2 {
    font-weight: bold;  /* 또는 700 */
}

.light {
    font-weight: 300;
}

.extra-bold {
    font-weight: 800;
}

font-weight 값:

• 숫자 값: 100부터 900까지 (100 단위)
• 키워드: normal, bold, lighter, bolder

font-style (글꼴 스타일)

p {
    font-style: normal;
}

em, .italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

line-height (줄 높이)

텍스트 줄 사이의 간격을 조정합니다. 가독성 향상에 중요합니다.

body {
    line-height: 1.6;  /* 글꼴 크기의 1.6배 (권장) */
}

h1 {
    line-height: 1.2;  /* 제목은 더 좁은 줄 간격 */
}

.tight {
    line-height: 1;
}

letter-spacing (자간)

글자 사이의 간격을 조정합니다.

h1 {
    letter-spacing: -0.5px;  /* 글자 간격 좁히기 */
}

.spaced {
    letter-spacing: 2px;  /* 글자 간격 넓히기 */
}

word-spacing (단어 간격)

단어 사이의 간격을 조정합니다.

p {
    word-spacing: 2px;  /* 단어 간격 넓히기 */
}

텍스트 정렬 및 변형

text-align (텍스트 정렬)

.text-left {
    text-align: left;  /* 왼쪽 정렬 (기본값) */
}

.text-center {
    text-align: center;  /* 가운데 정렬 */
}

.text-right {
    text-align: right;  /* 오른쪽 정렬 */
}

.text-justify {
    text-align: justify;  /* 양쪽 정렬 */
}

text-transform (텍스트 변형)

.uppercase {
    text-transform: uppercase;  /* 모두 대문자 */
}

.lowercase {
    text-transform: lowercase;  /* 모두 소문자 */
}

.capitalize {
    text-transform: capitalize;  /* 각 단어의 첫 글자만 대문자 */
}

text-decoration (텍스트 장식)

a {
    text-decoration: none;  /* 밑줄 제거 */
}

.underline {
    text-decoration: underline;  /* 밑줄 */
}

.line-through {
    text-decoration: line-through;  /* 취소선 */
}

.overline {
    text-decoration: overline;  /* 윗줄 */
}

웹 폰트 활용하기

사용자 시스템에 설치되지 않은 글꼴도 웹 폰트를 통해 사용할 수 있습니다.

Google Fonts 사용하기

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lora:ital@0;1&display=swap" rel="stylesheet">
</head>

body {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
    font-family: 'Lora', serif;
}

@font-face 규칙 사용하기

직접 폰트 파일을 호스팅하는 경우:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/custom-font.woff2') format('woff2'),
         url('fonts/custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.custom-text {
    font-family: 'MyCustomFont', sans-serif;
}

웹 폰트 최적화 팁

• 필요한 폰트 스타일과 가중치만 로드하기
• 적절한 폰트 포맷 사용하기 (WOFF2 > WOFF > TTF/OTF)
• 폰트 로딩 지연을 방지하기 위한 폰트 preloading 고려하기
• 시스템 폰트 대체(fallback) 설정하기

/* 시스템 폰트 스택 사용 예시 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

여백 스타일링

여백은 요소 주위의 공간을 제어하며, 레이아웃과 가독성에 중요한 역할을 합니다. CSS에서는 마진(margin)과 패딩(padding) 두 가지 유형의 여백을 제공합니다.

마진(margin)

마진은 요소의 외부 여백으로, 요소와 주변 요소 사이의 공간을 만듭니다.

.box {
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
}

특징:

• 요소 간의 간격을 조절
• 음수 값 사용 가능 (요소를 겹치게 할 수 있음)
• 인접한 요소 간에는 마진 상쇄(margin collapse) 발생 가능
• 배경색이나 테두리에 영향을 주지 않음

패딩(padding)

패딩은 요소의 내부 여백으로, 콘텐츠와 요소의 테두리 사이의 공간을 만듭니다.

.box {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

특징:

• 요소의 내용과 테두리 사이의 공간 조절
• 음수 값 사용 불가
• 요소의 배경색이 패딩 영역까지 적용됨
• 요소의 실제 크기에 영향을 줌 (box-sizing 속성으로 조절 가능)

여백 축약 표현

마진과 패딩 모두 축약형으로 작성할 수 있습니다:

4개 값 지정 (시계 방향: 위, 오른쪽, 아래, 왼쪽)

.box {
    margin: 10px 20px 15px 5px;
    padding: 10px 20px 15px 5px;
}

3개 값 지정 (위, [오른쪽=왼쪽], 아래)

.box {
    margin: 10px 20px 15px;
    padding: 10px 20px 15px;
}

2개 값 지정 ([위=아래], [오른쪽=왼쪽])

.box {
    margin: 10px 20px;
    padding: 10px 20px;
}

1개 값 지정 (모든 방향 동일)

.box {
    margin: 10px;
    padding: 10px;
}

여백 상쇄(Margin Collapse)

인접한 블록 요소 간의 수직 마진은 상쇄됩니다. 이때 더 큰 마진 값이 적용됩니다.

.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

위 예제에서 두 박스 사이 간격은 30px이 됩니다 (30px과 20px 중 더 큰 30px이 적용).

마진 상쇄를 방지하는 방법:

1. 요소 사이에 border 추가
2. 요소 사이에 padding 추가
3. 부모 요소에 overflow: hidden 설정
4. 부모 요소에 display: flex 또는 display: grid 설정

여백 사용 팁

일관된 여백 사용하기

8px 또는 16px를 기본 단위로 하는 일관된 여백 시스템을 구축하는 것이 좋습니다.

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
}

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
/* 등등 */

요소 중앙 정렬

좌우 마진을 auto로 설정하여 블록 요소를 수평 중앙에 배치할 수 있습니다.

.center-block {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    /* 또는 margin: 0 auto; */
}

box-sizing 속성 사용하기

기본적으로 width와 height 속성은 패딩과 테두리를 제외한 콘텐츠 영역의 크기만 지정합니다. box-sizing: border-box를 설정하면 패딩과 테두리를 포함한 전체 크기를 지정할 수 있습니다.

* {
    box-sizing: border-box;
}

.box {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    /* 전체 너비는 여전히 300px (콘텐츠 + 패딩 + 테두리) */
}

테두리 스타일링

테두리는 요소의 경계를 정의하고 시각적으로 구분하는 데 사용됩니다.

테두리 두께, 스타일, 색상

테두리의 세 가지 주요 속성은 두께, 스타일, 색상입니다.

.border-example {
    /* 개별 속성 */
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

테두리 스타일 (border-style)

.border-styles {
    border-style: solid;  /* 실선 */
    border-style: dashed;  /* 파선 */
    border-style: dotted;  /* 점선 */
    border-style: double;  /* 이중선 */
    border-style: groove;  /* 홈이 파인 효과 */
    border-style: ridge;   /* 튀어나온 효과 */
    border-style: inset;   /* 내부로 들어간 효과 */
    border-style: outset;  /* 외부로 튀어나온 효과 */
    border-style: none;    /* 테두리 없음 */
    border-style: hidden;  /* 테두리 없음 (테이블에서 사용) */
}

단일 방향 테두리

특정 방향에만 테두리를 적용할 수 있습니다:

.box {
    border-top: 1px solid #ddd;
    border-right: 2px dashed #999;
    border-bottom: 3px double #333;
    border-left: 4px dotted #666;
}

또는 개별 속성 지정:

.box {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: red;
}

테두리 축약 표현

테두리 속성들을 하나로 축약하여 작성할 수 있습니다:

.box {
    border: 1px solid #333;
}

순서는 중요하지 않지만 일반적으로 width style color 순으로 작성합니다.

둥근 테두리(border-radius)

border-radius 속성으로 테두리의 모서리를 둥글게 만들 수 있습니다:

.rounded {
    border-radius: 5px;  /* 모든 모서리 */
}

.pill {
    border-radius: 50px;  /* 알약 모양 */
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;  /* 원형 */
}

개별 모서리 지정

.custom-corners {
    /* 시계 방향: 좌상, 우상, 우하, 좌하 */
    border-radius: 10px 20px 30px 40px;
}

/* 또는 개별 속성 사용 */
.custom-corners-alt {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

타원형 모서리

두 값을 지정하여 타원형 모서리를 만들 수 있습니다:

.elliptical {
    /* 수평 반경 / 수직 반경 */
    border-radius: 20px / 10px;
}

테두리 이미지

border-image 속성을 사용하여 이미지로 테두리를 만들 수 있습니다:

.fancy-border {
    border: 15px solid transparent;
    border-image: url('border-pattern.png') 30 round;
}

완전한 제어를 위한 개별 속성:

.detailed-border-image {
    border-image-source: url('border-pattern.png');
    border-image-slice: 27;
    border-image-width: 15px;
    border-image-outset: 5px;
    border-image-repeat: round;
}

테두리 활용 팁

한쪽 테두리로 구분선 만들기

.divider {
    border-bottom: 1px solid #eee;
    margin: 20px 0;
}

.sidebar {
    border-left: 3px solid #3498db;
    padding-left: 15px;
}

.callout {
    border-left: 5px solid #f1c40f;
    background-color: #fffde7;
    padding: 15px;
}

테두리 없이 윤곽선(outline) 사용하기

outline 속성은 테두리와 유사하지만 요소 크기에 영향을 주지 않고 마진 영역에 그려집니다:

.focus-element:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;  /* 요소와 윤곽선 사이 간격 */
}

다중 테두리 효과

그림자를 활용한 다중 테두리 효과:

.multi-border {
    box-shadow:
        0 0 0 5px #fff,
        0 0 0 6px #3498db,
        0 0 0 12px #fff,
        0 0 0 13px #e74c3c;
}

배경 스타일링

배경은 요소의 내용 뒤에 표시되는 영역으로, 색상, 이미지, 그라데이션 등으로 스타일링할 수 있습니다.

배경색

background-color 속성으로 배경색을 지정합니다:

.box {
    background-color: #f0f0f0;
}

.semi-transparent {
    background-color: rgba(52, 152, 219, 0.5);  /* 반투명 파란색 */
}

.gradient-bg {
    background-color: hsla(210, 90%, 50%, 0.8);  /* 반투명 파란색 (HSL) */
}

배경 이미지

background-image 속성으로 배경 이미지를 설정합니다:

.bg-image {
    background-image: url('background.jpg');
}

배경 이미지 반복

background-repeat 속성으로 이미지 반복 방식을 설정합니다:

.repeat {
    background-repeat: repeat;  /* 기본값: 가로 세로 모두 반복 */
}

.repeat-x {
    background-repeat: repeat-x;  /* 가로 방향으로만 반복 */
}

.repeat-y {
    background-repeat: repeat-y;  /* 세로 방향으로만 반복 */
}

.no-repeat {
    background-repeat: no-repeat;  /* 반복 없음 */
}

배경 이미지 위치

background-position 속성으로 이미지 위치를 설정합니다:

.bg-position {
    background-position: center;  /* 중앙 */
}

.bg-position-values {
    /* 키워드 조합 */
    background-position: top left;
    background-position: bottom right;

    /* 퍼센트 값 */
    background-position: 25% 75%;

    /* 픽셀 값 */
    background-position: 100px 200px;
}

배경 이미지 크기

background-size 속성으로 이미지 크기를 조절합니다:

.bg-size {
    background-size: 300px 200px;  /* 너비 300px, 높이 200px */
    background-size: 50% 50%;      /* 요소 크기의 50% */
    background-size: cover;        /* 요소를 완전히 덮음 (비율 유지) */
    background-size: contain;      /* 요소 안에 완전히 표시 (비율 유지) */
}

배경 이미지 고정

background-attachment 속성으로 스크롤 시 배경 이미지의 동작을 설정합니다:

.bg-fixed {
    background-attachment: fixed;  /* 뷰포트에 고정 (스크롤해도 움직이지 않음) */
}

.bg-scroll {
    background-attachment: scroll;  /* 요소와 함께 스크롤 (기본값) */
}

.bg-local {
    background-attachment: local;  /* 요소 내 콘텐츠와 함께 스크롤 */
}

배경 속성 제어하기

background-clip

배경이 어디까지 확장될지 설정합니다:

.bg-clip {
    background-clip: border-box;   /* 테두리까지 확장 (기본값) */
    background-clip: padding-box;  /* 패딩 영역까지만 확장 */
    background-clip: content-box;  /* 콘텐츠 영역만 */
    background-clip: text;         /* 텍스트 영역만 (텍스트 색상은 transparent여야 함) */
}

background-origin

배경 이미지의 원점(시작점)을 설정합니다:

.bg-origin {
    background-origin: padding-box;  /* 패딩 영역부터 시작 (기본값) */
    background-origin: border-box;   /* 테두리부터 시작 */
    background-origin: content-box;  /* 콘텐츠 영역부터 시작 */
}

그라데이션 배경

CSS 그라데이션은 두 개 이상의 색상이 부드럽게 전환되는 배경을 만듭니다.

선형 그라데이션

.linear-gradient {
    /* 위에서 아래로 */
    background-image: linear-gradient(#3498db, #2ecc71);

    /* 방향 지정 */
    background-image: linear-gradient(to right, #3498db, #2ecc71);
    background-image: linear-gradient(to bottom right, #3498db, #2ecc71);

    /* 각도 지정 */
    background-image: linear-gradient(45deg, #3498db, #2ecc71);

    /* 다중 색상 */
    background-image: linear-gradient(#3498db, #8e44ad, #2ecc71);

    /* 색상 정지점 */
    background-image: linear-gradient(#3498db, #3498db 30%, #2ecc71 70%, #2ecc71);
}

원형 그라데이션

.radial-gradient {
    /* 기본 (중앙에서 바깥으로) */
    background-image: radial-gradient(#3498db, #2ecc71);

    /* 모양 지정 */
    background-image: radial-gradient(circle, #3498db, #2ecc71);
    background-image: radial-gradient(ellipse, #3498db, #2ecc71);

    /* 위치 지정 */
    background-image: radial-gradient(at top left, #3498db, #2ecc71);

    /* 크기 지정 */
    background-image: radial-gradient(circle closest-side, #3498db, #2ecc71);
    background-image: radial-gradient(circle farthest-corner, #3498db, #2ecc71);
}

반복 그라데이션

.repeating-gradient {
    /* 반복 선형 그라데이션 */
    background-image: repeating-linear-gradient(45deg, #3498db, #3498db 10px, #2ecc71 10px, #2ecc71 20px);

    /* 반복 원형 그라데이션 */
    background-image: repeating-radial-gradient(circle, #3498db, #3498db 10px, #2ecc71 10px, #2ecc71 20px);
}

다중 배경

여러 배경을 층(layer)으로 쌓을 수 있습니다. 첫 번째로 나열된 배경이 가장 위에 표시됩니다.

.multiple-backgrounds {
    background: 
        url('logo.png') no-repeat top left,
        url('pattern.png') repeat,
        linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5)),
        url('background.jpg') no-repeat center / cover;
}

배경 축약 표현

background 속성으로 여러 속성을 한 번에 설정할 수 있습니다:

.bg-shorthand {
    background: #f0f0f0 url('pattern.png') no-repeat center / cover fixed;
}

축약 순서(순서 변경 가능하지만 일반적으로):

• background-color
• background-image
• background-repeat
• background-position / background-size (슬래시로 구분)
• background-attachment

박스 시각 효과

요소의 시각적 효과를 강화하는 추가 속성들을 알아봅시다.

그림자 효과(box-shadow)

box-shadow 속성으로 요소에 그림자를 추가할 수 있습니다:

.shadow-basic {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

값의 순서: x-offset y-offset blur-radius spread-radius color

다양한 그림자 효과

/* 기본 그림자 */
.shadow-simple {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 내부 그림자 */
.shadow-inset {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 다중 그림자 */
.shadow-multiple {
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.2),
        0 15px 40px rgba(0, 0, 0, 0.1);
}

/* 테두리같은 그림자 */
.shadow-outline {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
}

/* 입체적인 효과 */
.shadow-3d {
    box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.12),
        0 2px 2px rgba(0, 0, 0, 0.12),
        0 4px 4px rgba(0, 0, 0, 0.12),
        0 8px 8px rgba(0, 0, 0, 0.12);
}

불투명도(opacity)

opacity 속성으로 요소의 투명도를 조절할 수 있습니다:

.fully-opaque {
    opacity: 1;  /* 완전히 불투명 (기본값) */
}

.semi-transparent {
    opacity: 0.5;  /* 반투명 */
}

.fully-transparent {
    opacity: 0;  /* 완전히 투명 (보이지 않음) */
}

주의: opacity 속성은 요소의 모든 부분(텍스트, 배경, 테두리 등)에 적용됩니다. 배경만 투명하게 하려면 rgba() 또는 hsla() 색상 값을 사용하세요.

실전 스타일링 예제

여러 스타일링 속성을 조합하여 실제 활용 가능한 컴포넌트를 만들어 봅시다.

카드 컴포넌트 디자인

<div class="card">
    <img src="image.jpg" alt="카드 이미지" class="card-image">
    <div class="card-content">
        <h3 class="card-title">카드 제목</h3>
        <p class="card-text">카드에 표시될 텍스트 내용입니다. 간결하고 명확한 메시지를 담습니다.</p>
        <a href="#" class="card-button">자세히 보기</a>
    </div>
</div>

.card {
    width: 300px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-title {
    color: #333;
    font-size: 1.25rem;
    margin: 0 0 10px 0;
}

.card-text {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.card-button {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.3s;
}

.card-button:hover {
    background-color: #2980b9;
}

버튼 디자인

<button class="btn btn-primary">기본 버튼</button>
<button class="btn btn-secondary">보조 버튼</button>
<button class="btn btn-danger">위험 버튼</button>
<button class="btn btn-outline">테두리 버튼</button>

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary {
    background-color: #3498db;
    color: white;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-secondary {
    background-color: #95a5a6;
    color: white;
}

.btn-secondary:hover {
    background-color: #7f8c8d;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.btn-outline {
    background-color: transparent;
    color: #3498db;
    border: 2px solid #3498db;
}

.btn-outline:hover {
    background-color: #3498db;
    color: white;
}

폼 요소 스타일링

<form class="styled-form">
    <div class="form-group">
        <label for="name">이름</label>
        <input type="text" id="name" class="form-control" placeholder="이름을 입력하세요">
    </div>

    <div class="form-group">
        <label for="email">이메일</label>
        <input type="email" id="email" class="form-control" placeholder="이메일을 입력하세요">
    </div>

    <div class="form-group">
        <label for="message">메시지</label>
        <textarea id="message" class="form-control" rows="5" placeholder="메시지를 입력하세요"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">제출하기</button>
</form>

.styled-form {
    max-width: 500px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
    outline: none;
}

.form-control::placeholder {
    color: #aaa;
}

textarea.form-control {
    resize: vertical;
}

스타일링과 함께 사용하면 좋은 HTML 태그

CSS 스타일링을 효과적으로 적용하기 위한 HTML 태그 구조를 알아봅시다.

1. 시맨틱 구조 태그

<header>
    <!-- 헤더 내용 -->
</header>

<nav>
    <!-- 네비게이션 메뉴 -->
</nav>

<main>
    <article>
        <!-- 독립적인 콘텐츠 -->
        <section>
            <!-- 섹션별 콘텐츠 -->
        </section>
    </article>

    <aside>
        <!-- 사이드바 내용 -->
    </aside>
</main>

<footer>
    <!-- 푸터 내용 -->
</footer>

2. 텍스트 서식 태그

<h1>주제 제목</h1>
<h2>부제목</h2>
<p>단락 내용</p>

<strong>강조된 텍스트</strong>
<em>기울임꼴 텍스트</em>

<blockquote>
    <p>인용된 내용</p>
    <cite>출처</cite>
</blockquote>

<code>인라인 코드</code>
<pre><code>코드 블록</code></pre>

<mark>강조 표시된 텍스트</mark>

3. 목록 태그

<!-- 순서가 없는 목록 -->
<ul class="feature-list">
    <li>기능 항목 1</li>
    <li>기능 항목 2</li>
</ul>

<!-- 순서가 있는 목록 -->
<ol class="steps">
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
</ol>

<!-- 정의 목록 -->
<dl class="glossary">
    <dt>용어</dt>
    <dd>용어에 대한 설명</dd>
</dl>

4. 이미지 및 미디어 태그

<figure>
    <img src="image.jpg" alt="이미지 설명" class="responsive-image">
    <figcaption>이미지 캡션</figcaption>
</figure>

<video controls class="video-player">
    <source src="video.mp4" type="video/mp4">
</video>

5. 폼 태그

<form class="contact-form">
    <fieldset>
        <legend>개인 정보</legend>

        <div class="form-group">
            <label for="name">이름</label>
            <input type="text" id="name" name="name" class="form-control">
        </div>

        <div class="form-check">
            <input type="checkbox" id="subscribe" name="subscribe" class="form-check-input">
            <label for="subscribe" class="form-check-label">뉴스레터 구독</label>
        </div>
    </fieldset>

    <button type="submit" class="btn btn-primary">제출</button>
</form>

6. 테이블 태그

<table class="data-table">
    <caption>월별 판매 데이터</caption>
    <thead>
        <tr>
            <th>월</th>
            <th>판매량</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1월</td>
            <td>120</td>
        </tr>
        <!-- 추가 행 -->
    </tbody>
    <tfoot>
        <tr>
            <th>합계</th>
            <td>1,200</td>
        </tr>
    </tfoot>
</table>

7. 구분 및 그룹화 태그

<div class="container">
    <!-- 콘텐츠 컨테이너 -->
</div>

<span class="badge">신규</span>

<hr class="divider">

<details>
    <summary>더 보기</summary>
    <p>추가 내용이 여기에 표시됩니다.</p>
</details>

CSS 변수를 활용한 스타일링

CSS 변수(사용자 정의 속성)를 사용하면 재사용 가능한 값을 정의하고 일관된 디자인 시스템을 구축할 수 있습니다.

:root {
    /* 색상 변수 */
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-color: #333;
    --light-text-color: #666;
    --border-color: #ddd;
    --background-color: #f9f9f9;

    /* 폰트 변수 */
    --heading-font: 'Noto Sans KR', sans-serif;
    --body-font: 'Nanum Gothic', sans-serif;

    /* 여백 변수 */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* 테두리 변수 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;

    /* 그림자 변수 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* 변수 사용 예시 */
.card {
    font-family: var(--body-font);
    color: var(--text-color);
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.card-title {
    font-family: var(--heading-font);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    color: white;
}

마치며

이 글에서 우리는 CSS의 가장 기본적인 스타일링 요소인 색상, 글꼴, 여백, 테두리, 배경에 대해 살펴보았습니다. 이 요소들을 효과적으로 활용하면 시각적으로 매력적이고 사용자 친화적인 웹사이트를 만들 수 있습니다.

CSS 스타일링의 핵심 원칙을 요약하면:

1. 일관성: 색상, 글꼴, 여백 등에 일관된 시스템을 적용하세요.
2. 계층 구조: 시각적 계층 구조를 만들어 사용자 경험을 개선하세요.
3. 접근성: 충분한 색상 대비와 가독성 좋은 글꼴을 사용하세요.
4. 응집성: 관련 스타일을 그룹화하고, CSS 변수를 활용하세요.
5. 유지보수성: 재사용 가능한 클래스와 컴포넌트를 만드세요.

이러한 기본 스타일링 요소를 마스터한 후에는 Flexbox, Grid, 애니메이션, 반응형 디자인 등 더 고급 CSS 기능을 학습하여 웹 디자인 능력을 더욱 향상시킬 수 있습니다.

다음 글에서는 CSS 박스 모델에 대해 자세히 알아보겠습니다. 박스 모델은 모든 HTML 요소가 어떻게 공간을 차지하고 서로 관계를 맺는지 이해하는 데 중요한 개념입니다.

CSS 스타일링의 세계는 광범위하고 흥미로우니, 계속해서 실험하고 배우는 자세를 유지하세요!