CSS 그라디언트 기능을 응용하여 줄무늬 만들기

이 포스트에서는 CSS의 그라디언트 기능을 이용하여 줄무늬를 만드는 방법에 대해 설명합니다.

일단 다음 코드를 봅시다.

selector {
	background: #55aaff;
	background: -webkit-linear-gradient(left,
	                        #55ffff   0, #55ffff 50%,
	                        #5555ff 50%, #5555ff 100%);
	background:    -moz-linear-gradient(right,
	                        #55ffff   0, #55ffff 50%,
	                        #5555ff 50%, #5555ff 100%);
	background:      -o-linear-gradient(right,
	                        #55ffff   0, #55ffff 50%,
	                        #5555ff 50%, #5555ff 100%);
	background:         linear-gradient(to right,
	                        #55ffff   0, #55ffff 50%,
	                        #5555ff 50%, #5555ff 100%);
}

이 코드는 CSS로 선형 그라디언트 구현하기 포스트에 설명하고 있는 선형 그라디언트를 응용한 코드입니다. 왼쪽에서 오른쪽으로 가며 맨 처음에는 청록색으로 시작해서 절반 지점까지 청록색을 유지, 곧바로 절반 지점에서 밝은 파랑으로 바뀌다가 마지막 지점까지 밝은 파랑을 유지합니다. 이렇게 하면 어떻게 될까요?

이렇게 왼쪽의 반은 청록색으로 칠해지고 오른쪽의 반은 밝은 파랑으로 칠해집니다. 그라디언트 지점을 설정할 때 특정 지점에서 A색을 지정한 후 같은 지점에서 A색과 다른 B색을 지정하게 되면 그 지점을 기준으로 A색에서 곧바로 B색으로 바뀌게 됩니다.

이를 응용한 예제를 더 봅시다.

selector {
	background: #ff00ff;
	background: -webkit-linear-gradient(
	                    #ff0000      0, #ff0000 16.67%,
	                    #ffff00 16.67%, #ffff00 33.33%,
	                    #00ff00 33.33%, #00ff00    50%,
	                    #00ffff    50%, #00ffff 66.67%,
	                    #0000ff 66.67%, #0000ff 83.33%,
	                    #ff00ff 83.33%, #ff00ff 100%);
	background:    -moz-linear-gradient(
	                    #ff0000      0, #ff0000 16.67%,
	                    #ffff00 16.67%, #ffff00 33.33%,
	                    #00ff00 33.33%, #00ff00    50%,
	                    #00ffff    50%, #00ffff 66.67%,
	                    #0000ff 66.67%, #0000ff 83.33%,
	                    #ff00ff 83.33%, #ff00ff 100%);
	background:      -o-linear-gradient(
	                    #ff0000      0, #ff0000 16.67%,
	                    #ffff00 16.67%, #ffff00 33.33%,
	                    #00ff00 33.33%, #00ff00    50%,
	                    #00ffff    50%, #00ffff 66.67%,
	                    #0000ff 66.67%, #0000ff 83.33%,
	                    #ff00ff 83.33%, #ff00ff 100%);
	background:         linear-gradient(
	                    #ff0000      0, #ff0000 16.67%,
	                    #ffff00 16.67%, #ffff00 33.33%,
	                    #00ff00 33.33%, #00ff00    50%,
	                    #00ffff    50%, #00ffff 66.67%,
	                    #0000ff 66.67%, #0000ff 83.33%,
	                    #ff00ff 83.33%, #ff00ff 100%);
}

이 예제는 성소수자의 상징으로도 유명한 그 무지개 깃발과 비슷한 그 6색 무지개 무늬를 CSS 그라디언트 기능을 이용해서 그리는 예제입니다. 이 코드는 다음과 같이 표시될 것입니다.

그리고 다른 예로,

selector {
	background: #55ffff;
	background-image:    -webkit-linear-gradient(
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%),
	                     -webkit-linear-gradient(left,
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%);
	background-image:    -moz-linear-gradient(
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%),
	                     -moz-linear-gradient(right,
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%);
	background-image:    -o-linear-gradient(
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%),
	                     -o-linear-gradient(right,
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%);
	background-image:    linear-gradient(
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%),
	                     linear-gradient(to right,
	                rgba(85, 85, 255, 0) 0, rgba(85, 85, 255, 0) 50%,
	                rgba(85, 85, 255, .5) 50%, rgba(85, 85, 255, .5) 100%);
	background-size: 40px 40px;
}

이와 같은 무늬도 만들 수 있습니다.