색상과 배경 & CSS 박스 모델

#웹에서 색상 표현하기

#1. 색상 이름 (Color Names)

가장 직관적인 방법으로, 브라우저가 미리 정의해 둔 색상 이름을 사용한다. (red, blue, black, lightgray 등) 사용하기 쉽지만, 표현할 수 있는 색상의 수가 제한적이다.

h1 { color: steelblue; }

#2. 16진수 (Hexadecimal)

# 기호와 함께 빛의 삼원색(Red, Green, Blue)을 16진수로 표현한다. #RRGGBB 형태로 각 색상이 00(0)부터 FF(255)까지의 값을 가진다. 가장 널리 사용되는 방식이다.

/* #RRGGBB */
.header { background-color: #FFFFFF; } /* 흰색 */
.footer { background-color: #333333; } /* 어두운 회색 */

/* RR, GG, BB 값이 모두 같을 경우 #RGB 형태로 축약 가능 */
p { color: #F00; } /* #FF0000 (빨간색)과 동일 */

#3. rgb와 rgba

rgb() 함수를 사용하여 Red, Green, Blue 값을 0~255 사이의 숫자로 표현한다. rgba()는 여기에 alpha(투명도, 0.0~1.0) 채널이 추가된 형태로, 0.0은 완전 투명, 1.0은 완전 불투명을 의미한다.

/* rgb(red, green, blue) */
h2 { color: rgb(68, 68, 68); }

/* rgba(red, green, blue, alpha) */
.overlay { background-color: rgba(0, 0, 0, 0.5); } /* 50% 투명한 검은색 */

/* 모던 문법 (CSS Color Module Level 4): 쉼표 없이 공백, 알파는 슬래시 뒤에 */
.modern { background-color: rgb(0 0 0 / 50%); }

#4. hsl과 hsla

hsl() 함수는 색상(Hue), 채도(Saturation), 명도(Lightness)를 이용해 색을 표현하여 좀 더 직관적인 색상 조절이 가능하다.

• Hue: 색상환의 각도 (0~360)

• Saturation: 채도 (0%~100%)

• Lightness: 밝기 (0%~100%)

/* hsl(hue, saturation, lightness) */
.button { background-color: hsl(240, 100%, 50%); } /* 파란색 */

/* hsla(hue, saturation, lightness, alpha) */
.button:hover { background-color: hsla(240, 100%, 50%, 0.8); }

같은 색을 네 가지 방식으로 — 결과는 모두 동일

steelblue
(이름)

#4682B4
(16진수)

rgb(70,130,180)

hsl(207,44%,49%)

투명도(alpha) 비교 — 뒤 배경이 비쳐 보이는 정도:

#배경 색과 배경 이미지

• background-color: 배경 색상을 지정한다.

• background-image: 배경으로 사용할 이미지의 경로를 지정한다. url() 함수를 사용한다.

• background-repeat: 배경 이미지의 반복 여부를 지정한다. (repeat, no-repeat, repeat-x, repeat-y)

• background-position: 배경 이미지의 시작 위치를 지정한다.

• background-size: 배경 이미지의 크기를 조절한다.

  • auto: 원본 크기

  • cover: 요소를 완전히 덮도록 이미지를 확대/축소 (이미지 잘릴 수 있음). 히어로 이미지나 카드 상단 배경에 적합.

  • contain: 이미지가 잘리지 않도록 요소 안에 포함되게 확대/축소 (여백 생길 수 있음). 로고처럼 원본이 모두 보여야 하는 경우에 적합.

  • 100px 200px: 너비와 높이를 직접 지정

• background-attachment: 페이지 스크롤 시 배경 이미지의 움직임 여부를 지정한다. (scroll: 같이 스크롤, fixed: 고정)

• background-clip, background-origin: 배경을 적용할 범위를 테두리, 안쪽 여백, 콘텐츠 중 어디까지로 할지 정하는 고급 속성이다.

예시 코드 (Shorthand background 속성 활용)

.hero-section {
    background-color: #f0f0f0;
    background-image: url('images/hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;

    /* 위의 5가지 속성을 'background' 단축 속성으로 표현 */
    /* background: #f0f0f0 url('images/hero.jpg') no-repeat center center/cover fixed; */
}

#그라데이션 효과로 배경 꾸미기

두 가지 이상의 색상이 점진적으로 변하는 효과를 배경 이미지로 적용할 수 있다.

#선형 그라데이션 (Linear Gradient)

직선 방향으로 색상이 변한다. linear-gradient() 함수를 사용하며, 방향과 색상을 지정한다.

.box {
    /* 기본: 위에서 아래로 */
    background-image: linear-gradient(blue, pink);

    /* 방향 지정: to right, to left, to top right 등 */
    background-image: linear-gradient(to right, #ff7e5f, #feb47b);

    /* 각도 지정 */
    background-image: linear-gradient(45deg, #6a11cb, #2575fc);
}

#원형 그라데이션 (Radial Gradient)

중심점에서 원형 또는 타원형으로 색상이 변한다. radial-gradient() 함수를 사용한다.

.circle-box {
    background-image: radial-gradient(yellow, orange, red);
    background-image: radial-gradient(circle, white, skyblue);
}

위→아래

to right

45deg

radial

#CSS와 박스 모델

모든 HTML 요소는 사각형의 박스(box) 형태로 렌더링되며, 이 박스의 구성 요소를 박스 모델이라고 한다.

• Content: 텍스트나 이미지가 표시되는 실제 내용 영역

• Padding: 콘텐츠와 테두리(Border) 사이의 안쪽 여백

• Border: 테두리

• Margin: 테두리 바깥의 다른 요소와의 간격을 나타내는 바깥 여백

네 영역은 양파처럼 content(가장 안쪽) → padding → border → margin(가장 바깥쪽) 순으로 겹겹이 감싸는 구조다.

margin (바깥 여백)

padding (안쪽 여백) · 갈색 테두리가 border

content
(실제 내용)

#Block 요소 vs Inline 요소

Block 요소 (div, p, h1 등):

• 항상 새로운 줄에서 시작하고, 사용 가능한 너비 전체를 차지한다.

• width, height, margin, padding 속성을 모두 사용할 수 있다.

Inline 요소 (span, a, img 등):

• 줄을 바꾸지 않고 다른 인라인 요소와 같은 줄에 배치된다.

• 콘텐츠의 너비만큼만 차지한다.

• width, height 속성이 적용되지 않으며, margin과 padding은 좌우에만 적용된다.

• 예외: <img>, <video>, <iframe> 등 일부 인라인 요소는 교체 요소(replaced element)로, width/height가 적용된다.

Inline-block 요소 (display: inline-block로 지정):

• 인라인 요소처럼 줄을 바꾸지 않고 옆으로 나란히 배치된다.

• 동시에 블록 요소처럼 width, height, 상하 margin/padding까지 모두 적용된다.

• 즉 inline(나란히)의 배치 + block(크기 지정)의 장점을 합친 형태로, 메뉴·버튼·태그·카드를 가로로 나열할 때 자주 쓴다.

세 가지를 한눈에 비교하면 다음과 같다.

#display 속성

요소의 기본 표시 유형을 변경할 수 있다.

• block: 요소를 블록 요소처럼 표시한다.

• inline: 요소를 인라인 요소처럼 표시한다.

• inline-block: 인라인 요소처럼 배치되지만, 블록 요소처럼 width, height, margin을 모두 가질 수 있다.

• none: 요소를 화면에서 완전히 사라지게 한다.

• flex, grid: 레이아웃을 위한 값들. Flexbox 단원에서 자세히 다룬다.

block — 각자 새 줄에서 시작하고 가로 전체를 차지

block 요소 A

block 요소 B

inline — 줄을 바꾸지 않고 옆으로 나란히 (width/height 무시됨)

inline A inline B inline C

inline-block — 나란히 배치되면서 width/height도 적용됨 (각 120px)

box A box B box C

#직접 해보기: inline-block으로 가로 메뉴 만들기

아래 <li> 메뉴는 기본적으로 세로로 쌓인다(li는 block 요소). 이를 가로로 나란히 놓이면서 너비가 균일한 버튼이 되도록 CSS를 작성해 보자.

시작 코드 — 아래 HTML을 그대로 두고 <style>만 채운다.

<ul class="menu">
    <li>홈</li>
    <li>소개</li>
    <li>메뉴</li>
    <li>문의</li>
</ul>

<style>
    /* 1) 목록 점(•) 제거, 들여쓰기(padding) 제거 */
    /* 2) 각 li를 가로로 나란히 + 너비 100px로 균일하게 */
    /* 3) 버튼처럼 보이도록 배경색·가운데 정렬·안쪽 여백 추가 */
</style>

요구사항

1. .menu의 목록 점을 없애고(list-style: none) 기본 들여쓰기를 제거한다(padding: 0).

2. .menu li를 가로로 나란히 배치하고(display: inline-block), 너비를 100px로 균일하게 맞춘다.

3. 각 항목을 버튼처럼: 배경색, text-align: center, 상하/좌우 padding, 항목 사이 간격(margin)을 준다.

.menu {
    list-style: none;   /* 목록 점 제거 */
    padding: 0;         /* 기본 들여쓰기 제거 */
}
.menu li {
    display: inline-block;  /* 가로로 나란히 + 크기 지정 가능 */
    width: 100px;           /* 너비 균일 (inline이면 무시됨!) */
    padding: 10px 0;
    margin-right: 4px;
    background-color: #5e35b1;
    color: white;
    text-align: center;
    border-radius: 6px;
}

#BORDER 테두리 관련 속성들

• border-style: 테두리의 선 스타일을 지정한다. (solid, dashed, dotted, double 등)

• border-width: 테두리의 두께를 지정한다.

• border-color: 테두리의 색상을 지정한다.

• Shorthand border: border: [width] [style] [color]; 순서로 한 번에 지정한다.

• border-radius: 테두리를 둥글게 깎는 효과를 준다. 값이 클수록 더 둥글어진다. 50%로 지정하면 원을 만들 수 있다.

• box-shadow: 박스에 그림자 효과를 준다. box-shadow: [x-offset] [y-offset] [blur] [spread] [color]; 앞에 inset 키워드를 붙이면 안쪽 그림자가 된다 (누름 효과 등에 활용).

.my-box {
    border: 2px solid #333;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

solid

dashed

dotted

double

radius:12px

radius:50%

box-shadow

#여백을 조절하는 속성들

#padding (안쪽 여백)

콘텐츠와 테두리 사이의 간격이다. 배경색과 이미지는 padding 영역까지 적용된다.

.box {
    /* 4방향 모두 20px */
    padding: 20px;

    /* 상하 10px, 좌우 20px */
    padding: 10px 20px;

    /* 상 10px, 좌우 20px, 하 30px */
    padding: 10px 20px 30px;

    /* 상 10px, 우 20px, 하 30px, 좌 40px (시계방향) */
    padding: 10px 20px 30px 40px;
}

#margin (바깥 여백)

요소의 테두리 바깥쪽 영역으로, 다른 요소와의 간격을 조절한다. padding과 마찬가지로 값을 1~4개 사용하여 4방향을 지정할 수 있다.

.box {
    margin: 20px;
}

#마진 중첩 현상 (Margin Collapsing)

수직 방향으로 인접한 두 블록 요소의 margin이 만날 때, 둘 중 더 큰 값의 margin만 적용되는 현상이다. 좌우 margin에는 발생하지 않는다.

<div class="box1" style="margin-bottom: 20px;">Box 1</div>
<div class="box2" style="margin-top: 30px;">Box 2</div>

20px + 30px = 50px가 아니라, 둘 중 큰 30px만 실제 간격이 된다.

Box 1 (margin-bottom: 20px)

실제 간격 = max(20, 30) = 30px

Box 2 (margin-top: 30px)

회피 방법

• 부모에 padding이나 border를 1px라도 주면 중첩이 해제됨

• 부모를 display: flex 또는 display: grid로 만들면 마진 중첩이 발생하지 않음

• gap 속성(flex/grid 안에서)으로 간격을 주면 해결이 깔끔하고 안전함

#유용한 색상 키워드

• transparent: 완전 투명. background-color: transparent; 처럼 쓴다.

• currentColor: 현재 요소의 color 값을 참조한다. 텍스트 색과 테두리 색을 함께 맞추고 싶을 때 유용.

.button {
    color: steelblue;
    border: 2px solid currentColor; /* steelblue로 자동 적용 */
}

#종합 실습: 나만의 프로필 카드 만들기

지금까지 배운 속성들을 총동원하여 세련된 프로필 카드를 만들어 본다.

#요구사항

1. 전체 페이지의 배경색을 hsl(210, 30%, 95%)로 지정한다.

2. 프로필 카드의 너비를 300px로 하고, margin을 이용해 페이지 중앙에 배치한다.

3. 카드에 10px의 border-radius와 rgba(0, 0, 0, 0.1) 색상의 부드러운 box-shadow를 적용한다.

4. 카드 상단 헤더 영역은 linear-gradient를 이용해 #2193b0에서 #6dd5ed로 변하는 배경을 적용한다.

5. 프로필 이미지는 원형으로 만들고(border-radius: 50%), 3px 두께의 흰색 테두리(border)를 추가한다.

6. 카드 콘텐츠 영역에는 30px의 padding을 적용한다.

#완성 코드

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>프로필 카드</title>
    <link rel="stylesheet" href="profile_style.css">
</head>
<body>
    <div class="card">
        <div class="card-header"></div>
        <div class="card-body">
            <img src="profile.jpg" alt="프로필 사진" class="profile-img">
            <h2 class="name">김코딩</h2>
            <p class="title">프론트엔드 개발자</p>
            <p class="description">
                사용자 경험을 중시하며, 깔끔하고 직관적인 웹을 만드는 것을 좋아합니다.
            </p>
        </div>
    </div>
</body>
</html>

profile_style.css

body {
    font-family: sans-serif;
    background-color: hsl(210, 30%, 95%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.card {
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}

.card-header {
    height: 120px;
    background-image: linear-gradient(to right, #2193b0, #6dd5ed);
}

.card-body {
    padding: 30px;
    padding-top: 0;
}

.profile-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
    margin-top: -60px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.name {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 24px;
}

.title {
    color: #777;
    margin: 0;
    font-size: 16px;
}

.description {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

#김코딩

프론트엔드 개발자

사용자 경험을 중시하며, 깔끔하고 직관적인 웹을 만드는 것을 좋아합니다.