자바스크립트를 이용하여 CSS Grid 레이아웃을 활용한 게시판 만들기

18 Sep 2023

소개

CSS Grid를 활용하면 웹 페이지의 레이아웃을 매우 쉽게 구성할 수 있습니다. 이번에는 자바스크립트와 CSS Grid를 이용하여 게시판을 만들어보겠습니다. 이 게시판은 유저가 게시글을 작성하고, 댓글을 작성할 수 있는 기능을 구현합니다.

개발 환경

HTML5
CSS3
자바스크립트

HTML 구조

<div class="board-container">
    <div class="board-header">
        <h2>게시판</h2>
    </div>
    <div class="board-content">
        <div class="post-form">
            <textarea id="post-input" placeholder="게시글 작성"></textarea>
            <button id="post-button">작성</button>
        </div>
        <div class="post-list">
            <!-- 게시글 목록이 동적으로 생성될 예정입니다. -->
        </div>
    </div>
</div>

CSS Grid 적용

.board-container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 20px;
}

.board-header {
    text-align: center;
}

.post-form, .post-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.post-form textarea {
    grid-column: 1 / span 2;
}

.post-list {
    grid-template-columns: repeat(3, 1fr);
}

게시글 작성 기능

const postInput = document.getElementById('post-input');
const postButton = document.getElementById('post-button');
const postList = document.querySelector('.post-list');

postButton.addEventListener('click', () => {
    const postContent = postInput.value;
    if (postContent) {
        const postElement = document.createElement('div');
        postElement.classList.add('post');
        postElement.textContent = postContent;
        postList.appendChild(postElement);
        postInput.value = "";
    }
});

댓글 작성 기능 (예시)

const postList = document.querySelector('.post-list');

postList.addEventListener('click', (event) => {
    const postElement = event.target;
    if (postElement.classList.contains('post')) {
        const comment = prompt("댓글을 작성하세요.");
        if (comment) {
            const commentElement = document.createElement('div');
            commentElement.classList.add('comment');
            commentElement.textContent = comment;
            postElement.appendChild(commentElement);
        }
    }
});

마치며

이렇게 자바스크립트와 CSS Grid를 이용하여 게시판을 만들어보았습니다. 게시글 작성과 댓글 작성 기능을 구현하였으니, 필요에 따라 확장하여 원하는 기능을 추가할 수 있습니다. CSS Grid를 활용하면 반응형 레이아웃을 쉽게 구성할 수 있으므로, 다양한 프로젝트에 적용해보시기 바랍니다.

#javascript #cssgrid #게시판 #자바스크립트