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 |