- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면입니다.
html 코드 화면입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 페이지</title>
<!-- css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- script -->
<script defer src="assets/js/common.js"></script>
</head>
<body class="gray">
<div id="skip">
<a href="#header">헤더 영역 바로가기</a>
<a href="#main">헤더 영역 바로가기</a>
<a href="#footer">헤더 영역 바로가기</a>
</div>
<!-- skip -->
<header id="header">
<div class="header_inner container">
<div class="left">
<a href="../index.html" class="star"></a><span class="blind">메인으로</span>
</div>
<h1 class="logo">
<a href="main.html">Developer Blog</a>
</h1>
<div class="right">
<ul>
<li><a href="join.html">회원가입</a></li>
</ul>
</div>
</div>
<nav class="nav_inner">
<ul>
<li><a href="join.html">회원가입</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">게시판</a></li>
<li><a href="#">블로그</a></li>
</ul>
</nav>
</header>
<!-- header -->
<main id="main" class="container">
<div class="intro_inner center bmStyle">
<div class="intro_images" style="margin-top:80px;">
<!-- <img src="assets/img/intro01.png" alt="소개이미지"> -->
<picture>
<source
srcset="assets/img/board01.png , assets/img/board01@2x.png 2x, assets/img/board01@3x.png 3x">
<img src="assets/img/board01.png" alt="소개이미지">
</picture>
</div>
<h2 style="margin:50px 0; font-size:40px;">게시판</h2>
<p class="intro_text" style="font-size: 20px; margin-bottom: 80px;">
웹디자이너, 웹퍼블리셔,프론트엔드 개발자를 위한 게시판입니다.<br>관련된 문의사항은 여기서 확인하세요.
</p>
</div>
<!-- intro_inner -->
<div class="board_inner">
<div class="board_form">
<form action="#" name="#" method="post">
<!-- <table border="1" style="width: 100%;">
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col" style="width: 700px;">제목</th>
<th scope="col">등록자</th>
<th scope="col">등록일</th>
<th scope="col">조회수</th>
</tr>
</thead>
</table> -->
<div id="board-search">
<div class="container">
<div class="search-window">
<form action="">
<div class="search-wrap">
<div class="inner">
<div>
<p>*총<span>1111</span>건의 게시물이 등록되어 있습니다.</p>
</div>
<div>
<input id="search" type="search" name="" placeholder="검색어를 입력해주세요." value="" >
<select type="submit">
<option value="제목">제목</option>
<option value="제목">등록자</option>
</select>
<button type="submit">검색</button>
<div><a href="#">글쓰기</a></div>
</div>
</div>
</div>
<div id="board-list">
<div class="container">
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>등록자</th>
<th>등록일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-21</td>
<td>100</td>
</tr>
<tr>
<td>9</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-22</td>
<td>100</td>
</tr>
<tr>
<td>8</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>7</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>6</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>5</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
<tr>
<td>1</td>
<td>게시판 제목 영역입니다. 아직 제목이 없어요!</td>
<td>전윤기</td>
<td>2023-04-20</td>
<td>100</td>
</tr>
</tbody>
</table>
<div class="list bmStyle">
<button>처음으로</button>
<button>이전</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>다음</button>
<button>마지막으로</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- board list area -->
</section>
</form>
<footer id="footer">
<p>Copyright © 2023 juneyungi</p>
<p>blog by juneyungi</p>
</footer>
</div>
</div>
<!-- join_inner -->
</main>
<!-- main -->
<footer id="footer">
<div class="footer_inner"></div>
</footer>
<!-- footer -->
</body>
</html>
CSS코드입니다.
#board-search .inner {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-content: center;
align-items: flex-end;
}
#board-search .inner div:nth-child(1){
}
#board-search .inner div:nth-child(2){
display: flex;
}
#board-search .inner button {
cursor: pointer;
width: 100px;
height: 40px;
background-color: #fff;
border-radius: 10px;
}
#board-search .inner div:nth-child(2) input {
margin-right: 5px;
width: 270px;
height: 40px;
border-radius: 10px;
border: 1px solid #fff;
}
#board-search .inner div:nth-child(2) select {
width: 100px;
height: 40px;
background-color: #fff;
border-radius: 10px;
margin-right: 5px;
text-align: center;
}
#board-search .inner div:nth-child(2) > div {
width: 100px;
height: 40px;
background-color: #000;
border-radius: 10px;
line-height: 40px;
text-align: center;
margin-left: 5px ;
}
#board-search .inner div:nth-child(2) > div a {
color: #fff;
}
.board_form {
width: 100%;
margin:170px 0 95px;
}
.board_form p {
width: 400px;
}
.board_form p span{
color: red;
}
#board-list table {
width: 100%;
text-align: center;
border-spacing : 0;
border-collapse : collapse;
}
#board-list tr {
height: 55px;
}
#board-list thead tr {
background-color: #CACACA;
border-bottom: 1px solid #000;
border-top: 2px solid #000;
}
#board-list thead th:nth-of-type(2){
width: 800px;
}
#board-list tbody tr {
border-bottom: 1px solid #000;
}
#board-list .list {
margin-top: 70px;
display: flex;
align-content: center;
justify-content: center;
}
#board-list .list button {
border: 1px solid #cacaca;
width: 36px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 95px;
cursor: pointer;
}
#board-list .list button:first-child {
width: 80px;
}
#board-list .list button:nth-child(2){
width: 60px;
}
#board-list .list button:nth-child(3){
background-color: #000;
color: #fff;
}
#board-list .list button:nth-child(11){
width: 60px;
}
#board-list .list button:last-child {
width: 90px;
}
.board_form #footer {
display: flex;
justify-content: space-between;
margin-top: 5px;
color: #aaa;
}
.board_form #footer p:nth-child(2){
text-align: right;
}