CSS background dots 처리하기

배경을 dots(점)으로 처리하고 싶을때가 있다.

 

보통 background에 이미지를 사용하여 처리하기도 하는데,

이미지 없이 구현하는 법이 있다.

SCSS

$bg-color: hsl(256,33,10); /*배경색*/
$dot-color: hsl(256,33,70); /*dot색*/

/* 점영역 크기 */
$dot-size: 1px; /*점 크기*/
$dot-space: 22px;/* 점 간격 */

body {
	background:
		linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
		linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
		$dot-color;
	background-size: $dot-space $dot-space;
}

CSS

body {
  background: linear-gradient(90deg, #161122 21px, transparent 1%) center, linear-gradient(#161122 21px, transparent 1%) center, #a799cc;
  background-size: 22px 22px;
}

결과

출처 : https://blog.naver.com/2z00/221490922080