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/213D5338550B92391D" />
</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/276870375501AED00D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2730B94D55AC84A92F" />
    <img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" /><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2552A23854D74C4E0B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
</div>