반응형
이전 시간에는 기본 게시판을 만들며 HTML과 CSS의 사용법을 익혀보았다.
이번 시간에는 반복 학습으로 게시판에 대한 HTML과 CSS를 다시 한번 만들어보고 조금 더 디테일한 CSS 꾸미기와 버튼 링크를 통한 페이지 이동도 함께 구현해보자.
게시판 HTML, CSS 만들기
1. HTML
// index.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">
<link rel="stylesheet" href="../BOARD/style.css">
<title>게시판</title>
</head>
<body>
<!-- 1. 게시판의 화면은 class="card"로 적용 -->
<div class="card">
<!-- 1-1. 게시판 이름은 class="card-header"로 <div>로 구역 설정 -->
<div class="card-header"><h1>게시판</h1></div>
<!-- 1-2. 내용은 class="card-body"로 <div>로 구역 설정 -->
<div class="card-body">
<!-- 검색어 입력하기 -->
<input type="search" placeholder="검색어를 입력하세요.">
<a class="search" href="#">검색</a>
<!-- 내용을 HTML로 작성하기 -->
<div class="content-box">
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="title"><a href="view.html">안녕하세요 이것은 게시판 제목입니다.</a></div>
<div class="delete"><button>X</button></div>
</div>
<div class="content-list">
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="title"><a href="view.html">게시판에 제목을 입력합니다.</a></div>
<div class="delete"><button>X</button></div>
</div>
<div class="content-box">
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="title"><a href="view.html">이곳에 제목을 입력해주세요.</a></div>
<div class="delete"><button>X</button></div>
</div>
<div class="content-box">
<div class="check"><input type="checkbox" name="" id=""></div>
<div class="title"><a href="view.html">오늘의 날씨는 어떤가요.</a></div>
<div class="delete"><button>X</button></div>
</div>
<ul class="number">
<li><a href="#"><</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">></a></li>
</ul>
</div>
<!-- 1-3. 글쓰기 버튼은 class="btn"로 <div>로 구역 설정 -->
<div class="btn">
<a href="write.html">글쓰기</a>
</div>
</div>
</body>
</html>2. CSS
// style.css
* {
margin: 0;
padding: 0;
}
li {
list-style: non; /* list 생성시 나오는 '-' 마크 제거 */
}
a {
color: inherit; /* 글자 색생은 부모로부터 상속 */
text-decoration: none;
}
head {
display: none;
}
body {
display: block;
}
.card {
width: 600px;
height: 600px;
margin: 100px auto;
box-shadow: 3px 3px 50px #e6e6e6;
/* box-shadow: 1px 1px 10px #000; */
/* box-shadow: offset x y blur color; */
/* offset x:는 얼마나, y:는 얼마나 blur:흐림정도는 얼마나 color:색은 어떤걸로*/
border-radius: 20px;
position: relative; /* 상대적인 값 */
}
.card-header {
padding: 20px;
text-align: center;
}
.card-header h1 {
font-size: 30px;
font-weight: 600;
}
.card-body {
padding: 20px;
text-align: center;
}
.card-body input[type="search"] {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #999;
border-radius: 10px;
width: 300px;
font-size: 16px;
}
.card-body a.search {
padding: 10px 15px 10px 15px;
margin-left: 10px;
border-radius: 10px;
background-color: tomato;
color: #fff;
}
.card-body div {
margin-top: 10px;
border-bottom: 1px solid #e6e6e6;
}
.card-body div div {
display: inline-block;
padding: 15px 10px 15px 10px;
margin: 0;
border: none;
}
.card-body .check ,.delete {
width: 5%;
}
.card-body .title {
width: 70%;
text-align: left;
}
.card-body .delete button {
background-color: #fff;
border: none;
}
.number {
padding: 10px;
}
.number li {
display: inline-block;
}
.number li a {
display: block;
width: 40px;
/* text-align이 위로 올라간다 */
line-height: 40px;
border-radius: 10px;
margin: 3px;
margin-top: 20px;
box-shadow: 0 5px 10px #f1f1f1;
}
.number li a.active {
background-color: rgb(252, 212, 205);
}
.btn {
/* position: absolute; 는 절대적인 값으로 상대적인 값이 필요하다. */
/* 상대적인 값은 전체 영역을 담당하는 class="card"에 position: relative; 을 추가한다. */
position: absolute; /* 절대적인 값 */
right: 0;
bottom: 0;
padding: 10px;
margin: 10px 10px 20px 10px ;
}
.btn a {
padding: 10px;
background-color: tomato;
color: #fff;
border-radius: 10px;
}3. 결과
아래의 기능을 구현해보았다. 아직 position에 대한 이해가 부족하여 쫌 더 찾아봐야할 것 같다.
1. board-header
2. board-검색어 입력
3. board-body html 작성하기
4. board-body css 작성하기
5. board-페이지 이동
6. board-글쓰기 버튼
다음은 버튼을 눌러 이동하는 페이지를 구현하는 시간을 가져보자.😋😋😋
반응형
'코딩배우기 > HTML, CSS' 카테고리의 다른 글
| 5. 디자인 게시판 만들기-VIEW (0) | 2022.07.20 |
|---|---|
| 4. 디자인 게시판 만들기-WRITE (0) | 2022.07.20 |
| 2. 기본 게시판 만들기 (0) | 2022.07.19 |
| 1. 오늘부터 코딩 1일 (0) | 2022.07.19 |
| 배우는 HTML, CSS, JS (0) | 2022.07.19 |