본문 바로가기

웹4 2일차

[id 선택자 VS class 선택자]

HTML의 id 선택자는 특정 요소를 식별하는 데 사용된다.

id는 문서 내에서 고유해야 하고, 각 요소에는 하나의 id만 할당할 수 있다.

 

아래는 사용 예시이다.

HTML
<div id="myElement">내 요소</div>

CSS id선택자 사용예시
#myElement {color: red;}

JS id선택자 사용예시
var element = document.getElementById("myElement");

 

 

 

 

 

[스와이퍼 페이지네이션 커스텀하기]

1. 커스텀하는 이유?

스와이퍼는 기본 페이지네이션이 있다.

빨간색 박스로 표시한 페이지네이션

 

 

디자인을 예쁘게 하고 싶을 때나,

텍스트를 넣어 사용자에게 편리하게 할 때와 같은 상황에서 페이지네이션을 커스텀할 수 있다.

노란 박스로 표시한 커스텀 페이지네이션
하단에 텍스트로 되어있는 페이지네이션

 

 

2. 커스텀하는 방법

텍스트로 되어있는 페이지네이션을 만들어 보자.

 

1) 스와이퍼 공식 홈페이지에 들어가 Resources - Demos메뉴에 들어간다.

 

2) Pagination custom 부분에서 Preview버튼을 누른다. 

 

3) 우클릭 - 페이지 소스보기, 혹은 ctrl+U로 소스코드 페이지로 들어간다. 

아래와 같이 html, css, js 코드를 확인할 수 있다. 

 

4) Swiper JS부분을 찾고, 내 코드에 페이지네이션 옵션을 아래의 빨간 박스 안에 있는 코드로 교체한다. 

코드 교체 후, 페이지네이션에 숫자가 써있음을 확인할 수 있다. 

5) 숫자가 아닌 텍스트로 된 페이지네이션을 사용하기 위해 

 

 

 

 

 

 

 

 

'' 카테고리의 다른 글

웹4 수업페이지  (0) 2024.06.17
웹4 3일차  (0) 2024.06.14
웹4 1일차  (0) 2024.06.11
웹3 9일차  (0) 2024.06.10
웹3 8일차  (2) 2024.06.05