윤곽선과 Box-Shadow
outline과 box-shadow를 사용해 요소 주위에 포커스 윤곽선과 그림자 효과를 추가합니다.
윤곽선과 Box-Shadow은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
윤곽선 속성
outline은 테두리 바깥에 선을 그립니다. 레이아웃에 영향을 주지 않으므로 주변 요소가 이동하지 않습니다. 단축 표기 형식은 테두리와 마찬가지로 너비 스타일 색상 순서입니다.
<button class="focus-demo">Focused Button</button>
윤곽선 오프셋
outline-offset은 테두리 가장자리에서 윤곽선을 멀리 이동합니다. 양수 값은 윤곽선을 바깥쪽으로 밀어내고, 음수 값은 안쪽으로 이동시킵니다(잘라내기 효과).
<button class="focus-demo">Keyboard-focused Button</button>
윤곽선과 테두리
주요 차이점은 다음과 같습니다:
- 윤곽선은 레이아웃 흐름에 영향을 주지 않습니다
- 윤곽선은 면별로 설정할 수 없습니다(윤곽선-위쪽 속성은 없음)
- 윤곽선은 직사각형이 아닐 수 있습니다(일부 브라우저에서는 포커스 링 모양을 따름)
- 윤곽선은 항상 테두리 바깥에 있습니다
포커스 표시 여부와 포커스 비교
키보드 포커스 링에는 :focus-visible을 우선 사용합니다. 포커스가 마우스 클릭이 아니라 키보드를 통해 설정된 경우에만 윤곽선을 표시합니다. 따라서 포인터 사용자의 시각적 방해는 줄이면서 접근성은 유지할 수 있습니다.
<button class="focus-demo">Keyboard focus vs mouse click</button>
상자 그림자 기초
box-shadow는 요소 주변에 그림자 효과를 추가합니다. 단축 표기 형식은 가로 오프셋 세로 오프셋 흐림 반경 확산 반경 색상입니다.
<div class="card">Card with soft shadow</div>
상자 그림자 값 설명
상자 그림자의 각 값은 다음과 같습니다:
- 가로 오프셋: 가로 이동(음수 = 왼쪽)
- 세로 오프셋: 세로 이동(음수 = 위쪽)
- 흐림 반경: 부드러운 정도(0 = 선명함)
- 확산 반경: 그림자 크기를 키우거나 줄임
- 색상: 그림자 색상(RGBA 권장)
<div class="raised">Raised</div>
<div class="deep">Deep</div>
내부 상자 그림자
inset 키워드를 추가하면 요소 안쪽에 그림자를 그려 눌리거나 움푹 들어간 모양을 만들 수 있습니다.
<input class="input focus-demo" type="text" value="Focused input" />
여러 상자 그림자
여러 그림자는 쉼표로 구분합니다. 앞쪽부터 뒤쪽 순서로 겹쳐집니다:
<span class="badge">3</span>
상자 그림자와 필터: 드롭 그림자
box-shadow는 상자 모양만 따릅니다. filter: drop-shadow()는 투명도를 포함한 렌더링된 모양을 따르므로, 배경이 투명한 PNG 아이콘에 적합합니다.
<div class="icon">★</div>
상자 그림자를 사용한 입체감 시스템
머티리얼 디자인과 유사한 시스템에서는 시각적 입체감을 표현하기 위해 여러 그림자 수준을 정의합니다. CSS 변수를 그림자 값에 매핑합니다:
<div class="elevation-sm">sm</div>
<div class="elevation-md">md</div>
<div class="elevation-lg">lg</div>
상자 그림자를 효율적으로 애니메이션 처리하기
상자 그림자를 애니메이션 처리하면 모든 프레임에서 다시 그리기가 발생합니다. 성능을 위해 의사 요소 그림자의 opacity를 애니메이션 처리하거나 합성할 수 있는 filter: drop-shadow()를 사용합니다.
빠른 확인
요소 안쪽에 그림자를 그리는 상자 그림자 키워드는 무엇입니까?
복습
outline은 레이아웃에 영향을 주지 않고 테두리 바깥에 그려지므로 포커스 표시기에 사용합니다. box-shadow는 오프셋, 흐림, 확산, 색상으로 입체감 있는 그림자를 추가합니다. 내부 그림자에는 inset을 사용합니다. 여러 그림자는 쉼표로 겹쳐 배치할 수 있습니다.
자주 묻는 질문
“윤곽선과 Box-Shadow” 강의는 무료인가요?
네 — “윤곽선과 Box-Shadow” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“윤곽선과 Box-Shadow”에서 뭘 배우나요?
outline과 box-shadow를 사용해 요소 주위에 포커스 윤곽선과 그림자 효과를 추가합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“윤곽선과 Box-Shadow” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.