- 위 이미지에서 주문한 제품인 "인두세트" 왼쪽에 동그란 이미지가 예제입니다.
- 마스킹과 이미지 스프라이트 둘다 사용되었습니다.
마스킹 기법과 이미지 스프라이트 기법
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
네이버 쇼핑의 주문확인페이지에서 소스분해 하였습니다.
간단한 예제로 마스킹 기법과 이미지 스프라이트가 무엇인지 알아볼 수 있는 예제입니다.
단계별로 만들어지는 과정을 예제로 만들어 보았습니다.
예제 1
네** 쇼핑 마이페이지 일부분 화면
보기
설명
예제 2
이미지를 준비합니다
보기
상품이미지
이미지스프라이트 기법에 사용할 배경이미지 (출처 : 네이버)
네이버 쇼핑 마이페이지에 실제로 사용되는 이미지 입니다.
이미지스프라이트 기법에 사용할 배경이미지 (출처 : 네이버)
네이버 쇼핑 마이페이지에 실제로 사용되는 이미지 입니다.
설명
- 위 두개 이미지만 보면 대충 느낌이 오시나요? 눈치가 빠르시다면 아 저게 그거구나 하실 겁니다.
- 이제 이 두개를 합쳐보겠습니다.
- 이제 이 두개를 합쳐보겠습니다.
예제 3
먼저, 이미지 스프라이트 기법
보기
span 으로 네모칸을 만들고 그 안에 배경이미지를 적절히 위치하게 했습니다.
소스
span 으로 네모칸을 만들고 그 안에 배경이미지를 적절히 위치하게 했습니다.<br><br>
<style type="text/css">
.css_test .mask {
background-image : url('http://superkts.com/ufiles/readme_data/94d597b82638c683303e6abc8f462fbd.png');
background-repeat : no-repeat;
border-radius : 5px;
border : 5px solid gray;
display : inline-block;/* span 표시 속성을 변경 */
height : 104px;
width : 104px;
margin-bottom : 5px;
}
</style>
<div class="css_test">
<span class="mask" style="background-position:0 -90px;"></span>
<span class="mask" style="background-position:-110px -90px;"></span>
<span class="mask" style="background-position:-220px -90px;"></span>
<span class="mask" style="background-position:-330px -90px;"></span><br>
<span class="mask" style="background-position:-440px -90px;"></span>
<span class="mask" style="background-position:-220px -200px;"></span>
<span class="mask" style="background-position:-110px -200px;"></span>
</div>
<style type="text/css">
.css_test .mask {
background-image : url('http://superkts.com/ufiles/readme_data/94d597b82638c683303e6abc8f462fbd.png');
background-repeat : no-repeat;
border-radius : 5px;
border : 5px solid gray;
display : inline-block;/* span 표시 속성을 변경 */
height : 104px;
width : 104px;
margin-bottom : 5px;
}
</style>
<div class="css_test">
<span class="mask" style="background-position:0 -90px;"></span>
<span class="mask" style="background-position:-110px -90px;"></span>
<span class="mask" style="background-position:-220px -90px;"></span>
<span class="mask" style="background-position:-330px -90px;"></span><br>
<span class="mask" style="background-position:-440px -90px;"></span>
<span class="mask" style="background-position:-220px -200px;"></span>
<span class="mask" style="background-position:-110px -200px;"></span>
</div>
사용된 CSS (클릭시 보기) :
background-imagebackground-positionbackground-repeatborderborder-radiusdisplayheightmargin-bottomwidth
설명
- background-position 을 이용해서 배경의 위치를 조절해 주는 방법입니다.
- 이미지 스프라이트 기법은 예제처럼 간단합니다.
- 이 이미지는 가운데 부분이 투명인 png 이미지 입니다.
관련 예제 : background-position
위 예제를 참고하시면 금방 이해 하는데 도움이 됩니다.
예제 4
마스킹 기법
보기
소스
<style type="text/css">
.css_test a {
display : inline-block;
height : 104px;
position : relative;
width : 105px;
}
.css_test .mask {
background-image : url('http://superkts.com/ufiles/readme_data/94d597b82638c683303e6abc8f462fbd.png');
background-repeat : no-repeat;
height : 105px;
margin-bottom : 5px;
position : absolute;
width : 104px;
z-index : 101;
}
.css_test img {
height : 90px;
left : 50%;
margin : -45px 0 0 -45px;
position : absolute;
top : 50%;
width : 90px;
z-index : 100;
}
</style>
<div class="css_test">
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:0 -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:-110px -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:-220px -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
</div>
.css_test a {
display : inline-block;
height : 104px;
position : relative;
width : 105px;
}
.css_test .mask {
background-image : url('http://superkts.com/ufiles/readme_data/94d597b82638c683303e6abc8f462fbd.png');
background-repeat : no-repeat;
height : 105px;
margin-bottom : 5px;
position : absolute;
width : 104px;
z-index : 101;
}
.css_test img {
height : 90px;
left : 50%;
margin : -45px 0 0 -45px;
position : absolute;
top : 50%;
width : 90px;
z-index : 100;
}
</style>
<div class="css_test">
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:0 -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:-110px -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
<a href="javascript:alert('CSS 공작소 ^^')">
<span class="mask" style="background-position:-220px -90px;"></span>
<img src="http://superkts.com/ufiles/readme_data/5b357aab0fafdadaf41758b50adf3e06.jpg" />
</a>
</div>
사용된 CSS (클릭시 보기) :
background-imagebackground-positionbackground-repeatdisplayheightleftmarginmargin-bottompositiontopwidthz-index
설명
- 얼굴에 마스크를 쓰면 얼굴이 가려지고 눈이나 입만 보이게 되죠.
- 이 개념을 적용한것이 마스킹 기법입니다.
- 가릴것을 위에 올리고 그 밑으로 가려질 것을 배치시키는 방법입니다.
- 이 방법이 쉽지는 않지만 직접해보면 금방 익힐 수 있습니다.
- 예제를 자세히 살펴보세요 ^^
- span 에 이미지 스프라이트 기법을 적용하고
- 그것을 이미지 위로 배치시켜 마스킹 기법을 적용했습니다.