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로 크기값을 따로 주는 번거로움을 피할 수 있습니다.