CSS 색상과 배경, 텍스트 스타일링

이번 장에서는 CSS를 활용하여 웹페이지의 시각적 디자인을 완성하는 방법을 학습한다. 앞서 학습한 CSS 선택자와 박스 모델을 바탕으로 색상, 배경, 글꼴, 텍스트 속성을 적용하고, Font Awesome 아이콘을 활용하여 사용자 인터페이스를 구성한다.

특히 첨부한 교재의 프로필 카드 예제를 확장하여 나만의 디지털 명함(Digital Profile Card) 을 제작하는 미니프로젝트를 진행한다.

학습 목표

• CSS 색상 표현 방식과 RGB, HEX, HSL의 원리를 이해한다.
• 배경색, 배경 이미지, 그라데이션을 활용하여 웹페이지를 디자인한다.
• 웹폰트와 텍스트 속성을 활용하여 정보의 시각적 계층을 표현한다.
• Font Awesome 아이콘을 웹페이지에 적용한다.
• 학습한 CSS 속성을 종합하여 프로필 카드 웹페이지를 제작한다.

---

 

Section 01. CSS 색상 표현 방법

1.1 웹에서 색상을 표현하는 원리

디지털 디스플레이는 일반적으로 빨강(Red), 초록(Green), 파랑(Blue)의 빛을 조합하여 다양한 색상을 표현한다. 이를 RGB 가산 혼합이라고 한다.

1.2 CSS 색상 표현의 종류

표현방법	작성예제	특징
색상 이름	red	미리 정의된 색상명
HEX	#FF5733	16진수 색상 코드
RGB	rgb(255, 87, 51)	R, G, B 값 지정
RGBA	rgba(255, 87, 51, 0.5)	RGB와 투명도
HSL	hsl(14, 100%, 60%)	색상·채도·명도
HSLA	hsla(14, 100%, 60%, 0.5)	HSL과 투명도

현대 CSS에서는 rgb(255 87 51 / 50%), hsl(14 100% 60% / 0.5)와 같은 공백 구분 문법도 지원한다.

1.3 HEX 색상의 구조

HEX 색상은 #RRGGBB 형식으로 작성한다. 각각의 두 자리는 00부터 FF까지의 16진수이며, 10진수로는 0부터 255까지의 값이다.

1.4 RGB와 HSL의 이해

RGB는 빨강, 초록, 파랑의 강도를 각각 0~255로 지정한다. HSL은 색상(Hue: 0~360도), 채도(Saturation: 0~100%), 명도(Lightness: 0~100%)를 이용한다.

✏️ 실습 01. 색상과 투명도 비교

.box1 {
    background-color: #6366f1;
}

.box2 {
    background-color: rgb(99, 102, 241);
}

.box3 {
    background-color: rgba(99, 102, 241, 0.5);
}

세 박스 중 첫 번째와 두 번째의 배경색은 동일하다. 세 번째는 알파값이 0.5이므로 뒤쪽 배경이 일부 비쳐 보인다.

 

---

Section 02. CSS 백그라운드 스타일링

배경 스타일링은 웹페이지의 분위기와 콘텐츠의 가독성을 결정하는 요소이다. CSS에서는 단색 배경뿐 아니라 이미지, 반복 패턴, 위치, 크기, 그라데이션을 지정할 수 있다.

2.1 주요 배경 속성

CSS 속성	기능	대표값
background-color	배경색	#f3f4f6
background-image	이미지 또는 그라데이션	url(), linear-gradient()
background-repeat	이미지 반복	no-repeat, repeat
background-size	이미지 크기	cover, contain
background-position	이미지 위치	center, top right
background-attachment	스크롤 시 배경 동작	scroll, fixed
background	여러 배경 속성의 단축 표기	색상, 이미지, 위치 등

✏️ body 에 배경색을 적용 해 보자.

