CSS로 이미지 대체하기

CSS3가 등장하면서 부터 많은 부분을 이미지대신 사용하고 있습니다. 역효과로 페이지 코드가 좀 더 복잡해질때도 있는데 서버 요청을 줄이고 트래픽을 감소시키는 걸로 만족하는 중이죠. 물론 구형 브라우저및 IE는 원하는 데로 렌더링되지 않습니다.

IE9 이하는 색상정보도 부족해서 이제 웹 제작할때 아예 제껴두고 작업하는 실정입니다. 백날 천날 크로스 브로우징하면서 사이트 제작해도 결국 IE 사용자는 바뀌지 않겠지요. 외국에서도 크로스 브라우징을 하지말고 최신의 브라우저로 좀 더 나은 사용자 경험을 얻을 수 있게 하자는 의견이 나오고 있습니다. Stupid 브라우저 (IE 브라우저를 칭하는 말)는 Stupid하게 렌더링되는 게 당연한 것이 아닐까 합니다. 크로스 브라우징에 노동력과 시간을 허비하는 일이 없기를 바래봅니다.

Border로 이미지 대체

예전에는 콘텐츠 구분을 위해 구획을 나누는 일종의 bar를 이미지로 만들어 적용했다. CSS를 이용해 이를 쉽게 구현해 보자.

콘텐츠와 콘텐츠 사이에 border 값을 적용해서 구현했다. 왼쪽 콘텐츠의 border-right 값을 배경보단 어두운 색으로 지정하고 오른쪽 콘텐츠의 border-left 값을 배경보단 밝게 지정한다.

왼쪽

오른쪽

왼쪽

오른쪽

오른쪽

왼쪽

단일 콘텐츠일 경우나 CSS3를 사용할수 있는 환경에서는box-shadow를 사용할 수도 있다. border-left 값을 배경보다 밝은색으로 지정하고, box-shadow 값을 x축에 -1px 값을 주어 설정했다. 같은 방식으로 위, 아래, 우측에 효과를 줄 수 있다.

콘텐츠