[jQuery] keyup 이벤트를 이용하여 입력 값에 따라 동적으로 카드 추가하기

26 Dec 2023

jQuery

jQuery를 사용하여 사용자의 입력 값에 따라 동적으로 카드를 추가할 수 있습니다. 이를 위해 keyup 이벤트를 사용하여 입력 필드의 값이 변경될 때마다 새로운 카드를 추가할 수 있습니다. 이를 통해 실시간으로 사용자의 입력을 반영한 결과를 보여줄 수 있습니다.

필요한 기술

HTML
CSS
jQuery

HTML 마크업

우선, 동적으로 추가될 카드의 틀을 만들기 위해 HTML 마크업을 작성합니다. 이 예시에서는 입력 필드 바로 아래에 카드를 추가하는 형태로 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>동적 카드 추가</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <input type="text" id="cardInput" placeholder="카드 내용 입력">
  <div id="cardContainer"></div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

jQuery를 이용한 카드 추가

다음으로, jQuery를 사용하여 입력 값이 변경될 때마다 카드를 추가하는 기능을 구현합니다. 아래는 script.js 파일에 구현한 예시 코드입니다.

$(document).ready(function() {
  $('#cardInput').on('keyup', function() {
    let inputVal = $(this).val();
    if (inputVal) {
      let newCard = `<div class="card">${inputVal}</div>`;
      $('#cardContainer').append(newCard);
    }
  });
});

위의 코드에서는 cardInput 요소의 keyup 이벤트를 감지하여 사용자의 입력을 확인하고, 입력값이 존재할 경우 cardContainer에 새로운 카드를 추가하는 기능을 구현했습니다.

CSS 스타일링

마지막으로, 동적으로 추가되는 카드의 스타일을 지정하기 위해 CSS를 이용하여 디자인을 작성합니다.

.card {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

결론

위의 코드를 이용하면 사용자의 입력 값에 따라 실시간으로 카드를 추가하여 동적으로 결과를 보여줄 수 있습니다. 이를 응용하여 더 다양하고 복잡한 기능을 구현할 수도 있습니다. jQuery를 사용하여 keyup 이벤트를 활용하는 방법을 익혀두면 다양한 웹 개발 상황에서 유용하게 활용할 수 있을 것입니다.