이쪽 계통에서 일한지도 상당히 오래 되었는데..
프론트앤드 쪽 코딩을 하기 시작한지도 꽤 오래되었는데…

정말 생각조차도 못해본 놀라운 사실을 하나 알게되었다.

결론부터 이야기하자면

<img>에 CSS 속성 중 하나인 background가 적용된다는 것!!

그래서..?
그게 뭐?
할 수도 있다.

왜냐면 img 배경색을 어떻게 칠한다고 한들 어짜피 img의 src에 적용된 이미지가 표시되기 때문에 보이지도 않지 않는가? 라고 할 수도 있지만 이게 투명 배경을 지원하는 png이미지 일 경우에는 이야기가 달라진다.

현재 만들고 있는 사이트의 경우 컨텐츠 영역에 png 투명 이미지 및 rgba(255, 255, 255, 0.9) 정도의 색상 속성을 사용하여 약간 투명한 흰색 배경을 사용 중이다. 때문에 사진 같은 이미지가 아닌 조직도와 같이 배경이 투명해야할 이미지도 넣어야 하는데 이게 그냥 넣으면 영 심심한 것이다.

워낙 내용은 적고 배경은 훵해서 비어보인다는 것.
때문에 그리드를 좀 삽입해 빈 영역 채우는 방향으로 이미지를 만들기로 하였다.

조건을 만족하기 위한 고민..

처음에는 이미지자체에 그리드를 입히는 식의 예전 방식으로 작업하려고 하였으나 그리드가 어긋나는 것도 있고 이미지 파일 자체의 크기도 그리드를 넣은 것이 그렇지 않은 것보다 커지기 때문에 다른 방식을 고려해보려고 하였다.

하지만 문제는 아래의 조건을 만족하면서 바로 밑의 소스상에서 이를 구현해야 하는 것.

<a href=”#” ><img src=”조직도이미지주소” /></a>

그 조건이란?

  • img를 a로 둘러쌓은 후 클릭시 fancybox와 같은 효과를 주어야 한다. (이 글 아래의 이미지를 클릭하면 나오는 효과)
  • a 에는 display:block 속성을 주고 text-align:center를 주어 a속의 이미지를 가운데 정렬 시켜야 한다.
  • img에는 기본적으로 border:1px silver solid 로 border를 입혀야 한다.
  • 조직도 이미지는 투명 png 이며 여기에는 그리드가 표시되지 않아야 한다.

위의 조건을 HTML 상에서는 a와 img 태그만을 이용하여 만족시키면서 딱 이미지 영역 만큼 배경으로 그리드를 깔아야 하는 상황이 벌어진 것이다.

흠… 원래 간단히 생각하면 위의 소스에 하나의 태그를 더 추가한 후 거기에 background-image 속성을 이용하여 그리드를 패턴으로 넣는 방식이면 된다. 하지만 소스의 간결성과 재사용성을 위해 그런 방식으로 처리하기는 싫었다.

조직도 배경은 완전 투명한 png 이미지. 하지만 a에 그리드 패턴을 깔면 딱 이미지 영역(회색보더)만큼 넣을 수 없고 각 a 마다 width를 지정하지 않는 이상 컨텐츠 영역만큼 그리드가 깔리게 된다.
조직도 배경은 완전 투명한 png 이미지. 하지만 a에 그리드 패턴을 깔면 딱 이미지 영역(회색보더)만큼 넣을 수 없고 각 a 마다 width를 지정하지 않는 이상 컨텐츠 영역만큼 그리드가 깔리게 된다.

img에 background-image 속성이 먹히다니!!

그런데 문득..
img 도 엘리먼트인데 여기도 분명 background 속성이 있는데 이걸로 그리드 패턴을 깔면 안되나? 하는 생각이 들었다.

그리고 걍 시도해보았다.
그런데 결과는??

된다!!

background-color도 먹고 background-image도 먹는다!
IE7~9, 크롬, 파이어폭스 등에서 테스트해본 결과 모두 먹는다!! 헐…

이야….
아니…..
내가 이걸 왜 지금까지 몰라서 한번도 써먹지를 못했지? 하는 아쉬움과 함께 이런식으로 문제가 해결될 수 있다는 것에 신기했다.ㅋ

이걸 어디다 써먹을까?

이런 방식을 좀 더 활용하자면
아래의 그림에서와 같이 hover시에 img의 background 색상이나 이미지를 다른 걸로 치환도 가능하다.

평상시 그리드 색상은 회색, 하지만 hover시에는 border색과 같은 색상의 그리드를 background-image를 치환해 적용할 수 있다.
평상시 그리드 색상은 회색, 하지만 hover시에는 border색과 같은 색상의 그리드를 background-image를 치환해 적용할 수 있다.

또한 웹상에서는 그리드 배경을 표시하면서도 같은 이미지를 다른 곳에 이용할때 배경이 투명하므로 배경색이 들어있는 ppt 등에 넣어도 다른 수정이 필요없이 바로 삽입이 가능하다.

아… 투명png와 img backgroun의 조합으로 이런식의 활용이 가능하다니…

현재 제작중인 사이트에서 라파엘SVG를 이용하여 이미지를 대체하는 방법도 적용하고 있는데 가까운 미래에 이런 종류의 방법을 모두 써먹을 수 있는 환경이 주어진다면 웹제작수순이 훨씬 간단해지고 활용범위는 더욱 넓어질 것이 분명하다.

HTML5, CSS3, SVG, WebGL로 펼쳐질 새로운 웹의 세계가 얼마남지 않았다!

이 글의 관련글

Tags:

2 Comments

  1. 이 png를 만든사람은 난데 전 그저 어리둥절할 따름입니다 사실 저는 과장님이 왜 놀라하는지두 잘 모르겠어요 그냥 이미지가 멋있으니까 기분좋을 따름이에요성령이 성골다이어그램에 강림하셨어요

    1. ㅇㅇ 모르는게 당연하지ㅋ
      나도 누가 첨부터 이거 알려주었으면 ㅇㅇ? 그게 뭐? 다 알고 있는거 아냐? 라고 했을꺼야ㅋ

      그런데 내가 지금까지 이걸 왜 몰랐을까 하고 생각해보았는데
      이 팁이 검색으로 나오기가 상당히 애매할 것 같더라구.

      이미지 background인데..
      이건 당연히 css에서 background-image로 나오는 결과물이 태반이구 말이야..

      나는 이런식으로 가능하다는걸 지금까지 그 수많은 검색과 노하우와 팁에 관련된 글을 보아왔어도 한번도 못보았기 때문에 첫번째로 놀랐고

      두번째로 이 팁을 이용하면 정말 많은 활용이 가능하기 때문에 그 가능성에 또 한번 놀란거야

      미선씨야ㅋ
      맨날 내가하는거 보고 놀래는 거에 연속이니까ㅋㅋㅋㅋㅋ

      어쨌든 다음에 이걸 활용해서 멋진걸 또 만들 수 있을 것 같으니 기대해ㅋ

      근데 지금보니 왜 성골미선이 아닌 성골 선미야?ㅋ
      그 놈의 오타는ㅋㅋ

Leave a Reply

Your email address will not be published. Required fields are marked *