[html, SCSS]css의 display로 게시판 틀 짜기

홈페이지라면 게시판 정도는 있기 마련!

...해서 게시판 틀을 display:table; 로 짜는 법을 배워봤다.

서치를 하거나, 글을 남기는 건 백엔드랑 이어지는데 데이터베이스 다루는 법은 못 배워서 디자인만 해봄.

 

 

- 서치 창 만드는 법 

<div class="search-box">
    <form action="">
      <select name="" id="">
        <option value="">전체</option>
        <option value="">제목</option>
        <option value="">내용</option>
        <option value="">작성자</option>
      </select>
      <input type="text" placeholder="내용을 입력해 주세요." />
      <button>검색</button>
    </form>
  </div>

.search-box {
  form {
    display: flex;
    justify-content: center;
    select {
      width: 120px;
      position: relative;
      padding: 0 15px;
      border: 1px solid #ccc;
    }
    input {
      width: 300px;
      height: 60px;
      margin: 0 10px;
      padding: 0 15px;
      border: 1px solid #ccc;
    }
    button {
      padding: 0 30px;
      font-family: inherit;
      font-size: 16px;
      text-align: center;
      color: #fff;
      background-color: #111;
    }
  }
}

?form으로 감싸는 이유?: 이 부분 전체를 백엔드로 보내려면, 어차피 나중에 form으로 감싸야 함. 

그렇게 어려운 건 없다. 기억해야 할 건 select 아래 option을 넣는다는 점 정도?

apperance:none 하고 background 처리로 작은 화살표 모양은 바꿀 수 있는 듯 한데...

그리고 option은 못 바꾼다 라고 하지만 가능은 한데 진짜 번거롭다고

 

---

- display:table; 써서 테이블 형식의 게시판 만들기

만들어 본 테이블 게시판.

 

html의 table을 직접 쓰지 않고 css의 display만으로도 table 형식을 만들 수 있다.

display:table; 및 table-header-group, table-row-group, table-row, table-cell이 쓰인다. 하나라도 안 쓰면 직접 해봤는데 오류 남, 대박임...이 중 실제로 테이블 선으로 보이는 곳은 display:tablle 준 곳과 table-cell을 준 곳 뿐이니 border을 긋거나 할 때 주의할 것. 

<div class="notice-list">
    <div class="notice-head">
      <span class="no">번호</span>
      <span>제목</span>
      <span class="writer">작성자</span>
      <span class="date">작성일</span>
    </div>
    <ul class="notice-body">
      <li>
        <span class="no">1</span>
        <span>게시판을 보신 것을 축하드립니다!</span>
        <span class="writer">관리자</span>
        <span class="date">10.06</span>
      </li>
      <li>
        <span class="no">1</span>
        <span>게시판을 보신 것을 축하드립니다!</span>
        <span class="writer">관리자</span>
        <span class="date">10.06</span>
      </li>
      <li>
        <span class="no">1</span>
        <span>게시판을 보신 것을 축하드립니다!</span>
        <span class="writer">관리자</span>
        <span class="date">10.06</span>
      </li>
      <li>
        <span class="no">1</span>
        <span>게시판을 보신 것을 축하드립니다!</span>
        <span class="writer">관리자</span>
        <span class="date">10.06</span>
      </li>
    </ul>
  </div>

.notice-list {
  width: 100%;
  margin-top: 50px;
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
  display: table;
  .notice-head {
    display: table-header-group;
    font-weight: 700;
    background-color: #ccc;
  }
  .notice-body {
    display: table-row-group;
    li {
      display: table-row;
    }
  }
}

.notice-head,
.notice-body {
  span {
    display: table-cell;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    padding: 20px 20px;
    text-align: center;
    &.no {
      width: 50px;
    }
    &.writer {
      width: 150px;
    }
    &.date {
      width: 120px;
    }
  }
}

 

 

---

- 페이지 바꾸는 하단 페이지네이션 만드는 법

<div class="notice-pagination">
    <a href="">좌좌</a>
    <a href="">좌</a>
    <ul>
      <li class="on"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
    </ul>
    <a href="">우</a>
    <a href="">우우</a>
  </div>
</div>

 

좌랑 우는 아이콘 찾아서 넣기 전에 글자만 넣어본 거다.

on을 붙은 클래스에만 푸른색이 되게 처리했으니, js로 click event가 발생할 때 'on' class가 붙도록 처리해주면 될 것이다. 사용된 scss는 아래와 같다. 

 

.notice-pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  a {
    width: 30px;
    height: 30px;
    @include flex;
    margin: 0 2px;
    border: 1px solid #111;
    background-color: #111;
    padding: 10px;
    color: #fff;
  }
  ul {
    display: flex;
    .on {
      a {
        background-color: $main-color;
        border-color: $main-color;
        z-index: 2;
      }
    }
  }
}

• @include는 display:flex하고 좌우 상하 flex ceter처리 한 거임. 외부 링크로...