[모각코]2021-07-07
오늘은 위 사진 부분을 부트스트랩을 이용해 사이트로 만드는 활동을 하기로 목표했습니다...!
(사진의 저 부분은 제가 하고 있는 Hufstudy의 과목과 자격증에 대한 커뮤니티 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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br>
<h1 class="text-center"><a href="#">의용회로 및 실습</a></h1>
<br>
<br>
<table class="table table-hover table-striped text-center" style="border: 1px solid;">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>title_1</td>
<td>hs</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>title_2</td>
<td>hs</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>title_3</td>
<td>hs</td>
<td>1</td>
</tr>
</tbody>
</table>
<hr>
<div>
<ul class="paginaton justufy-content-center">
<li><a href = "#" style="margin-right:5px ;" class="text-secondary">1</a></li>
<li><a href = "#" style="margin-right:5px ;" class="text-secondary">2</a></li>
<li><a href = "#" style="margin-right:5px ;" class="text-secondary">3</a></li>
<li><a href = "#" style="margin-right:5px ;" class="text-secondary">4</a></li>
<li><a href = "#" style="margin-right:5px ;" class="text-secondary">5</a></li>
</ul>
</div>
<a class="btn btn-outline-info float-right">글쓰기</a>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</div>
</body>
</html>코드를 입력하세요하지만 아직 css와 부트스트랩을 하는것에 있어 익숙하지 않아서 글을 올리는 글쓰기 툴과 게시판 형식의 테이블 정도만 만들어봤습니다...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글쓰기</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>게시판 글쓰기</h2>
<form action="write.jsp" method="post">
<div class="form-group">
<label for="title">제목</label>
<!-- placeholder 속성 입력한 데이터가 없는 경우 배경으로 나타난다.실제적으로 입력을 100자까지로 지정 -->
<!-- required 속성을 설정하면 필수입력 사항이된다. -->
<!-- pattern 속성을 이용한 정규표현식으로 데이터의 유효성 검사를 할 수 있다. -->
<input type="text" class="form-control" id="title"
placeholder="제목 입력(4-100)" name="title"
maxlength="100" required="required"
pattern=".{4,100}">
</div>
<div class="form-group">
<label for="content">내용</label>
<!-- 여러줄의 데이터를 입력하고 하고자 할때 textarea 태그를 사용한다. -->
<!-- textarea 안에 있는 모든 글자는 그대로 나타난다. 공백문자, tag, enter -->
<textarea class="form-control" rows="5" id="content"
name="content" placeholder="내용 작성"></textarea>
</div>
<div class="form-group">
<label for="writer">작성자</label>
<input type="text" class="form-control" id="writer"
placeholder="작성자(2자-10자)" name="writer">
</div>
<button type="submit" class="btn btn-default">등록</button>
</form>
</div>
</body>
</html>코드를 입력하세요
HUFS_BME