[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1)

2024년 08월 26일

Song hyun
작성자
2024.08.26.:21

728x90

[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1)

1. board-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시글 목록</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/boardList.css" />
</head>
<body>
    <!--헤더 섹션과 네비 영역-->
    <header>
        <nav class="nav-container">
            <div class="nav-item">
                <span class="menu-link" id="board">게시판</span>
            </div>
            <div class="nav-item" id="authLinks">
                <span class="menu-link" id="signIn">로그인</span>
                <span class="menu-link" id="signUp">회원가입</span>
            </div>
        </nav>
    </header>

    <main class="content-wrapper">
        
            <h1>게시글 상세보기 by JS </h1>
        </section>

        
        <div class="content-box">
            <div class="board-box">
                <div class="head">
                    <div class="head-1">번호</div>
                    <div class="head-2">제목</div>
                    <div class="head-3">작성자</div>
                    <div class="head-4">작성일</div>
                    <div class="head-5">조회수</div>
                </div>
                <div class="board-content-box">
                    <!--삭제 예정 : js 코드로 반복문을 활용하여 동적으로 컨텐트 만들기-->
                    <div class="board">
                        <div class="border-1">1</div>
                        <div class="border-2">후미진 어느 언덕에서 JS</div>
                        <div class="border-3">둘리</div>
                        <div class="border-4">2024.08.26</div>
                        <div class="border-5">11</div>
                    </div>
                </div>
                <!--페이징 영역-->
                <div class="button-box">
                    <div class="page-box">
                        <span class="left">◀</span>
                        <div class="num-box">
                            <span class="nul">1</span>
                        </div>
                        <span class="right">▶</span>
                    </div>
                    <div class="write-button-box">
                        <button type="button" class="btn">글쓰기</button>
                    </div>
                </div>
            </div>
            </div>
    </main>

    <script src="../js/header.js"></script>
    <script src="../js/boardList.js"></script>
</body>
</html>

2. boardList.css

.content-box{
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    width: 100%;
}

.board-box{
    display: flex;
    flex-direction: column;
}

.head, .board{
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

/* 제목, 컨텐트 공간 영역 맞추기  */
.head-1,
.board-1 {
    /*flex 속성 (고정 너비) */
    flex: 0 0 80px;
}

.head-2,
.board-2{
    /* 제목만 가변 너비 설정 */
    flex: 1;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.head-3,
.board-3,
.head-4,
.board-4,
.head-5,
.board-5{
    /* 고정 너비 */
    flex: 0 0 100px;
}

/* 하단 영역 */
.button-box{
    display: flex;
    flex-direction:  column;
    margin-top: 20px;
}

.page-box{
    display: flex;
    justify-content: center;
    padding: 20px;
}

.write-button-box{
    display: flex;
}

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 29. JavaScript를 사용한 글쓰기 기능 만들기 (0)	2024.08.28
[JavaScript] 28. JavaScript를 사용한 목록 페이지 만들기(3) (0)	2024.08.26
[JavaScript] 26. JavaScript를 사용한 헤더 만들기 (0)	2024.08.26
[JavaScript] 25. JavaScript를 사용한 로그인 만들기 (1) (0)	2024.08.23
[JavaScript] 24. JavaScript를 사용한 회원 가입 만들기 (3) (0)	2024.08.23

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 27. JavaScript를 사용한 목록 페이지 만들기(1)

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바