게시판 만들기 4 목록 html 파일 만들기

게시판의 기능 중 목록은 가장 처음 만나는 화면이다. 가장 많이 접하면서 정보를 제공하는 화면 중 하나이다. 목록의 형태는 다르지만 기본적인 기능은 같다. 여러 데이터를 목록처럼 보여주는 것은 맞지만 어떻게 표현해야 하는지는 컨텐츠의 성격에 따라 다르다.

게시판 만들기 4
목록 html 파일 만들기

목록의 기능은 같다.

텍스트형태의 목록이든 이미지형태의 목록이든 다 같은 목록이다.

그렇기에 화면에 표현하는 방법은 다르지만 기능적으로 다르지 않다.

여기서는 단순히 목록형태의 게시판을 다루고 스타일은 무시한다.

목록 화면의 기능

기능부터 정리해 보자.

목록은 기본적으로 여러 데이터를 한 화면에 보여주는 것이다.

그렇기에 몇가지 기능이 존재한다.

조회
목록에 표시되는 데이터를 보여준다.
등록
신규로 등록할 글쓰기 작성 화면으로 이동할 수 있도록 한다.
보기
등록된 글내요을 볼 수 있도록 보기 화면으로 이동할 수 있도록 한다.

검색, 페이징 또는 페이지네비게이션, 삭제, 답변형 기능은 나중으로 미룬다.

목록 화면 하나만 가지고도 쓸데없이 많은 얘기가 나올 수 있다.

목록 html 만들기

목록화면은 단순하다.

단순히 table 태그로 만들 수 있고 ul 태그를 이용할 수 있다.

div 를 이용한 박스모델을 이용해 카드형태로 할 수 있다.

쉬운 형태로 가자.

table 형태를 이용하여 템플릿을 만들 것이다.

table 은 전형적으로 목록에 사용되기도 한다.

<!-- html5 기본템플릿 -->
<!DOCTYPE html>

    <!-- head -->
    <head>
        
        <!-- meta SEO 컨텐츠 -->
        <meta name="title" content="목록화면">
        <meta name="description" content="목록화면입니다.">
        <meta name="keywords" content="목록">
        <meta name="author" content="개코">
        <meta name="copyright" content="개코">
        <!-- // -->

        <!-- meta 반응형 웹표준 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- // -->

        <!-- 스타일 -->
        <style></style>
        <!-- // -->

    </head>
    <!-- // -->

    <!-- body -->
    <body>
        <div>
            <h2>
                목록 화면
            </h2>
        </div>
        <div>
            <button>등록</button>
        </div>
        <table>
            <thead></thead>
            <tbody>
                <!-- 목록 반복 -->
                <tr>
                    <td>
                        <p><small>작성일 / 작성자</small></p>
                        <p><big><b>제목</b></big></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p><small>작성일 / 작성자</small></p>
                        <p><big><b>제목</b></big></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p><small>작성일 / 작성자</small></p>
                        <p><big><b>제목</b></big></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p><small>작성일 / 작성자</small></p>
                        <p><big><b>제목</b></big></p>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p><small>작성일 / 작성자</small></p>
                        <p><big><b>제목</b></big></p>
                    </td>
                </tr>
                <!-- // -->
            </tbody>
        </table>
    </body>
    <!-- // -->

    <!-- 자바스크립트 -->
    <script type="text/javascript"></script>
    <!-- // -->

</html>

볼품없다. 정말 볼품없지만 여기부터 시작이다.

기본적인 기능을 먼저 만든 후 모양새를 바꾸면 된다.

html 모양은 스타일시트를 적용하면 것이기에 나중으로 미룬다.

자바스크립트에 대한 기능은 추후에 다룰 것이다.

'programming > MakinGProJect' 카테고리의 다른 글

게시판 만들기 5 보기화면 html 파일 만들기 (0)	2021.10.17
게시판 만들기 5 등록 html 파일 만들기 (0)	2021.10.16
게시판 3 기본 html 파일 만들기 (0)	2021.10.14
게시판 만들기 2 게시판 html 파일 구조와 파일명 만들기 (0)	2021.10.13
게시판 만들기 1 기획 무엇이 필요한가 (0)	2021.10.12