jQuery 공작소 : .addClass()

<style type="text/css">
    .css_test {
        text-align : center;
        margin-top : 10px;
    }
    .css_test.bold_text {
        font-weight : bold;
    }
    .css_test.blue_color {
        color : blue;
    }
    .css_test.big_text {
        font-size : 30pt !important;
    }
</style>

<button type="button" onclick="$('.css_test').addClass('bold_text')">클래스 적용1</button>
<button type="button" onclick="$('.css_test').addClass('blue_color')">클래스 적용2</button>
<button type="button" onclick="$('.css_test').addClass('big_text')">클래스 적용3</button>

<div class="css_test">
    제이쿼리 공작소 !!
</div>

<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test .border_radius {
        border-radius : 50px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 10px black;
    }
    .css_test .border {
        border : 5px solid #444;
    }
    .css_test .padding {
        padding : 10px;
    }
</style>

아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2408093354D74FB106" />
</div>

<style type="text/css">
    .css_test {
        margin-top : 20px;
    }
    .css_test img {
        margin-top : 5px;
        width : 160px;
    }
    .css_test .border_radius {
        border-radius : 30px;
    }
    .css_test .box_shadow {
        box-shadow : 0 0 5px black;
    }
    .css_test .border {
        border : 3px solid #444;
    }
    .css_test .padding {
        padding : 3px;
    }
</style>

아래 버튼을 눌러서 클래스를 적용해 보세요. ^^<br>
<button type="button" onclick="$('.css_test img').addClass('border_radius')">border-radius</button>
<button type="button" onclick="$('.css_test img').addClass('box_shadow')">box-shadow</button>
<button type="button" onclick="$('.css_test img').addClass('border')">border</button>
<button type="button" onclick="$('.css_test img').addClass('padding')">padding</button>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/27042F3354D74FB30A" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27581A3854D74C4E01" />
    <img src="https://t1.daumcdn.net/cfile/tistory/223CC93854D74C4E32" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/2132CA4F54D7351720" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2516AD3454D7331811" />
    <img src="https://t1.daumcdn.net/cfile/tistory/22528D4C550B9B3A03" />
</div>