왕진 블로그
반응형
Web Development · CSS
CSS 스타일링
이미지 테두리, 색 테이블, shadow, figure/figcaption을 정리합니다.
시작 오늘 분석할 코드
이 폴더는 CSS 선택자, 스타일 속성, 리스트 메뉴와 애니메이션을 나누어 연습합니다. 선택자가 어떤 요소를 가리키는지, 속성이 어떤 시각 효과를 만드는지, 상태 선택자와 구조 태그가 어떻게 연결되는지 확인합니다.
img { border:15px solid grey; border-image:url('media/checkpattern.png') 30 round; } h2 { text-shadow:2px 2px 3px blue; } img:hover { box-shadow:0 0 5px blue; }
![]()
설명
border-image이미지를 테두리 패턴으로 사용합니다.
round반복 이미지를 크기 조정해 맞춥니다.
text-shadow글자 그림자입니다.
box-shadow요소 박스 그림자입니다.
figure독립 콘텐츠 묶음입니다.
figcaptionfigure의 설명입니다.
1 이미지 border-image
이미지 테두리 예제는 일반 border를 만든 뒤 border-image로 패턴 이미지를 테두리에 적용합니다.
| 속성 | 역할 | 예시 |
|---|---|---|
| padding | 이미지와 테두리 사이 여백 | 5px |
| border | 테두리 두께와 기본 스타일 | 15px solid grey |
| border-image | 이미지 테두리 적용 | url(...) 30 round |
| round | 반복 크기 조정 | 남는 공간 맞춤 |
2 border-image 반복 방식
원문 주석처럼 stretch, repeat, round, space는 테두리 이미지를 어떻게 채울지 결정합니다.
| 값 | 동작 | 특징 |
|---|---|---|
| stretch | 늘려서 맞춤 | 왜곡 가능 |
| repeat | 반복 | 남는 부분 잘림 |
| round | 반복하며 크기 조정 | 정확히 맞춤 |
| space | 반복 사이 여백 | 빈 공간 분배 |
3 색 테이블
색 테이블 예제는 색 이름, 코드, 실제 색상 칸을 표로 보여줍니다. div의 background로 색상을 직접 확인합니다.
| 색 이름 | 코드 | 계열 |
|---|---|---|
| Brown | #A52A2A | 갈색 |
| DeepSkyBlue | #00BFFF | 파랑 |
| Gold | #FFD700 | 노랑 |
| OliveDrab | #6B8E23 | 초록 |
반응형
4 text-shadow
text-shadow는 글자 그림자입니다. 원본은 노란 글자에 파란 그림자를 넣어 제목을 강조합니다.
| 값 | 의미 | 예제 |
|---|---|---|
| 첫 번째 2px | x 방향 그림자 | 오른쪽 |
| 두 번째 2px | y 방향 그림자 | 아래쪽 |
| 3px | 흐림 정도 | blur |
| blue | 그림자 색 | 파란 그림자 |
5 box-shadow
box-shadow는 박스나 이미지 주변 그림자입니다. 원본은 이미지에 마우스를 올렸을 때 파란 그림자를 보여줍니다.
text-shadow
글자 모양에 그림자를 적용합니다.
box-shadow
요소 박스 외곽에 그림자를 적용합니다.
6 figure와 figcaption
figure는 이미지, 코드, 표처럼 독립적인 콘텐츠 묶음이고 figcaption은 그 설명입니다. 원본은 Chrome 이미지와 HTML 코드 예시를 figure로 감쌉니다.
| 태그 | 역할 | 예시 |
|---|---|---|
| figure | 그림/코드 묶음 | Chrome 이미지 |
| figcaption | 설명 문구 | 그림 1-2 구글 Chrome |
| code | 코드 조각 | <!doctype html> |
| strong | 중요 강조 | 그림 번호 |
7 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| border 없이 border-image만 사용 | 테두리가 안 보입니다. | border 두께와 스타일을 먼저 둡니다. |
| 이미지 경로 오류 | 패턴 테두리가 안 나옵니다. | url 경로를 확인합니다. |
| shadow 값 순서 혼동 | 그림자 방향이 이상합니다. | x, y, blur, color 순서로 봅니다. |
| 색 이름 대소문자 걱정 | 불필요하게 헷갈립니다. | CSS 색 이름은 대소문자 영향을 거의 받지 않습니다. |
| figure를 단순 장식으로만 사용 | 설명 구조가 약해집니다. | figcaption과 함께 의미를 부여합니다. |
8 복습 체크리스트
| 체크 | 통과 기준 |
|---|---|
| border-image | 이미지 패턴 테두리 구조를 설명합니다. |
| color table | 색 이름과 색 코드 표현을 구분합니다. |
| text-shadow | 글자 그림자 값 순서를 압니다. |
| box-shadow | hover 이미지 그림자를 설명합니다. |
| figure | 독립 콘텐츠 묶음임을 압니다. |
| figcaption | figure의 설명 문구임을 압니다. |
9 추가 테스트
| 테스트 | 확인 내용 |
|---|---|
| round 변경 | stretch/repeat/space 차이를 확인합니다. |
| shadow blur | 흐림값을 크게 바꿔 차이를 봅니다. |
| hover 해제 | 이미지 그림자가 사라지는지 봅니다. |
| 색 코드 변경 | 테이블 색상이 바뀌는지 확인합니다. |
| figcaption 제거 | 설명 구조 차이를 확인합니다. |
11 시각 효과 디버깅
이미지 테두리와 그림자 효과는 값 순서와 전제 조건이 중요합니다. 특히 border-image는 기본 border가 있어야 보이고, shadow는 x/y/blur/color 순서를 지켜야 합니다.
| 효과 | 필수 조건 | 확인 방법 |
|---|---|---|
| border-image | border 두께와 스타일 | 기본 회색 테두리가 먼저 보이는지 확인 |
| 패턴 이미지 | url 경로 | 개발자도구 Network에서 이미지 로드 확인 |
| text-shadow | 색상 대비 | 글자색과 그림자색이 구분되는지 확인 |
| box-shadow | hover 상태 | 마우스가 올라간 동안만 적용되는지 확인 |
| 색 테이블 | CSS 색상값 | 색 이름과 코드가 의도한 색인지 확인 |
A
기본 스타일 확인border, color, width 같은 기본값이 먼저 보이는지 봅니다.
B
이미지 경로 확인border-image와 img src가 실제 파일을 가리키는지 봅니다.
C
상태 확인hover 효과는 마우스가 올라간 상태에서 확인합니다.
D
의미 태그 확인figure와 figcaption이 함께 묶였는지 봅니다.
12 스타일 선택 기준
테두리, 그림자, 색상표, figure는 목적이 서로 다릅니다. 단순 장식인지 정보 전달인지에 따라 적용 방식을 다르게 고릅니다.
| 목적 | 적합한 방식 | 예시 |
|---|---|---|
| 이미지 강조 | border 또는 box-shadow | 방문 사이트 이미지 hover |
| 패턴 장식 | border-image | checkpattern 테두리 |
| 제목 강조 | text-shadow | Most Visited Pages |
| 색상 비교 | table + color chip | 색 이름과 코드 |
| 이미지 설명 | figure + figcaption | Chrome 브라우저 그림 |
13 추가 연습
| 연습 | 목표 |
|---|---|
| 테두리 두께 변경 | border-image가 어떻게 잘리는지 확인합니다. |
| 그림자 방향 변경 | x/y 값을 음수로 바꿔 그림자 위치를 비교합니다. |
| 색상 행 추가 | 새 색 이름과 코드를 표에 추가합니다. |
| figure 정렬 | 이미지와 설명을 가운데 정렬합니다. |
| hover transition | box-shadow 변화에 transition을 추가합니다. |
14 시각 스타일 조합
이미지, 색상, 그림자, 설명 구조는 함께 쓰이는 경우가 많습니다. 예를 들어 카드형 링크는 이미지, box-shadow, figcaption, hover 효과를 모두 조합할 수 있습니다.
| 조합 | 구성 | 효과 |
|---|---|---|
| 이미지 카드 | figure + img + figcaption | 이미지와 설명을 묶습니다. |
| 강조 제목 | h2 + text-shadow | 제목을 눈에 띄게 합니다. |
| 방문 링크 | a + img:hover | 클릭 가능한 이미지 피드백을 줍니다. |
| 색상표 | table + div background | 색 이름과 실제 색을 비교합니다. |
| 장식 테두리 | border + border-image | 이미지 패턴으로 외곽을 꾸밉니다. |
1
의미 구조 먼저figure, table, heading처럼 콘텐츠 구조를 잡습니다.
2
기본 크기 지정이미지 width와 table cell 너비를 정합니다.
3
강조 효과 추가shadow나 border-image를 적용합니다.
4
상호작용 점검hover 상태에서만 보이는 효과를 확인합니다.
15 최종 점검
| 점검 | 통과 기준 |
|---|---|
| border-image | 기본 border와 패턴 이미지가 함께 적용됩니다. |
| 색 테이블 | 색 이름, 코드, 실제 색 칸이 대응됩니다. |
| text-shadow | 글자 그림자가 제목 뒤에 보입니다. |
| box-shadow | 이미지 hover 때 그림자가 나타납니다. |
| figure | 이미지와 설명이 하나의 묶음으로 읽힙니다. |
| figcaption | 그림 번호와 설명이 콘텐츠 아래에 위치합니다. |
| 패턴 경로 | border-image의 url 경로가 실제 파일과 일치합니다. |
| 테두리 두께 | border-image가 보일 만큼 border 두께가 지정됩니다. |
| 그림자 색상 | 글자색과 그림자색이 서로 구분됩니다. |
| hover 상태 | 마우스를 뺄 때 box-shadow가 사라집니다. |
| 색상 대비 | 테이블의 색상 칸과 텍스트가 읽기 어렵지 않습니다. |
| 의미 구조 | 설명이 필요한 이미지는 figcaption과 함께 묶입니다. |
| 링크 이미지 | 이미지를 클릭 가능한 링크로 사용할 때 hover 피드백이 있습니다. |
| 출력 목적 | 장식용 효과와 정보 전달용 구조를 구분합니다. |
| 유지보수 | 반복되는 그림자와 테두리 스타일은 class로 분리할 수 있습니다. |
핵심 한 줄 요약
borderborder-image는 기본 border와 함께 써야 보입니다.
shadowtext-shadow와 box-shadow는 적용 대상이 다릅니다.
semanticfigure와 figcaption은 이미지나 코드의 설명 구조를 만듭니다.
Tags
#CSS#border-image#color#text-shadow#box-shadow#figure#figcaption#image#HTML#티스토리
▼ 티스토리 태그 입력란 복사용
CSS, border-image, color, text-shadow, box-shadow, figure, figcaption, image, HTML, 티스토리
반응형
'php' 카테고리의 다른 글
| Canvas 원호 · 선 스타일 완전 정리 (1) | 2026.07.07 |
|---|---|
| Canvas 기초 도형 완전 정리 (0) | 2026.07.07 |
| CSS 셀렉터 완전 정리 (1) | 2026.07.07 |
| CSS 메뉴·리스트·animation 완전 정리 (1) | 2026.07.07 |
| CSS 기초 레이아웃 완전 정리 (0) | 2026.07.07 |
댓글