SVG 배경 패턴

자주 묻는 질문

이 값은 어떻게 쓰나요?

아무 요소의 background 로 붙이면 됩니다. 예를 들어 body { background: …; } 나 히어로 섹션에 그대로 넣으세요. 값 하나에 배경색, data URI 패턴 타일, repeat 가 모두 들어 있어 선언 한 줄로 끝나고, 타일은 가로세로 모두 이음새 없이 반복됩니다.

색은 어떻게 바꾸나요?

값에는 색이 정확히 두 개 있습니다. 앞쪽의 배경 hex 와, data URI 안의 패턴 hex(URL 인코딩되어 %23 이 # 기호입니다)입니다. 둘을 팔레트에 맞게 바꾸면 됩니다. 더 은은한 질감을 원하면 색 대신 URI 안의 fill-opacity 나 stroke-opacity 값을 낮추세요.

data URI 배경도 네트워크 요청이 생기나요?

아니요. SVG 가 CSS 안에 함께 실려 가서 추가 요청도, 호스팅할 파일도, 배경이 늦게 뜨는 깜빡임도 없습니다. 여기 타일은 수백 바이트 수준이라 data URI 용량 걱정과도 거리가 멉니다.

패턴 크기를 키우거나 줄일 수 있나요?

네. 같은 요소에 background-size 를 추가하면 됩니다. 예를 들어 24px 타일에 background-size: 48px 48px 를 주면 두 배가 됩니다. 복사한 값에 적힌 타일의 가로세로 비율을 유지해야 이음새가 어긋나지 않습니다.