GIF 이미지 파일 없이 투명 이미지 만들어 쓰기

부트스트랩이나 CSS로 레이아웃을 잡는게 주류가 되면서 요즘은 잘 사용하지 않지만

메뉴나 레이아웃을 이미지를 사용해 잡은 경우 CSS로 특정 위치의 요소에 크기값을 일일이 주는 것이 생각보다 번거롭습니다.

특히 쇼핑몰의 상품 진열이 복잡한 경우 비어있는 배너 이미지 영역을 처리할 때 그렇습니다.

이런 경우 아얘 1px x 1px 투명 gif이미지를 만들어 크기를 잡아 배치를 하면 빈 영역에 대한 배치가 쉽게 끝나기도 하고, 나중에 이미지 대체를 하면 되기 때문에 실무에서 이런 방식을 자주 사용합니다.

물론 포토샵에서 1px x 1px 이미지를 배경 투명으로 해서 익스포트를 하는 수고는 해야 합니다.

이런 번거로움 없이

base64 인코딩으로 1px x 1px 투명 gif 이미지를 html 코드 안에 직접 정의를 할 수 있습니다.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

이 태그는 1px x 1px 인 gif 이미지가 화면에 표시되도록 해줍니다.

크기 속성값도 물론 줄 수 있습니다.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="200" height="200">

이렇게 하면 이미지 영역이 자리를 정확히 차지하기 때문에 배너작업할 때 CSS로 크기값을 따로 주는 번거로움을 피할 수 있습니다.

티스토리 이미지 썸네일 치환자 완벽정리 (15)	2019.02.07
티스토리 글을 최근 작성 글로 끌어올리기 (0)	2019.02.02
티스토리 신스킨 커버 슬라이드 배너 자동 로테이션 구현하기 (9)	2019.01.28
티스토리 날짜 표시 형식 자동 바꾸기 구현 (2)	2019.01.17
GIF 이미지 파일 없이 투명 이미지 만들어 쓰기 (0)	2018.12.01
IE9 이하 전용으로 CSS 클래스를 예외 처리하는 방법 (0)	2018.12.01
CSS로 만드는 입체 텍스트 효과 (0)	2018.10.25
웹브라우저별 CSS 호환성을 확인해보자. (2)	2018.10.25
웹 개발자/디자이너가 되기위해 알아두면 좋은 무료 강의 사이트들 (0)	2018.10.24

Comments