클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
이번에는 학원에서 피그마로 만든 게시판을
혼자서 만들어 보라는 숙제를 받았습니다.
하다가 테이블과 관련된 명령어 중 여백제거와 가로,세로 여백을 몰라서 찾아서 해봤습니다.~
HTML코드
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="assets/css/board.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">
<span class="blind">메인으로</span>
</a>
</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="#">회원가입</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">
<picture class="intro__images">
<source srcset="assets/img/join01.png, assets/img/join01@2x.png 2x, assets/img/join01@3x.png 3x" />
<img src="assets/img/join01.png" alt="회원가입 이미지">
</picture>
<p class="intro__text">
회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다.
</p>
</div>
<!-- //join__inner-->
<div class="board__inner container">
<div class="board__desc">
<div class="board__number">
<span>총 <em>1111</em>건의 게시물이 등록되어 있습니다.</span>
</div>
<div class="board__search">
<form>
<input type="text" placeholder="검색어를 입력해주세요~">
<button type="submit" class="search">검색</button>
<button class="write">글쓰기</button>
</form>
</div>
</div>
<!-- //board__desc -->
<div class="board__list">
<div class="board__lbox">
<table>
<thead>
<tr>
<th colspan="1">번호</th>
<th colspan="2">제목</th>
<th colspan="2">등록자</th>
<th colspan="2">등록일</th>
<th colspan="2">조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">1</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">2</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">3</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">4</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">5</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">6</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">7</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">8</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">9</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">10</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">11</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="1">12</td>
<td colspan="2">게시판 영역입니다. 아직 제목이 없어요.!</td>
<td colspan="2">안교남</td>
<td colspan="2">2023-04-20</td>
<td colspan="2">50</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- //board__list -->
<div class="board__dot">
<div class="board__dbox">
<ul>
<li><a href="#">처음으로</a></li>
<li><a href="#">이전</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">다음</a></li>
<li><a href="#">마지막으로</a></li>
</ul>
</div>
</div>
<!-- //board__dot -->
</div>
</main>
<!-- //main -->
<footer id="footer" class="container">
<div class="footer__inner">
<h5>Copyright@2023 AnGyonam</h5>
</div>
</footer>
<!-- //footer -->
</body>
</html>코드설명
1. div태그 .board__inner은 전체 영역입니다.
2. div태그 .board__desc은 게시판 위에 나타나는 "총 게시물"과 "검색","글쓰기" 버튼이 들어있습니다.
3. div태그 .board__list은 게시판의 제목과 내용을 담아줍니다
(웹표준을 준수하기 위해서 tbody와 thead로 나누고 반응형도 추가를 해봤습니다.)
4. div태그 중 .board__dot은 게시판 밑에서 "다음"과 "이전"버튼 그리고 각 페이지를 나타낼 "버튼"입니다.
5. div태그 #footer은 맨밑에서 소개를 해주기 위해서 만들어봤습니다.
아직 많이 부족하지만 많이 배워서 웹표준을 지키면서 웹을 만들어 보고 싶네요.
에러가 많이 뜬덕에 PHP 회원가입, 로그인, 게시판 코드가 좀 낯설지만
많이 도움이 된듯해요.