본문 바로가기
STUDY (My Job)/TIL

반응형 게시판 만들기 2 - 게시판 목록과 페이지 버튼

by 태태. 2022. 12. 16.
728x90

https://www.youtube.com/watch?v=HvrOnjX__jE 

결과화면

 

파일목록



🔴index.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 rel="stylesheet" href="css/css.css" />
  </head>
  <body>
    <div class="board_wrap">
      <div class="board_title">
        <strong>공지사항</strong>
        <p>공지사항을 빠르고 정확하게 안내해드립니다.</p>
      </div>
      <div class="board_list_wrap">
        <div class="board_list">
          <div class="top">
            <div class="num">번호</div>
            <div class="title">제목</div>
            <div class="writer">글쓴이</div>
            <div class="date">작성일</div>
            <div class="count">조회</div>
          </div>
          <div>
            <div class="num">5</div>
            <div class="title"><a href="#">글 제목이 들어갑니다.</a></div>
            <div class="writer">김아름</div>
            <div class="date">2022.12.16</div>
            <div class="count">33</div>
          </div>
          <div>
            <div class="num">4</div>
            <div class="title"><a href="#">글 제목이 들어갑니다.</a></div>
            <div class="writer">김아름</div>
            <div class="date">2022.12.16</div>
            <div class="count">33</div>
          </div>
          <div>
            <div class="num">3</div>
            <div class="title"><a href="#">글 제목이 들어갑니다.</a></div>
            <div class="writer">김아름</div>
            <div class="date">2022.12.16</div>
            <div class="count">33</div>
          </div>
          <div>
            <div class="num">2</div>
            <div class="title"><a href="#">글 제목이 들어갑니다.</a></div>
            <div class="writer">김아름</div>
            <div class="date">2022.12.16</div>
            <div class="count">33</div>
          </div>
          <div>
            <div class="num">1</div>
            <div class="title"><a href="#">글 제목이 들어갑니다.</a></div>
            <div class="writer">김아름</div>
            <div class="date">2022.12.16</div>
            <div class="count">33</div>
          </div>
        </div>
        <div class="board_page">
          <a href="#" class="bt first"><<</a>
          <a href="#" class="bt prev"><</a>
          <a href="#" class="num on">1</a>
          <a href="#" class="num">2</a>
          <a href="#" class="num">3</a>
          <a href="#" class="num">4</a>
          <a href="#" class="num">5</a>
          <a href="#" class="bt next">></a>
          <a href="#" class="bt last">>></a>
        </div>
        <div class="bt_wrap">
          <a href="#" class="on">목록</a>
          <!-- <a href="#">수정</a> -->
        </div>
      </div>
    </div>
  </body>
</html>

🔵style.css

* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 10px;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  /* ㄴ🟡 컬러 상속받아라 */
}
.board_wrap {
  width: 1000px;
  margin: 100px auto;
}

.board_title {
  margin-bottom: 30px;
}

.board_title strong {
  font-size: 3rem;
}

.board_title p {
  margin-top: 5px;
  font-size: 1.4rem;
}

.bt_wrap {
  margin-top: 30px;
  text-align: center;
  font-size: 0;
  text-align: center;
}

.bt_wrap a {
  display: inline-block;
  min-width: 80px;
  margin-left: 10px;
  padding: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  font-size: 1.4rem;
}
.bt_wrap a:first-child {
  margin-left: 0;
}

.bt_wrap a.on {
  background: #000;
  color: #fff;
}
.board_list {
  width: 100%;
  border-top: 2px solid #000;
}
.board_list > div {
  border-bottom: 1px solid #ddd;
  font-size: 0;
}
.board_list > div.top {
  border-bottom: 1px solid #999;
}
.board_list > div:last-child {
  border-bottom: 1px solid #000;
}
.board_list > div > div {
  display: inline-block;
  /* ㄴ 🟡가로배치!!! */
  padding: 15px 0;
  /* ㄴ 🟡모든 픽셀 여백 15px 0 */
  text-align: center;
  font-size: 1.4rem;
  /* ㄴ 🟡부모에다가는 font-size : 0을 줌. */
}

.board_list > div.top > div {
  font-weight: 600;
}

.board_list .num {
  width: 10%;
  /* ㄴ🟡번호칸이 10%의 영역을 가지게 된다. */
}
.board_list .title {
  width: 60%;
  text-align: left;
}
.board_list .top .title {
  text-align: center;
}
.board_list .writer {
  width: 10%;
}
.board_list .date {
  width: 10%;
}
.board list .count {
  width: 10%;
}
.board_page {
  margin-top: 30px;
  /* ㄴ🟡 위로 여백 */
  text-align: center;
  /* ㄴ🟡 가운데정렬로 */
  font-size: 0;
  /* ㄴ🟡 페이지 순서 박스 사이의 여백 없애기 */
}

.board_page a {
  display: inline-block;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  /* ㄴ🟡 board_page a.bt과 num 에 패딩값을 넣게 되면서 상자가 길어지게 되는데, 이를 방지 하기 위해서 이 패딩값을 넘지 말아라~ 하는 코딩부분(전체높이 32px를 넘지 않게)*/
  vertical-align: middle;
  /* ㄴ🟡박스 높낮이 같게 */
  border: 1px solid #ddd;
  border-left: 0;
  line-height: 100%;
}

.board_page a.bt {
  padding-top: 10px;
  font-size: 1.2rem;
  letter-spacing: -1px;
}

.board_page a.num {
  padding-top: 9px;
  font-size: 1.4rem;
}

.board_page a.num.on {
  border-color: #000;
  background: #000;
  color: #fff;
}

.board_page a:first-child {
  border-left: 1px solid #ddd;
}

/* 🟡 따라서 쓰는 것은 코딩에서 도움이 되지 않아요. 절차를 보면서, 
어떤 태그가 어떤 속성이 필요한지 생각해가면서 하는 것이 중요합니다! */

 

🔵css.css

@import url(style.css);
@import url(media.css);

 

 

728x90
반응형

'STUDY (My Job) > TIL' 카테고리의 다른 글

반응형 게시판 만들기 4 - 글쓰기, 글 수정 페이지 [Youtube_렛츠코딩앤플레이]  (2) 2022.12.18
반응형 게시판 만들기 3 - 글 보기 페이지(+가상선택자를 이용해서 라인 만들기)  (4) 2022.12.16
반응형 게시판 만들기 1 - 전체 구조 설계, 타이틀과 버튼 스타일  (0) 2022.12.16
20221212월요일  (0) 2022.12.13
6)장바구니 ui  (0) 2022.12.09

관련글

댓글

티스토리툴바