<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <body>
        <div class="box">
            <p>과일을 골라주세요</p>
            <img src="" alt="" width="200px" />
        </div>

        <br />

        <button type="button" onclick="changeApple()">사과</button>
        <button type="button" onclick="changeBanana()">바나나</button>
        <button type="button" onclick="changeGrape()">포도</button>
        <button type="button" onclick="changePeach()">복숭아</button>

        <script src="prac.js"></script>
    </body>
 <style>
            .box {
                border: 4px solid black;
                border-radius: 20px;
            }
            img {
                width: 300px;
                height: 300px;
                border-radius: 20px;
            }
        </style>
$('.box').css('width', '300px');
$('.box').css('height', '300px');
$('.box').css('background-color', 'beige');
$('p').css('text-align', 'center');
$('p').css('margin-top', '130px');

function changeApple() {
    $('img').attr('src', 'apple.jpeg');
    $('p').remove();
}
function changeBanana() {
    $('img').attr('src', 'banana.jpeg');
    $('p').remove();
}
function changeGrape() {
    $('img').attr('src', 'grape.jpeg');
    $('p').remove();
}
function changePeach() {
    $('img').attr('src', 'peach.jpeg');
    $('p').remove();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.