Responsive background

background-img를 이용하면 url을 끌어와 사진을 가져 올 수 있다. 그렇지만, 계속 반복되어 끊기는 느낌도 들고 지저분하기 때문에 이를 깔끔하게 다룰 수 있는 CSS를 알아보자.

	background-img: url("");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

말 그대로 사진을 가져오면 지저분한 것들을 정리 해줄 수 있다.

background-size: cover는 사이즈에 맞게 화면에 꽉 채워준다.

background-repeat: no-repeat는 무식하게 반복 되는 것들을 한번만 나오게 만들어준다.

background-position: center는 그림이 정 가운데에 위치하게 만들어준다.

이 것들을 이용하면 위 사진에 지저분했던 그림이 한번에 들어 맞아진다.

	background: url("") cover/center no-repeat;

참고로, 이 것들을 한번에 기입 할 수도 있다. 코드의 양을 줄일 수 있다.