css 라이브러리 repeat기능 사용

css의 repeat은 background 속성으로 사용되며, 6가지 기능으로 구분할 수 있다.

 

1] background-repeat : repeat  

2] background-repeat : repeat-x 

3] background-repeat : repeat-y 

4] background-repeat : no-repeat 

5] background-repeat : space 

6] background-repeat : round 

 

위의 6가지 기능을 사용하려면 background:url() 속성에서 이미지경로를 지정해줘야한다. 

 

예제와함께 repeat기능을 알아보자.

 

---

1 background-repeat: repeat;

 

repeat은 이미지를 x, y축으로 배열한다. 바둑판식 배열이라 불리며, repeat의 기본값이다.

repeat속성을 배경값으로 설정하면, 같은 이미지가 반복되는 패턴을 만들 수 있다.

 

 

---

2 background-repeat: repeat-x;

 

repeat-x 속성은 이미지를 가로방향(수평)으로 배열한다. 

 

 

---

3 background-repeat: repeat-y;

 

repeat-y 속성은 이미지를 세로방향(수직)으로 배열한다. 

 

 

---

4 background-repeat: no-repeat;

 

no-repeat은 이미지를 1회 보여준다.

반복패턴을 제거할 때 사용할 수 있다.

 

 

---

5 background-repeat: round;

 

이미지를 양방향으로 배열하며(바둑판식) 

배경이 늘어날 때 이미지도 함께 증가하는 식으로 빈공간을 채운다.

round방식은 배경에 따라 이미지가 늘어나거나 줄어든다. 

 

 

---

6 background-repeat: space;

 

이미지를 양방향으로 배열하며(바둑판식) 

배경이 늘어날 때 이미지도 함께 증가하며,

자동으로 배경의 빈 공간을 이미지가 채운다. (이미지 왜곡 없음)