CSS3 gradient 를 이용한 줄무늬 배경 만들기

줄무늬 배경 만들기

거의 모든 시각 디자인에서 다양한 크기, 색상, 각도의 줄무늬(Sprite)를 찾아볼 수 있습니다.

줄무늬를 적용하는 작업 방식은 일반적으로 각각의 분리된 이미지를 만드는데, 이것을 수정하려면 그때마다 이미지 편집이 필요합니다.

때로는 SVG를 사용하기도 하는데, 이 역시 분리된 파일과 익숙하지 않은 구문을 사용해야 합니다.

번거로운 작업을 최소화하기 위해 CSS3 를 이용하여 직접 줄무늬를 만들 수 있는데 그 방법을 알아보도록 합니다.

기본 줄무늬 배경

See the Pen 줄무늬 배경 #1 by jaeheekim (@jaehee) on CodePen.

#fb3 컬러의 50% 는 처음 0%에서 시작하여 50% 지점에서 끝나고 #5ba 컬러는 50% 에서 시작하여 100% 까지 배경이미지를 그리게 됩니다.

즉, 같은 지점에서 색상을 멈추게 되면 그라디언트는 나타나지 않고 두 가지 단색으로 나뉘는 것을 볼 수 있습니다.

그리고 그라디언트로 배경 이미지를 생성했기 때문에 다른 배경 이미지와 똑같이 background-size 로 크기를 조절할 수 있습니다.

background-size: 100% 30px; 로 인해 각 줄무늬 높이는 15px 로 나타나며 배경이 반복되면서 수평 줄무늬로 채워지게 됩니다.

그리고 줄무늬의 너비를 변경하기 위해 매번 두 개의 숫자(예제에서 50%) 조정하는 일을 피하고자 CSS3 규격의 이점을 다음과 같이 사용할 수 있습니다.

어떤 한 색상의 정지 위치가 목록에 있는 다른 색상 정지 위치보다 작다면 다른 색상 정지 목록보다 가장 넓게 지정된 위치와 같게 지정하면 된다.

이 의미는 두 번째 색상의 위치를 0으로 잡았다면 그 위치는 브라우저에 의해 이전 색상 정지의 위치와 같게 그 위치가 조정되게 됩니다.

그러므로 다음 코드는 위에서 정의된 선언보다 좀 더 간결하면서 똑같은 그라디언트를 생성합니다.

css

background: linear-gradient(#fb3 50%, #5ba 0);

삼색 수평 줄무늬 스타일

See the Pen 줄무늬 배경 #2 by jaeheekim (@jaehee) on CodePen.

세로 줄무늬

수평 줄무늬는 비교적 쉬운 코드이지만, 우리가 웹에서 만나는 줄무늬가 모두 수평만 있는 것은 아닙니다.

수직의 줄무늬도 많이 볼 수 있으며, 대각선(45도) 줄무늬는 가장 대중적으로 많이 사용됩니다.

이러한 줄무늬도 CSS 그라디언트를 활용하면 다양한 난이도의 줄무늬를 표현할 수 있습니다.

수평 줄무늬와 코드는 거의 비슷하지만, 큰 차이점은 그라디언트의 방향을 지정하는 첫 번째 인수를 추가한다는 것입니다.

세로 줄무늬에서는 기본값(to bottom)을 그대로 사용합니다. 또 각각 다른 background-size 를 지정합니다.

See the Pen 줄무늬 배경 #3 by jaeheekim (@jaehee) on CodePen.

제조사 벤더프리픽스가 붙지 않은 w3c 의 linear-gradient 는 키워드나 각도를 설정하지 않으면 위에서 아래로 방향으로 그러데이션이 진행(이는 벤더프리픽스가 붙은 것과 동일)합니다.

그리고 0deg 는 북쪽 방향인 아래에서 위로, 90deg 는 왼쪽에서 오른쪽으로 그라데이션을 표현하고 180deg 는 위에서 아래로 진행하는 그라데이션, 270deg 는 왼쪽에서 오른쪽으로 진행하는 그라데이션을 표현하게 됩니다.

다시 말해 벤더프리픽스가 아닌 표준 명세서의 0deg 는 y축 하단을 기준으로 시계반대 방향으로 진행합니다.

그라데이션 속성 팁

-webkit-linear-gradient 속성의 기준인 linear-gradient 속성은 그러데이션 진행 방향을 표시하는 구문이 제조사 접두어를 붙여 사용하는 속성과 다릅니다.

첫 번째로 gradient 속성의 진행 방향을 표시할때는 방향 키워드 앞에 ‘to’를 붙여 사용한다.

다음은 그 코드입니다.

css

background: linear-gradient(to right, #000, #fff)

두 번째로는 진행 방향이 제조사 접두어를 붙여 사용하는 속성과 반대 방향입니다.

이는 애플이 최초에 제안한 linear-gradient 속성 명세에서 0deg는 동쪽 방향(왼쪽에소 오른쪽)을 나타내지만, W3C에서 제정된 명세에서는 0deg가 북쪽 방향(아래에서 위쪽)을 나타내는 것으로 정의되어 있기 때문이다.

만약 제조사 접두어가 붙은 linear-gradient 속성에서 W3C의 명세가 적용된다면 이전 명세를 사용한 모든 사이트에서 오류가 발생하기 때문에 제조사의 원래 명세도 유지되고 있습니다.

linear-gradient 속성의 자세한 변경 이력은 다음 링크를 참조하도록 합니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Syntax : -webkit-linear-gradient 및 제조사 그라디언트

css

-webkit-linear-gradient(<direction>,<color-stop>[,<color-stop>]+)

webkit-linear-gradient 및 제조사 그라디언트

direction : 그러데이션의 진행 방향.

그러데이션 시작 위치: 그러데이션 진행 방향을 키워드로 설정한다. 두 개의 키워드로 지정하며 키워드는 공백으로 구분한다.

첫 번째 키워드는 수평 방향의 시작 위치를 나타내면 left 또는 right를 키워드로 사용한다.

두 번째는 키워드는 수직 방향의 시작 위치를 나타내면 top 또는 bottom를 키워드로 사용한다.

각도 : 그러데이션 진행 방향을 숫자와 각도 단위(deg)로 설정한다(예: 30deg)

예를 들어, 왼쪽에서 오른쪽으로 진행하는 그러데이션은 0deg, 오른쪽에서 왼쪽으로 진행하는 그러데이션은 180deg, 위에서 아래로 진행하는 그러데이션은 270deg, 아래에서 위로 진행하는 그러데이션은 90deg로 값을 설정한다.(각도는 시계 반대방향으로 진행)

즉, 벤더프리픽스용 그라디언트의 0deg 는 x축 좌측을 기준으로 시계 반대방향으로 진행한다.

키워드나 각도를 설정하지 않으면 위에서 아래로 방향으로 그러데이션이 진행된다.

대각선 줄무늬

위에서 수평과 수직의 줄무늬를 익혔다면 background-size 와 그라디언트의 방향을 조정하여 대각선 줄무늬(45deg) 만들기를 시도할 수 있습니다.

See the Pen 줄무늬 배경 #4 by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub