1. 들어가면서 |
HTML CSS를 사용하다가 보면 각 브라우져마다 다르게 적용되는 특성이 있다. 그 중 하나가 바로 "background-position" 특성이다. 여기서 작성한 내용은 원하는 위치에 배경 이미지를 위치하는 법에 대해서 작성해 보았다.
문제의 발단은 다음 아래와 같은 소스 코드를 작성했을 때 발생했다.
background-position: right 12.5px top center;
이러한 형식으로 작성을 하게되면 잘 만들어진 브라우져(HTML5의 특성에 최적화 및 성능 향상/크롬, 파이어폭스, 오페라 ... 등)에서는 아래와 같이 배경화면이 적용된다.
하지만 모든걸 거부하던 아웃사이더 브라우져인 IE에서는 이러한 향상된 CSS를 적용하지 못하고 이상한 곳에 배경화면 이미지를 배치한다.
2. 원하는 위치에 배경화면을 위치하자 |
원하는 위치에 배경하면을 두기 위해서 크게 두 가지의 방법이 있다. (1) 투명한 외각선(border를 이용한 방법)과 (2) 겉에 div를 하나더 작성하여 padding을 세팅하는 방법이다.
필자의 생각은 "(1) 투명한 외각선을 이용하는 방법"을 시도하지 못할 때, "(2) 겉에 div를 하나더 작성하여 Padding을 세팅하는 방법"을 사용하기를 권고한다. 왜냐하면 쓸데 없이 많은 div는 거부감이 있기 때문이다.
(1) 투명한 외각선을 이용하는 방법
- border-[direction]: n px solid transparent;
- 원하는 위치만큼 N px의 투명한 선을 넣는 방법이다.
example) 위에서 작성한 background-position: right 12.5px top center를 위해서 다음과 같이 작성한다.
border-right: 12.5px solid transparent;
background-position: right center;
- 위의 방법이 안될 경우는 무엇인가? 바로 외각선을 사용하는 경우이다. 이경우에는 다음아래의 방법을
사용하도록 하자.
(2) 겉에 div를 하나더 작성하여 padding을 세팅하는 방법
- 말 그대로 이미지를 위치시킬 영역 겉을 div로 감싸는 것이다.
example) 위에서 작성한 background-position: right 12.5px top center를 위해서 다음과 같이 작성한다.
#wrap_div {
padding-right 12.5px;
}
#image_div{
background-position: right center;
}
3. 마치며 |
IE를 대응하기 위해서는 CSS 측면에서도 생각해줘야 할 부분이 몇 가지 있다. background-position도 문제이지만 background-image를 두 개 이상 쓸 때에도 문제가 발생한다. background-image를 두 개이상 적용하기 위해서는 div를 층층히 감싸서 해결하는 방법이 있다.