아름다운 CSS 페이지 매김 및 수행 방법

HTML

HTML의 경우 내부에 페이지가 있는 scroller 요소가 있습니다.

각 페이지 요소에는 '페이지'라는 클래스가 있으며 해당 페이지가 현재 선택된 경우 '활성'입니다.

<div class="scroller">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page active">3</div>
    <div class="page">4</div>
    <div class="page">5</div>
</div>

자바스크립트

자바스크립트의 경우 로드 시 모든 페이지 요소를 선택합니다.

그런 다음 이를 반복하고 클릭 이벤트 리스너를 추가합니다.

클릭하면 활성 클래스가 있는 요소에서 활성 클래스를 제거하고 클릭한 요소에 추가합니다.

window.onload = () => {
    let pages = document.querySelectorAll('.page')

    for (let i = 0; i < pages.length; i++) {
        pages[i].onclick = () => {
            removeActiveClass()
            setActiveClass(pages[i])
        }
    }
}

이제 앞에서 언급한 함수를 생성합니다.

setActiveClass의 경우 단순히 모든 클래스를 클래스 목록에 '활성화'합니다.

그리고 removeActiveClass의 경우 '활성' 클래스가 있는 요소를 선택하여 제거합니다.

const setActiveClass = (el) => el.classList.add('active')

const removeActiveClass = () => {
    let activeEl = document.querySelector('.active')
    activeEl.classList.remove('active')
}

간단하죠?

CSS

CSS의 경우 먼저 scroller 요소의 스타일을 지정합니다.

flexbox를 사용하여 내부에 페이지 번호를 정렬하고 그 사이에 약간의 간격을 추가합니다.

.scroller {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

이제 페이지.

테두리 반경을 100%로 하여 너비와 높이를 30px로 설정합니다. 이것은 원으로 나타납니다.

flexbox를 사용하여 숫자를 내부 중앙에 배치합니다.

물론 호버 효과(나중에 추가할 예정)가 부드럽게 나타나도록 전환을 0.5초로 설정합니다.

마지막으로 커서를 포인터로 설정하고 텍스트를 흰색과 굵게 설정합니다.

.page {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
}

페이지를 가리키면 변환 스케일을 사용하여 크기를 늘리고 변환이 원활하도록 전환을 추가합니다.

.page:hover {
    transform: scale(1.2);
    transition: .2s;
}

이제 모든 페이지에 배경색을 설정합니다.

각각 다른 색상을 갖게 됩니다. 노란색에서 갈색으로.

.page:first-child {
    background-color: rgb(255, 225, 0);
}
.page:nth-child(2) {
    background-color: rgb(255, 200, 0);
}
.page:nth-child(3) {
    background-color: rgb(255, 157, 0);
}
.page:nth-child(4) {
    background-color: rgb(255, 123, 0);
}
.page:nth-child(5) {
    background-color: rgb(211, 106, 0);
}

활성 페이지의 경우 변환 속성을 사용하여 요소의 크기를 50% 증가시켜 활성 페이지가 달라집니다.

배경색도 빨간색으로 변경하겠습니다.

.active {
    transform: scale(1.5);
    background-color: rgb(245, 57, 0) !important;
}

활성 페이지 위로 마우스를 가져가면 크기 1.2에서 크기 1.5로 이전 변형 속성을 덮어쓰고 기본 커서를 설정하여 클릭할 수 없는 것처럼 보입니다.

.active:hover {
    transform: scale(1.5);
    cursor: default;
}

그리고 그게 다야.

비디오 자습서:

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다 ❤️