Bootstrap

Bootstrap 기본 골격

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

container-row-col 활용방법

<div class="row"> <!-- 게시판 -->
            <div class="col-md-1 col-1">No</div>
            <div class="col-11 col-md-8">Title</div>
            <div class="col-md-1 d-none d-md-block">Writer</div>
            <div class="col-md-1 d-none d-md-block">Views</div>
            <div class="col-md-1 d-none d-md-block">Date</div>
        </div>

d-none
:display is none, 크기 명시하지 않을 경우 기본값은 xs
:xs 크기가 됐을 때 숨김

d-md-block
:md 크기가 됐을 때 Block으로 나타남

col-md-1
:전체가 12, md 사이즈가 됐을때 1/12(12분의 1) 사이즈 차지

col-11 col-md-8
: xs 크기가 됐을 때 11을 차지할 것, md 크기가 됐을 때 8을 차지할 것

결국, 얼마나 portion을 차지할 건지 12를 전체로 계산해서 할당함

.board>div:hover:not(#bar)

특정 선택자를 제외하고 적용하기

실습

• 게시판 만들기 (제목, 글쓴이, 날짜, 조회수)
• 특정 사이즈가 됐을 때 (제목란에 글쓴이, 날짜, 조회수 모아서 보여주기)