body {background-color: #f3f4f6;}

---

2.2 배경 이미지 설정

✏️박스를 하나 만들고, 배경색을 적용 해 보자. 

<div class="box bgR">배경색</div>

/* 배경 */
.bgR{background-color:rgb(200, 27, 27);}
.bgG{background-color:rgb(15, 221, 25);}
.bgB{background-color:rgb(78, 39, 217);}

✏️박스를 하나 만들고,   배경이미지를 적용 해 보자.

    <h3>배경이미지</h3>
    <div class="hero"> Web Programming </div>

.hero{
width:1024px;
height:600px;
background-image: url('../images/bg01.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

• cover는 영역을 빈 공간 없이 채우기 때문에 이미지의 일부가 잘릴 수 있다.
• contain은 이미지 전체가 보이도록 조절하지만 빈 공간이 남을 수 있다.

 

background-repeat : 배경 이미지 반복

.hero {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
}

repeat	가로와 세로 모두 반복
repeat-x	가로 방향으로만 반복
repeat-y	세로 방향으로만 반복
no-repeat	반복하지 않음

background-position : 배경 이미지 위치

배경 이미지를 반복하지 않으면 이미지가 요소의 어느 위치에 나타날 것인지 지정하여야 한다.

background-position: center;

 

left top	왼쪽 위
center top	가운데 위
right top	오른쪽 위
left center	왼쪽 가운데
center center	정중앙
right center	오른쪽 가운데
left bottom	왼쪽 아래
center bottom	가운데 아래
right bottom	오른쪽 아래

예를 들어 다음 코드는 이미지를 영역의 가운데에 배치한다.

.hero {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}

center center는 다음과 같이 하나만 작성하여도 동일하다.

background-position: center;

숫자로 직접 위치 지정하기

다음과 같이 픽셀이나 퍼센트 값도 사용할 수 있다.

background-position: 50px 100px;

첫 번째 값은 가로 위치이고 두 번째 값은 세로 위치이다.

background-position: 50% 50%;

이는 사실상 다음과 같은 의미이다.

background-position: center;

background-size : 배경 이미지 크기

실제 웹사이트 제작에서 가장 중요한 배경 속성 중 하나가 background-size이다.

background-size: cover;

대표적인 속성값

auto	이미지 원래 크기
cover	영역 전체를 빈틈없이 채움
contain	이미지 전체가 요소 안에 들어오도록 크기를 조절
100% 100%	요소 크기에 강제로 맞춤

• 웹페이지의 메인 비주얼 영역에서는 일반적으로 cover가 더 많이 사용된다.
• 반면 이미지 전체를 반드시 보여 주어야 할 경우에는 contain을 사용할 수 있다.

background-attachment : 스크롤과 배경

background-attachment는 화면을 스크롤할 때 배경 이미지가 어떻게 움직일지를 지정한다.

기본값

background-attachment: scroll;

페이지를 스크롤하면 배경 이미지도 함께 이동한다.

fixed

background-attachment: fixed;

배경 이미지는 화면에 고정되고 콘텐츠만 움직인다.

.hero {
    background-image: url("images/bg.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

이 방식은 과거부터 흔히 패럴랙스(Parallax)처럼 보이는 효과를 구현할 때 사용되어 왔다.

다만 모바일 브라우저에서는 성능이나 브라우저 구현 방식에 따라 background-attachment: fixed가 데스크톱과 다르게 동작할 수 있으므로 실제 서비스에서는 테스트가 필요하다.

--- background 단축 속성

지금까지 다음과 같이 여러 줄로 작성하였다.

.hero {
    background-image: url("images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

이 속성은 background 단축 속성을 사용하여 줄일 수 있다.

.hero {
    background:
        url("images/bg.jpg")
        center / cover
        no-repeat;
}

암기 형태

background:
    색상
    이미지
    반복
    위치 / 크기
    고정;

예를 들어:

/* 백그라운드 사용 순서 */
.hero{
width:1024px;
height:600px;
background:#111 url("../images/bg02.png") 
no-repeat center / cover fixed;
}

---

2.3 CSS 그라데이션

그라데이션은 둘 이상의 색상이 점진적으로 변화하는 효과이다.

/* 선형 그라데이션 */
background: linear-gradient(
    135deg, #667eea, #764ba2
);

/* 원형 그라데이션 */
background: radial-gradient(
    circle, #a5b4fc, #312e81
);

그라데이션에서 90deg의 의미

linear-gradient()에서 deg는 그라데이션이 진행되는 방향의 각도를 의미한다.

background:
    linear-gradient(
        90deg,
        #ff2da6,
        #784cff
    );

여기서 90deg는 색상이 왼쪽에서 오른쪽으로 변화한다는 의미이다.

• 간단히 표현하면 다음과 같다.

          0deg
           ↑
           |
270deg ←   +   → 90deg
           |
           ↓
         180deg

예를 들어 다음 코드는 세로 방향 그라데이션이다.

background:
    linear-gradient(
        180deg,
        #ff8a00,
        #ff006e
    );

위쪽은 주황색이고 아래쪽으로 갈수록 분홍색으로 변한다. 대각선도 가능하다.

background:
    linear-gradient(
        135deg,
        #00c6ff,
        #7b2cff
    );

• 각도 대신 방향 키워드를 사용할 수도 있다.

linear-gradient(to right, red, blue);

또한,

linear-gradient(to bottom, red, blue);

📌 다음 네 개를 우선 기억

0deg   = 아래 → 위
90deg  = 왼쪽 → 오른쪽
180deg = 위 → 아래
270deg = 오른쪽 → 왼쪽

특히 CSS의 각도 기준은 일반적인 수학 좌표계와 다르게 생각하여야 한다는 점이 중요하다. 0deg가 오른쪽이 아니라 위쪽이라는 점을 기억하면 된다.

---

Glassmorphism 효과

💻 실습. 네온 그라데이션 버튼 만들기 

• linear-gradient()를 이용하여 두 가지 이상의 색상을 혼합한다.
• border-radius로 둥근 버튼을 만든다.
• box-shadow로 네온 효과를 표현한다.
• border와 rgba()를 함께 사용한다.
• :hover 상태에서 색상과 밝기를 변화시킨다.

기본 HTML은 다음과 같이 단순하게 구성하면 된다.

<a href="#" class="btn btn01">SUBSCRIBE ></a>
<a href="#" class="btn btn02">CLICK HERE ></a>
<a href="#" class="btn btn03">DOWNLOAD ></a>

/* button */
.btn {
    display: inline-block;
    width: 220px;
    padding: 18px 25px;
    margin: 15px;
    text-align: center;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 40px;
    border: 2px solid rgba(255, 255, 255, 0.7);
}

첫 번째 버튼은 주황색 계열로 만든다.

.btn01 {
    background:
        linear-gradient(
            90deg,
            #ffb347,
            #ff7b00
        );

    box-shadow:
        0 0 15px
        rgba(255, 140, 0, 0.6);
}

두 번째 버튼은 주황색에서 분홍색으로 자연스럽게 변화하도록 만든다.

.btn02 {
    background:
        linear-gradient(
            90deg,
            #ff8a00,
            #ff006e
        );

    box-shadow:
        0 0 15px
        rgba(255, 0, 110, 0.5);
}

세 번째 버튼은 핑크 계열로 구성한다.

.btn03 {
    background:
        linear-gradient(
            90deg,
            #ff4b6e,
            #ff1744
        );

    box-shadow:
        0 0 15px
        rgba(255, 23, 68, 0.5);
}

• 마우스를 올렸을 때는 조금 더 밝아지도록 한다.

.btn:hover {
    filter: brightness(1.15);
}

• 또는 크기를 살짝 키우는 효과를 추가할 수 있다.

.btn:hover {
    transform: scale(1.05);
}

• 조금 더 부드럽게 변화하도록 하려면 다음 속성을 추가한다.

.btn {
    transition: 0.3s;
}

---

Section 03. 폰트와 텍스트 스타일링

웹페이지에서 글자는 단순한 정보 전달 수단이 아니라 디자인의 분위기, 가독성, 브랜드 정체성을 결정하는 중요한 시각 요소이다. 같은 내용이라도 어떤 글꼴을 사용하는가에 따라 사용자가 느끼는 인상은 크게 달라진다.

웹폰트(Web Font)는 사용자의 컴퓨터에 해당 글꼴이 설치되어 있지 않아도, 웹페이지가 글꼴 파일을 내려받아 화면에 표시할 수 있도록 하는 기술이다. CSS의 @font-face를 사용하면 제작자가 지정한 폰트를 웹페이지에서 사용할 수 있다.

시스템 폰트와 웹폰트의 차이

웹페이지에서 글꼴을 지정하는 가장 기본적인 방법은 다음과 같다.

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

이 경우 브라우저는 사용자의 컴퓨터에 설치되어 있는 글꼴을 이용한다. 이를 시스템 폰트(System Font) 또는 로컬 폰트라고 볼 수 있다. 반면 웹폰트는 글꼴 파일을 웹에서 가져온다.

따라서 사용자의 컴퓨터 환경이 달라도 비교적 일관된 글꼴 디자인을 제공할 수 있다는 장점이 있다.

Generic Font Family

serif, sans-serif와 같은 값은 특정한 글꼴 이름이 아니라 글꼴의 일반적인 분류를 의미한다. 대표적인 Generic Font Family는 다음과 같다.

serif	글자 끝에 장식이 있음	본문, 출판물
sans-serif	장식이 없음	웹, UI
monospace	모든 글자의 폭이 동일	코드
cursive	손글씨 형태	장식
fantasy	개성적인 장식 글꼴	제목

• 웹페이지에서는 최종 fallback으로 serif, sans-serif 등을 지정하는 것이 좋다.

---

3.1 주요 글꼴 속성

CSS속성	설명	예제
font-family	글꼴 종류	"Noto Sans KR", sans-serif
font-size	글자 크기	20px, 1.25rem
font-weight	글자 굵기	400, 700
font-style	글자 기울기	italic
line-height	줄 높이	1.6
letter-spacing	글자 사이 간격	1px
color	글자 색상	#333333
text-align	텍스트 정렬	center
text-decoration	밑줄 등 장식	none, underline
text-shadow	글자 그림자	1px 2px 3px #999
text-transform	영문 대소문자 변환	uppercase

font-size의 rem은 루트 요소의 글자 크기를 기준으로 계산한다. 반면 em은 해당 속성이 적용되는 문맥의 글자 크기를 기준으로 계산한다.

---

3.2 웹폰트 사용하기

웹폰트는 사용자의 컴퓨터에 특정 글꼴이 설치되어 있지 않아도 웹에서 글꼴 파일을 불러와 표시할 수 있도록 하는 기술이다.

Google Fonts의 Noto Sans KR을 사용하는 예제이다.

https://fonts.google.com/

Browse Fonts - Google Fonts

• 원하는 폰트를 검색하여 code를 복사하여 사용한다.

<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;500;700&display=swap"
  rel="stylesheet">

body {
    font-family: "Noto Sans KR", sans-serif;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
}

p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

---

Section 04. Font Awesome 아이콘 활용

Font Awesome은 웹페이지에 아이콘을 표시할 수 있는 아이콘 라이브러리이다. 이메일, 위치, 전화, 소셜미디어와 같은 정보를 직관적인 기호로 표현할 수 있다.

4.1 Font Awesome 불러오기

https://fontawesome.com/

Font Awesome

아래는 Font Awesome Free 6.7.2의 CDN 예제이다.

<link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

CDN이란?

CDN은 Content Delivery Network의 약자이다. 웹사이트에 필요한 파일을 여러 지역의 서버에 분산하여 두고, 사용자와 가까운 서버에서 빠르게 전달하는 방식이다. 예를 들어 다음과 같은 자원을 CDN으로 불러올 수 있다.

• CSS
• JavaScript
• 웹폰트
• 아이콘 라이브러리
• 이미지

---

4.2 아이콘 삽입하기

<i class="fa-solid fa-envelope"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-solid fa-location-dot"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-linkedin"></i>

아이콘의 크기와 색상은 CSS로 변경할 수 있다.

.contact-icon {
    font-size: 22px;
    color: #6366f1;
}

아이콘만으로 의미를 전달하는 링크에는 aria-label을 지정하여 접근성을 확보하는 것이 바람직하다.

---

구글아이콘 사용하기

구글 폰트에도 아이콘을 지원하고 있다. 웹용에서 폰트와 CSS를 복사하여 사용 해 보자.

---

Section 05. 미니프로젝트 — 나만의 디지털 명함 만들기

Mini Project 01 | Digital Profile Card

이번 프로젝트는 첨부한 교재의 프로필 카드 디자인을 현대적인 UI 스타일로 재구성하는 클론 코딩 실습이다.

단계별 제작 과정

1	HTML 프로필 카드 구조 작성	header, div, h1, p, a
2	카드의 너비와 중앙 배치	width, margin, padding
3	카드 배경과 상단 배너	background, linear-gradient
4	원형 프로필 영역	border-radius, border
5	이름과 소개 문구 디자인	font-size, font-weight, line-height
6	연락처와 SNS 아이콘	Font Awesome
7	버튼 디자인과 마우스 효과	:hover, background-color

실습 과제

제공된 기본 소스를 실행한 후 다음 조건을 만족하도록 자신만의 디지털 명함을 제작한다.

• 자신의 이름, 전공, 관심 분야로 내용을 변경한다
• 전체 디자인의 대표 색상 2~3개를 직접 선정한다.
• 카드의 상단 배경에 그라데이션을 적용한다. 
• Font Awesome 아이콘을 최소 5개 이상 활용한다
• Google Fonts를 적용하여 글꼴을 변경한다.
• SNS 아이콘과 이메일 버튼에 실제 링크를 설정한다.

Ch08_Digital_Profile_Card.zip

0.00MB

AI 활용 바이브코딩

기본 코딩을 완성한 후 AI를 활용하여 새로운 디자인을 생성

현재 작성한 HTML과 CSS를 유지하면서 디지털 아티스트를 위한 프로필 카드로 디자인을 개선하여 줘. CSS 그라데이션, 웹폰트, Font Awesome 아이콘을 활용하고, 다크모드 디자인과 마우스 호버 효과를 추가하여 줘. JavaScript는 사용하지 말고, 새로 추가한 CSS 코드에는 주석으로 설명하여 줘.