27일차 - image replacement 스타일기법 (IR처리)

img태그기법과 쌍벽을 이루는 IR기법

• 이미지로 보이지만, UI처럼 메타태그에 안 걸림!
• CSS 백그라운드에 이미지 replacement 처리
  ex) 마우스 롤오버 시, 색깔만 바뀌는 아이콘 (닫기/취소 버튼 등)

HTML

<h2>전체 유지보수 원활하도록 IR처리 _ 닫기버튼, 열기, 닫기, 로고</h2> 

<div class="wrap">
	<div class="btn">
		<a href="" class="login">
			<div class="sr-only">로그인</div>
		</a>
		<a href="" class="order">
			<div class="sr-only">배송</div>
		</a>
		<a href="" class="cart">
			<div class="sr-only">장바구니</div>
		</a>
	</div>
</div>

CSS

<style>
	body{ text-align: center;}
	*{ margin: 0; padding: 0;}
	a{ text-decoration: none;}
    
	.sr-only{ /* 사운드 온리 - 보이지 않고 소리만 들리도록 처리 */
		overflow: hidden !important;
		width:1px !important; height:1px !important;
		padding: 0 !important; margin: -1px !important;
		opacity: 0 !important;
	}
</style>

↓

<style>
	body{ text-align: center;}
	*{ margin: 0; padding: 0;}
	a{ text-decoration: none;}
	.sr-only{
		overflow: hidden !important;
		width:1px !important; height:1px !important;
		padding: 0 !important; margin: -1px !important;
		opacity: 0 !important;
	}
    
	.btn{ display: flex; 
		  justify-content: space-between; 
          align-items:flex-start; 
    }
</style>

↓
.btn a / 버튼들의 공통되는 부분을 작성

<style>
	body{ text-align: center;}
	*{ margin: 0; padding: 0;}
	a{ text-decoration: none;}
	.sr-only{
		overflow: hidden !important;
		width:1px !important; height:1px !important;
		padding: 0 !important; margin: -1px !important;
		opacity: 0 !important;
	}
    
	.btn{ 
    	display: flex; 
		justify-content: space-between; 
        align-items:flex-start;
    }
    
	.btn a{
		display: block; /* width 넣기 위함 */        
        width: 48px;
        height: 48px;
        background-image: url('https://c.011st.com/img/common/sprites/sp_gnb_2x_202291_163617.png');
        background-repeat: no-repeat;
        transition: 0.5s;           
	}
</style>

↓

이미지 좌표 따는 사이트 http://www.spritecow.com/

<style>
	body{ text-align: center;}
	*{ margin: 0; padding: 0;}
	a{ text-decoration: none;}
	.sr-only{
		overflow: hidden !important;
		width:1px !important; height:1px !important;
		padding: 0 !important; margin: -1px !important;
		opacity: 0 !important;
	}
    
	.btn{ 
    	display: flex; 
		justify-content: space-between; 
        align-items:flex-start;
    }
    
	.btn a{
		display: block; /* width 넣기 위함 */
        width: 48px;
        height: 48px;
        background-image: url('https://c.011st.com/img/common/sprites/sp_gnb_2x_202291_163617.png');
        background-repeat: no-repeat;
        transition: 0.5s;           
	}
    
	.btn .login{ background-position: -535px -237px; } /* 평소 UI */
	.btn .login:hover{ background-position: -624px -237px; } /* hover UI */
	.btn .cart{}
    .btn .order{}
    
    .wrap{ display: inline-block;}
</style>

---

결과물

+) 나머지도 추가

<style>

        .btn .login{ background-position: -535px -237px; }
        .btn .login:hover{ background-position: -624px -237px; }

        .btn .order{ background-position: -530px -59px; }
        .btn .order:hover{ background-position: -620px -59px; }

        .btn .cart{ background-position: -532px -151px; }
        .btn .cart:hover{ background-position: -622px -151px; }

        .wrap{ display: inline-block;}

</style>