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;
이미지를 양방향으로 배열하며(바둑판식)
배경이 늘어날 때 이미지도 함께 증가하며,
자동으로 배경의 빈 공간을 이미지가 채운다. (이미지 왜곡 없음)
'코드 스터디' 카테고리의 다른 글
overflow속성 정리 (0) | 2020.07.31 |
---|---|
css 그리드 정리 (0) | 2020.07.30 |
리액트 유저를 위한 Next.js 튜토리얼 사이트 (0) | 2020.07.12 |
'데이터 시각화' 비즈니스 모델에 대한 고찰 (0) | 2020.07.04 |
no 프레임워크 (0) | 2020.07.02 |
댓글