이번 글에서는 자바스크립트를 사용하여 CSS Grid를 활용한 실시간 채팅 UI를 만드는 방법에 대해 알아보겠습니다. 채팅 UI를 구현하기 위해서는 HTML, CSS, 그리고 자바스크립트를 모두 활용해야 합니다.

CSS Grid 소개

CSS Grid는 웹 디자인에서 레이아웃을 구성하기 위한 강력한 기능입니다. 그리드 레이아웃은 행과 열로 이루어진 그리드를 기반으로 요소를 배치하고 정렬할 수 있습니다. 채팅 UI를 구현하기 위해서는 그리드 레이아웃을 사용하여 화면을 구성할 수 있습니다.

HTML 구조 설정

먼저, HTML에서는 체팅창, 메시지 입력창, 전송 버튼 등 필요한 요소들을 구성합니다. 자세한 예제 코드는 아래와 같습니다.

<div class="chat-container">
  <div class="message-container">
    <div class="message">안녕하세요!</div>
    <div class="message">반갑습니다.</div>
  </div>
  <input type="text" id="input-message" />
  <button id="send-button">전송</button>
</div>

CSS 스타일링

CSS에서는 CSS Grid를 사용하여 채팅창의 레이아웃을 구성합니다. 아래는 예제 스타일 코드입니다.

.chat-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 20px;
  border: 1px solid #ccc;
}

.message-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(50px, auto));
  gap: 10px;
  overflow-y: auto;
  max-height: 200px;
}

.message {
  background-color: #eee;
  padding: 10px;
}

#input-message {
  grid-column: 1 / 2;
}

#send-button {
  grid-column: 2 / 3;
}

자바스크립트로 실시간 채팅 기능 구현하기

자바스크립트를 사용하여 실시간 채팅 기능을 구현할 수 있습니다. 이 예제에서는 간단하게 전송 버튼을 클릭하면 입력한 메시지를 채팅창에 추가하는 기능을 구현해보겠습니다.

const messageContainer = document.querySelector('.message-container');
const inputMessage = document.querySelector('#input-message');
const sendButton = document.querySelector('#send-button');

sendButton.addEventListener('click', () => {
  const messageText = inputMessage.value;
  if (messageText.trim() !== '') {
    const newMessage = document.createElement('div');
    newMessage.classList.add('message');
    newMessage.textContent = messageText;
    messageContainer.appendChild(newMessage);
    inputMessage.value = '';
  }
});

마무리

위와 같이 자바스크립트를 사용하여 CSS Grid를 활용한 실시간 채팅 UI를 구현할 수 있습니다. 이 예제는 단순한 기능 구현을 위한 예시이며, 실제 채팅 애플리케이션은 더 많은 기능과 보안을 고려해야 합니다. 여러분은 이 예제를 기반으로 다양한 기능을 추가하고 발전시킬 수 있습니다.

#javascript #css #grid #채팅