동적으로 삽입된 CSS 배경 이미지 가운데 정렬하기

요즘 바빠서 블로그 참 잘 안하는데… 일단 요 몇일 겪은 일들을 중심으로 간단히 메모라도 해야겠다.

배경 이미지 중앙정렬

보통 CSS를 이용해 배경 이미지를 중앙 정렬하고 싶을 경우 아래와 같이 많이 사용한다.

div{
    background: url('/imgurl') no-repeat;
    background-position: center;
}

사실 위와 같은 코드는 아래와 같이 한줄로 축약할수도 있다.

div{
    background: url('/imgurl') no-repeat center;
}

동적으로 배경 이미지 추가

그럼 이제 JS코드를 이용해 동적으로 이미지를 추가해보자.

var images = [10장의 이미지URL이 셋팅되어 있다고 가정];
var slides = $('.slide'); // .slide로 지정된 클래스도 이미지 갯수 만큼 있다고 가정. 
images.forEach(function(image, i){       
   slides[i].css({'background': 'url(' + image + ')'});
});

뭐 대충 위와 같이 간단하게 backgrund 속성에 url로 이미지를 추가할지도 모르겠다. 하지만 여기서 주의할점은 위와 같이 축약형 backgrund 속성을 사용하게 되면 기존에 풀어서 쓴 background-postion 속성을 덮어버리게 된다. 왜냐면 동적으로 삽입되는 녀석은 inline 스타일로 가장 우선순위가 높기 때문이다. 따라서 위와 같이 쓰면 가운데 정렬이 아닌 좌상단을 기준으로 정렬될 것이다.

문제 상황 바로 잡기

그래서 inline으로 스타일을 삽입할때는 항상 주의해야한다. 특히 축약형을 쓸때는 더더욱 주의하자. 위의 문제를 해결할때는 간단히 축약형이 아닌 일반 속성을 사용한다.

slides[i].css({'background-image': 'url(' + image + ')'});