힘내보자

처음 부트스트랩을 쓰면서 가장 당황했던게 

css가 적용이 안되는 것이었다. 이틀 꼬박을 헤맸다.

공홈을 몇번을 읽었는데 무슨 소리인지 모르겠어서 환자할 것 같았다.

글을 보는 초보분이 있다면 저와 같은 당황스러움과 시간낭비 없이 효과적으로 빠르게 해결되기를 바란다

기존 html에 css를 적용할 때 선택자(selector) 중에 id와 class선택자를 이용해보자. 가장 쉽고 간단하다.

html의 어떤 태그에 id와 class 속성을 넣고 안에 속성값으로 원하는 이름을 지어줬으면 

얘들 이름을 호명하고 css를 적용시키는 방식이다.

여기까지는 부트스트랩도 같지만 내가 헤맸던 건 부트스트랩을 적용한 html 어디에 넣어서 적용해야할지를 몰랐던 것이다.

당황스럽게도 태그 안 속성 class="" 안에 지정해주는 것이다. 아래는 나의 진행 중인 프로젝트 파일 css이다

아래처럼 class선택자를 사용하여 class 속성값 "" 안에  클래스명을 지정하면 css가 먹힌다

주의할 점은 태그 마다 먹히는 css가 있고 아니니 부딪혀보자

백그라운드 컬러가 안먹힌다던가 볼드만 먹힌다던가 등등 이런식이다

bootstrap 페이지네이션(Pagination)이란?

아래와 같은 기능이다

양쪽 영어보다 화살표로 심플하게 하고 싶다면

Previous와 Next가 있는 라인을 a태그로 시작하는 아래의 코드로 바꿔주면 된다

      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>

크기조절은 

class="pagination pagination 뒤에 -sm(스몰)이나 -lg(라지) 씩으로 붙여주면 된다

<ul class="pagination pagination-lg">

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

공홈 페이지네이션 링크

https://getbootstrap.kr/docs/5.0/components/pagination/