반응형
부트스트랩이나 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 |
