본문 바로가기
PHP로 웹사이트 만들기

6. PHP와 MySQL로 게시판 만들기: 게시판 디자인

by blogfine 2025. 1. 27.

게시판 디자인: HTML과 CSS로 게시판 레이아웃 만들기

게시판 시스템을 구축하는 데 있어 기능 구현만큼 중요한 부분은 바로 디자인입니다. 사용자 친화적인 게시판 레이아웃은 사용자가 웹사이트를 이용하는 데 있어 중요한 요소입니다. 이번 글에서는 HTML과 CSS를 사용하여 간단하고 깔끔한 게시판 레이아웃을 만드는 방법을 알려드립니다. 기본적인 게시판 레이아웃을 만들고, 스타일을 추가하여 사용자가 편리하게 이용할 수 있는 게시판 디자인을 구현해 보겠습니다.

1. 게시판 레이아웃 구조 설계

게시판의 기본적인 레이아웃은 크게 두 가지 영역으로 나눌 수 있습니다: 게시글 목록 영역과 게시글 작성 또는 상세 보기 영역입니다. 게시글 목록 영역은 사용자들이 다른 게시글을 확인할 수 있도록 하며, 게시글 작성 영역은 새로운 게시글을 작성할 수 있도록 돕습니다.

먼저, 게시판 레이아웃을 설계할 때 어떤 요소들이 필요한지 정리해보겠습니다:

  • 게시글 목록: 게시글의 제목, 작성일, 작성자 등의 정보가 나열되는 부분
  • 게시글 상세보기: 각 게시글을 클릭했을 때 나타나는 상세 내용 페이지
  • 게시글 작성 폼: 사용자가 새로운 게시글을 작성할 수 있는 폼
  • 헤더와 푸터: 게시판의 상단과 하단에 위치하는 네비게이션과 저작권 정보 등

이제 각 요소에 대한 HTML과 CSS를 작성하여 기본적인 레이아웃을 구현해보겠습니다.

2. HTML로 기본 게시판 구조 만들기

먼저 게시판의 기본 구조를 HTML로 작성합니다. 게시글 목록, 게시글 작성 폼, 그리고 헤더와 푸터를 포함한 기본적인 HTML 구조는 다음과 같습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>나의 게시판</h1>
        <nav>
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">게시판</a></li>
                <li><a href="#">작성하기</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="board-list">
            <h2>게시글 목록</h2>
            <ul>
                <li><a href="#">게시글 제목 1</a> - 작성자: 홍길동</li>
                <li><a href="#">게시글 제목 2</a> - 작성자: 김철수</li>
                <li><a href="#">게시글 제목 3</a> - 작성자: 박지훈</li>
            </ul>
        </section>

        <section class="post-form">
            <h2>새 게시글 작성</h2>
            <form action="#" method="POST">
                <label for="title">제목:</label>
                <input type="text" id="title" name="title" required><br><br>

                <label for="content">내용:</label>
                <textarea id="content" name="content" required></textarea><br><br>

                <button type="submit">게시글 작성</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 나의 게시판</p>
    </footer>
</body>
</html>

위 HTML 코드는 게시판의 기본적인 구조를 만듭니다. 헤더에는 게시판 제목과 네비게이션 메뉴가 있으며, 메인 콘텐츠 영역에는 게시글 목록과 게시글 작성 폼이 포함되어 있습니다. 마지막으로 푸터에는 저작권 정보가 있습니다.

3. CSS로 게시판 디자인 꾸미기

이제 HTML 구조에 스타일을 추가하여 게시판을 더 보기 좋게 꾸며보겠습니다. CSS를 사용하여 게시판을 더욱 사용자 친화적이고 직관적으로 만들 수 있습니다. 아래는 기본적인 스타일링 예시입니다:


/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

main {
    padding: 20px;
}

.board-list {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.board-list h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.board-list ul {
    list-style-type: none;
    padding: 0;
}

.board-list ul li {
    margin-bottom: 10px;
}

.board-list ul li a {
    color: #333;
    text-decoration: none;
    font-size: 1.1em;
}

.board-list ul li a:hover {
    text-decoration: underline;
}

.post-form {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.post-form h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.post-form label {
    font-size: 1.1em;
}

.post-form input, .post-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.post-form button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.post-form button:hover {
    background-color: #45a049;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    position: fixed;
    width: 100%;
    bottom: 0;
}

위의 CSS 코드는 게시판의 각 요소를 꾸미는 데 사용됩니다. 헤더와 네비게이션 메뉴는 기본적인 스타일을 적용하고, 게시글 목록과 작성 폼은 박스 모델을 활용하여 적절한 간격을 주었습니다. 또한, 게시글 제목에 마우스를 올렸을 때 하이라이트 되는 효과를 추가하여 사용자 경험을 향상시켰습니다.

4. 게시판 디자인 개선 및 추가 기능

기본적인 게시판 레이아웃을 만든 후, 사용자의 편의성을 고려하여 추가적인 디자인 요소를 개선할 수 있습니다. 예를 들어, 게시글 목록에 페이지 네비게이션을 추가하거나, 게시글 상세보기 페이지를 추가하여 사용자가 더 많은 정보를 쉽게 확인할 수 있도록 할 수 있습니다.

추가로, 사용자가 게시글을 검색할 수 있는 기능을 제공하면 게시판을 더욱 유용하게 만들 수 있습니다. 검색창을 추가하여 제목 또는 내용을 기준으로 게시글을 검색하는 기능을 구현해 보세요.

5. 마무리

HTML과 CSS를 활용하여 간단한 게시판 레이아웃을 만드는 방법을 알아보았습니다. 게시판의 디자인은 사용자 경험에 큰 영향을 미칩니다. 깔끔하고 직관적인 디자인을 적용하여 사용자들이 게시판을 편리하게 사용할 수 있도록 도와주세요. 기본적인 디자인을 바탕으로 다양한 기능을 추가하며, 게시판을 더욱 발전시킬 수 있습니다.

게시판 디자인은 여러 가지 방법으로 개선할 수 있으니, 자신의 스타일에 맞는 디자인을 적용하고, 사용자가 더 쉽게 이용할 수 있도록 UI/UX를 고려한 개선을 해보세요.

'PHP로 웹사이트 만들기' 카테고리의 다른 글

8. PHP와 MySQL로 게시판 만들기: 게시판에 사용자 등록 기능 추가하기  (0) 2025.01.29
7. PHP와 MySQL로 게시판 만들기: 게시글 저장 및 조회 기능 구현하기  (0) 2025.01.28
5. PHP와 MySQL로 게시판 만들기: PHP로 게시판 CRUD 기능 만들기  (0) 2025.01.26
4. PHP와 MySQL로 게시판 만들기: PHP와 MySQL로 데이터베이스 설계하기  (0) 2025.01.25
3. PHP와 MySQL로 게시판 만들기: MySQL 설치 및 설정  (0) 2025.01.24

관련글

티스토리툴바