대각선 줄무늬 배경, CSS 한 줄로 만드는 원리
도로 공사 안내판이나 창고 바닥에 그려진 노랑-검정 대각선 줄무늬를 웹사이트 배너로 옮기려고 하면 대부분 줄무늬 이미지 파일부터 찾게 됩니다. 하지만 이런 패턴은 이미지 없이 CSS 코드 한 줄, repeating-linear-gradient만으로 그대로 재현할 수 있습니다. 원리를 알면 색이나 각도를 바꿀 때마다 이미지를 다시 만들 필요가 없어집니다.
요약 ① 대각선 줄무늬 배경은 이미지 파일이 아니라 CSS의 repeating-linear-gradient 함수로 만든 경우가 많습니다 ② 같은 색을 두 지점에 반복 지정해 일정 간격으로 색상 정지점을 반복시키면 줄무늬가 됩니다 ③ 각도·색상·두께 세 숫자만 알면 이미지 없이 CSS 코드 한 줄로 원하는 패턴을 재현할 수 있습니다
대각선 줄무늬 배경 — 왜 이미지 파일처럼 보일까
공사 현장 안내판, 도로 통제선, 위험물 경고 배너에는 노랑-검정 대각선 줄무늬가 자주 쓰입니다. 웹에서 이런 배너를 재현하려는 경우 상당수는 포토샵 등으로 줄무늬 이미지를 만들어 background-image로 타일링합니다.
이 방식은 눈에 보이는 결과는 비슷하지만, 화면이 커지면 이미지가 확대되며 흐려지거나 줄무늬가 이어지는 경계가 어긋나 보일 수 있습니다. 색을 바꾸려면 이미지 파일을 다시 만들어 다시 올려야 하는 번거로움도 있습니다.
실제로는 브라우저가 이런 반복 패턴을 그리는 기능을 이미 내장하고 있습니다. CSS의 repeating-linear-gradient 함수가 그 역할을 하며, 이미지 파일 없이 벡터 방식으로 줄무늬를 그립니다.
확인하는 방법 — CSS 코드로 직접 만들어보기
repeating-linear-gradient는 각도와 색상 정지점을 입력받아, 그 구간을 요소 끝까지 무한히 반복해서 그리는 함수입니다. 기본 형태는 repeating-linear-gradient(각도, 색상1 시작지점, 색상1 끝지점, 색상2 시작지점, 색상2 끝지점)입니다.
예를 들어 background-image: repeating-linear-gradient(45deg, #facc15 0px, #facc15 20px, #1e293b 20px, #1e293b 40px);라고 쓰면 노란색이 020px, 짙은 남색이 2040px를 채우고, 이 40px짜리 구간이 요소 끝까지 반복됩니다. 같은 색을 두 지점에 반복 지정하는 것이 핵심인데, 이렇게 해야 색이 부드럽게 섞이지 않고 경계가 뚜렷한 줄무늬가 됩니다.
각도는 CSS 그라디언트 규칙을 그대로 따릅니다. 0deg는 위쪽 방향을 가리키고 각도가 커질수록 시계 방향으로 회전하므로, 90deg면 세로줄, 45deg나 135deg면 대각선 줄무늬가 만들어집니다.
저희 도구로 확인하기. 각도·두께·색상 값을 코드로 하나씩 바꿔가며 눈으로 확인하는 대신, 슬라이더로 조절하면서 바로 미리보고 완성된 CSS 코드를 복사할 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 스트라이프 코드 생성
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 각도를 90도로 줬는데 세로줄이 아니라 가로줄이 나옴 | CSS 그라디언트 각도는 위쪽(0deg) 기준 시계 방향이라 90deg는 세로줄이 아니라 오른쪽 방향을 뜻합니다 |
| 줄무늬 경계가 뚜렷하지 않고 뿌옇게 번짐 | 색상 정지점을 한 번씩만 지정해 두 색이 그러데이션처럼 섞인 경우입니다 — 같은 색을 두 지점에 반복해야 뚜렷하게 나뉩니다 |
| 45도 대각선인데 줄무늬가 지정한 px보다 굵어 보임 | 두께(px) 값은 그라디언트 축 방향 기준이라, 각도가 0·90도에서 멀어질수록 화면에 비치는 굵기는 더 두꺼워 보입니다 |
| 밝은 줄무늬 위 흰 글자가 안 보임 | 밝은 색과 어두운 색이 반복되는 배경이라, 글자에 그림자나 반투명 배경을 함께 줘야 어느 구간에서도 읽힙니다 |
표에 정리된 것처럼, 줄무늬가 예상과 다르게 나오는 경우 대부분은 각도 기준이나 색상 정지점 개수를 헷갈렸을 때 생깁니다. 두 가지 규칙만 기억하면 원하는 패턴을 바로 만들 수 있습니다.
정리
repeating-linear-gradient는 각도와 색상 정지점을 반복시켜 무한한 줄무늬 패턴을 그리는 CSS 함수입니다. 같은 색을 두 지점에 지정하면 경계가 뚜렷한 줄무늬가 되고, 각도는 위쪽 0deg 기준 시계 방향으로 커집니다.
이 규칙만 알면 이미지 파일 없이도 공사 현장 배너 같은 대각선 줄무늬를 코드 한 줄로 재현할 수 있고, 색이나 각도를 바꿀 때도 이미지를 다시 만들 필요가 없습니다.
무료 · 가입 불필요 · 브라우저에서 바로 CSS 스트라이프 코드 생성
자주 묻는 질문
repeating-linear-gradient와 linear-gradient는 어떻게 다른가요?
linear-gradient는 지정한 색상 구간이 끝나면 마지막 색으로 남은 영역을 채우고 더 이상 반복하지 않습니다. repeating-linear-gradient는 지정한 구간을 요소 끝까지 계속 반복해서, 같은 패턴이 이어지는 줄무늬 배경을 만들 때 씁니다.
이미지로 만든 줄무늬 배경과 비교하면 어떤 점이 좋나요?
이미지 파일은 해상도가 고정돼 있어 화면이 커지면 확대되며 흐려지거나 타일이 이어지는 부분이 어긋날 수 있습니다. CSS 그라디언트는 브라우저가 매번 다시 계산해서 그리므로 화면 크기가 바뀌어도 선명하고, 이미지 파일을 따로 불러올 필요도 없습니다.
화면 크기에 따라 줄무늬 두께를 다르게 하고 싶으면 어떻게 하나요?
미디어 쿼리 안에서 background-image 값을 다른 repeating-linear-gradient 값으로 바꿔주면 됩니다. 색상은 그대로 두고 두께(px) 숫자만 화면 크기별로 다르게 지정하는 방식이 가장 간단합니다.