🖼️
EPISODE 04
background · border-radius · box-shadow · transition
배경 & 테두리
background-color/image/gradient, border와 border-radius, box-shadow와 그림자, opacity·cursor, 부드러운 전환을 위한 transition을 익혀 버튼·카드 UI를 만듭니다.
CSSbackgroundshadowtransition
소요 시간
⏱ 30~60분
난이도
📊 초보
선수 조건
🎯 css-03
결과물
그림자·라운드·hover 전환 효과가 적용된 버튼·카드
이 강의에서 배우는 것
- 1배경 이미지의 size·position·repeat을 자유롭게 다룬다
- 2linear-gradient / radial-gradient로 그라데이션을 적용한다
- 3border와 border-radius로 둥근 모서리·원을 만든다
- 4box-shadow로 깊이 있는 카드를 표현한다
- 5transition으로 hover 효과를 부드럽게 만든다
1. 배경
배경색
css
.box {
background-color: #3498db;
background-color: rgba(52, 152, 219, 0.5);
}배경 이미지
css
.hero {
background-image: url('image.jpg');
background-size: cover; /* 꽉 채움 */
background-size: contain; /* 전체 보임 */
background-position: center;
background-repeat: no-repeat;
}그라데이션
css
.gradient {
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(135deg, #f093fb, #f5576c);
background: radial-gradient(circle, #f093fb, #f5576c);
}단축 속성
css
background: url('image.jpg') center/cover no-repeat;2. 테두리
css
.box {
border: 2px solid #333; /* 두께 스타일 색상 */
border-style: solid; /* dashed, dotted, double */
border-top: 3px dashed red;
border-radius: 8px; /* 네 모서리 동일 */
border-radius: 50%; /* 원 (정사각형 일 때) */
border-radius: 10px 0 10px 0; /* 모서리별 */
}3. 그림자 (box-shadow)
css
.card {
/* offset-x | offset-y | blur | color */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
/* spread 추가 */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* 안쪽 그림자 */
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
/* 여러 그림자 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
}4. outline
border와 달리 요소 크기에 영향을 주지 않습니다. 주로 포커스 표시(접근성)에 활용.
css
button:focus {
outline: 3px solid #3498db;
outline-offset: 2px;
}5. opacity & cursor
css
.dim { opacity: 0.5; }
.clickable { cursor: pointer; } /* not-allowed, crosshair */6. transition
css
.button {
background-color: #3498db;
/* property | duration | timing-function | delay */
transition: background-color 0.3s ease;
transition: all 0.3s ease;
transition: transform 0.2s ease-out, box-shadow 0.2s ease;
}
.button:hover {
background-color: #2980b9;
}- ease — 천천히 시작/끝 (기본)
- linear — 일정 속도
- ease-in / ease-out / ease-in-out