CSS에서 처음알게된 놀라운 사실! img에도 background가 적용된다!!

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

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

결론부터 이야기하자면

<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로 펼쳐질 새로운 웹의 세계가 얼마남지 않았다!

최근 한달간 인기글

이 글의 관련글

REPLY AND TRACKBACK RSS http://blog.nemesys.co.kr/tt/rss/response/1042
REPLY AND TRACKBACK ATOM http://blog.nemesys.co.kr/tt/atom/response/1042
TRACKBACK ADDRESS
이 글에는 트랙백을 보낼 수 없습니다
REPLY RSS http://blog.nemesys.co.kr/tt/rss/comment/1042
REPLY ATOM http://blog.nemesys.co.kr/tt/atom/comment/1042
성골선미 
wrote at 2011/09/23 19:31
이 png를 만든사람은 난데 전 그저 어리둥절할 따름입니다 사실 저는 과장님이 왜 놀라하는지두 잘 모르겠어요 그냥 이미지가 멋있으니까 기분좋을 따름이에요성령이 성골다이어그램에 강림하셨어요
Nes 
wrote at 2011/09/25 19:15
ㅇㅇ 모르는게 당연하지ㅋ
나도 누가 첨부터 이거 알려주었으면 ㅇㅇ? 그게 뭐? 다 알고 있는거 아냐? 라고 했을꺼야ㅋ

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

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

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

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

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

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

근데 지금보니 왜 성골미선이 아닌 성골 선미야?ㅋ
그 놈의 오타는ㅋㅋ
이름 / Name : *
비밀번호 / Password : *
홈페이지 / Homepage :
비밀글 / Secret :
*1  ... *336  *337  *338  *339  *340  *341  *342  *343  *344  ... *1133 
  • 블로그 주인장 : Nes
  • 이메일 : [email protected]
  • 이 블로그는?
  • 방명록
  • 레퍼런스 사이트 : http://nemesys.co.kr
SNS + RSS Links
rss
다음 일간 이슈 검색어
Since 2006 Nes's Random Blogz
Total 10950812 T108 Y1083

1852

1337

google chart api graph

-30 days

today : 108

전체 (1133)
Nes이야기 (123)
하드웨어이야기 (260)
소프트웨어이야기 (27)
외국어이야기 (12)
IT/웹이야기 (248)
연예계/방송이야기 (145)
게임이야기 (96)
광고/제품이야기 (58)
여행/먹거리이야기 (45)
세상이야기 (98)
최근에 쓴 글
구글 딥마인드 알파고가 이세돌을 꺾은날, 애드센스로 ...
구글 설문지(구글 폼)에서 정규식으로 입력 내용 사전 ... (1)
유플러스 tv g 4k uhd 셋톱박스를 신모델인 tvg 우퍼2... (9)
신장의 야망 창조 전국입지전 - 삼국지 13의 재미를 뛰... (2)
구글 애널리틱스(Google Analytics) 보고서 및 대시보...
그래픽카드 견적을 뺀 이번 조립컴퓨터, 스카이레이크 ... (1)
기어s 웨어러블 요금제로도 올레 맴버쉽 포인트 사용이...
안드로이드 롤리팝 포팅 버전 기어s 3g 요금제 가입 후... (2)
tasker http post 기능을 활용해 스마트폰 이벤트를 sl...
삼국지13 간단 후기 - 역대 장수제 시리즈의 정점을 찍...
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10...
네이버 웹마스터도구 개편이 불러온 검색로직 및 트래...
삼성 갤럭시 기어s 롤리팝 포팅 후기 및 앱 사용기 (1)
삼성 갤럭시 기어s에 안드로이드 롤리팝 올리기 성공! (3)
CPU 잡아먹는 어베스트 avast mft utility(mftutil.exe...
유플러스 TVG 롤리팝 업데이트 후기(via 기기교체!!) (1)
블로그 포스팅이 점점 줄어드는 이유
u+ tv g 롤리팝 업데이트를 하릴없이 기다리며 써본 간... (9)
허니버터칩은 과연 꼬꼬면의 숙명을 피할 수 있을 것인가? (3)
LG유플러스 U+ tvg 4K UHD 간단 사용기 및 신구형 셋톱... (2)
구글 애널리틱스 웹로그 분석 공인 전문가 자격 인증 ...
스마트폰 사용 패턴 통계 및 분석 with Tasker & Googl... (5)
갤럭시 기어1 - 루팅 및 안드로이드 null롬 올린 후 두... (1)
옵티머스G프로 킷캣 업데이트 후 폰트변경 - 나눔바른...
갤럭시 기어1 - 루팅 및 안드로이드 커스텀 롬 사용기 ... (5)
구글 애널리틱스 UA 업그레이드 이후 애드센스 통계 안...
스마트폰 화면 밝기 어둡게해 야밤에 시력 보호하는 방법 (1)
블루투스 휴대용 스피커 로지텍 UE Boom 간단 리뷰 및 ...
구글 스프레드시트가 canvas를 활용해 만들어졌다니!! (1)
구글 드라이브 스프레드시트(엑셀)의 놀라운 기능 impo...