<style type="text/css">
.css_test {
margin-top : 20px;
}
.css_test img {
margin-top : 5px;
width : 200px;
}
.css_test .border_radius {
border-radius : 30px;
}
.css_test .box_shadow {
box-shadow : 0 0 3px gray;
}
.css_test .border {
border : 3px solid gray;
}
.css_test .padding {
padding : 5px;
}
</style>
아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br><br>
<button type="button"
onclick="$('.css_test img')
.toggleClass('border_radius')">border-radius</button>
<button type="button"
onclick="$('.css_test img')
.toggleClass('box_shadow')">box-shadow</button>
<button type="button"
onclick="$('.css_test img')
.toggleClass('border')">border</button>
<button type="button"
onclick="$('.css_test img')
.toggleClass('padding')">padding</button>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/216F4139550B923E33" />
<img src="https://t1.daumcdn.net/cfile/tistory/267D3750550B9B3D0D" />
<img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" /><br>
<img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" />
<img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" />
<img src="https://t1.daumcdn.net/cfile/tistory/217BF13954D74FB720" />
</div>