css- pagination 가변요소 페이지네비게이션 (active)

 

개수마다 컨텐츠가 변하는

가변요소는 무엇으로 만들어야할까?

 

겹치는 요소가 아니기 때문에 position 아님

왼쪽이나 오른쪽으로 붙이는 요소도 아니기 때문에 float:left 아님

inline:block으로 가운데 정렬을 해준다. 

 

---

 

 

1. html 페이지네이션 이름 지정해주기

 

            <div class="board_pagination_wrap">
              <div class="board_pagination">
                <a href="#" class="btn_paging first">첫페이지</a>
                <a href="#" class="btn_paging prev">이전</a>
                <span class="btn_num active">1</span>
                <a href="#" class="btn_num">2</a>
                <a href="#" class="btn_paging next">다음</a>
                <a href="#" class="btn_paging last">마지막페이지</a>
              </div>
            </div>

 

버튼은 클릭하면 넘어가기 때문에 a  태그로 설정

 

공통 class 이름 지정하기
<<	btn_paging first	첫페이지
<	btn_paging prev	이전
1	btn_num active	1	화면들어오자마자 활성화 되어있는 active 요소로 span 사용
2	ntn_num	2
>	btn_paging next	다음페이지
>>	btn_paging lasg	마지막페이지
게시판 페이지에 공통으로 들어가는 네이게이션 바 이기 때문에  공통클래스로 처리해 줄것. > 클래스를 정확히 걸수 있도록 각각 이름 지정

 

---

 

 

2. css로 공통부분에 작성

 

2-1 자리잡기

전체 div_wrap 부분에 영역 설정  margin-top: 20px;

텍스트가 가운데 올 수 있도록     text-align: center;

 

---

 

그다음 div class 부모요소에 가변컨텐츠 므로  display: inline-block;  지정 후 

인라인블록 설정시 글자취급으로 하단에 간격이 생기므로 vertical-align: top;  필수 설정

 

 

---

그다음 공통 클래스 이름으로

.btn_num      1,2번 숫자 박스와 

.btn_paging   아이콘 부분 자리를 만들어준다.

 

(btn_paging first ,btn_paging prev)  등 html 에서 이름을 지정해줬지만 앞글자의 class만 적용시 전체 적용가능

 

 

 

 

.board_pagination_wrap .btn_num {
    width: 40px;
    line-height: 38px;
    margin: 0 5px;
    border: 1px solid #eee;
    color: #777;
}
.board_pagination_wrap .btn_paging {
    border: 1px solid blue;
    text-indent: -9999px;
    width: 22px;
    height: 40px;
}

이렇게 각각의 높이와 넓이를 지정해줬지만, border만 나올뿐 다른 태그들은 적용이 되지 않는다.

왜그럴까?

 

바로 html 의 a 이 글자 태그 이기 때문에 block 상자로 지정해주어야 적용이 가능하다. 

그래서 float : left 를 사용!

 

 

• flat 속성
  display:block 요소로 변경되어 뜨는 효과, 좌우배치 가능

.board_pagination_wrap a {
    float: left;
}
.board_pagination_wrap span {
    float: left;
}
.board_pagination_wrap .btn_num {
    float: left;
    width: 40px;
    line-height: 38px;
    margin: 0 5px;
    border: 1px solid #eee;
    color: #777;
}
.board_pagination_wrap .btn_paging {
    border: 1px solid blue;
    text-indent: -9999px;
    width: 22px;
    height: 40px;
}

위의 class에 float:left 를 지정해주자 

정상적으로 나오는걸 확인

 

 

 

---

 

 

2-2 active 적용

 

 

html로 먼저 활성화 할 부분 btn_num active 를 지정해 줬기 때문에 바로 css에서 적용시 표현 가능

.board_pagination_wrap .btn_num.active {
    background:#bb0841;
    border-color: #bb0841;
    color: #fff;
}

 

---

 

 

2-3 아이콘 위치 잡기

 

.board_pagination_wrap .btn_paging:before{
    content: '';
    width: 14px;
    height: 14px;
    border: 1px solid red;
    }

이제 배경으로 아이콘으로 꾸며주기 주기위해  before을 적용해줬지만 아무것도 보이지 않는다 .

왜일까 ? 

 

바로 앞에 float 요소로 부모들이 떠 있기 때문에 가려서 보이지 않기 때문 

그래서 기준점인 

.board_pagination_wrap .btn_paging 클래스에  position:relative; 로 기준을 잡아 띄어준후

.board_pagination_wrap .btn_paging:before  before 클래스에 position:absolute; 로 겹치는 요소에서 띄어준다.

(position 정렬공식으로 위치잡기 가능)

 

 

.board_pagination_wrap .btn_paging:before{
    content: '';
    width: 14px;
    height: 14px;
    border: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

position 과 정렬공식을 이용하자 제대로 나오는 것을 확인.

 

---

 

 

2-4 배경아이콘 넣기 

하단 링크참조

https://hyojinny.tistory.com/73

css 배경아이콘 sprite 이미지로 적용하기