[웹3]240402-16일차(4단계, 반응형 max/min 활용)

https://codepen.io/limyena/pen/wvZPYEv

스와이퍼 버튼 커스텀 4단계

 

[안쪽에 있는 버튼 꾸미기]

 

1. 필요없는 구조를 삭제했다

2. 내가  원하는 아이콘이나 이미지를 html구조에 추가하고싶다.

3.어떤 아이콘을 원하는지 고른다.(구글심볼)

 

- 기존 화살표 없애주기

 

- 구글심볼 사이트에서 원하는 아이콘 고르고 오른쪽 상단 코드 카피

- html 가장 상단에 붙여넣기 (링크 붙여넣을때 큰회사 순으로)

- 다시 구글심볼 사이트로 돌아와서 오른쪽 코드 복사해주고

 

- html에서 위치 찾아서 붙여넣기 

 

 

[아이콘 사이즈 조절하기]

- 커스텀할 아이콘 선택자 확인하고

- 새로 가져온 아이콘 커스텀

 

- Class 3개로 만들어서 각각, 공통 둘다 커스텀 가능하게

- 공통클래스가 된 arrow

 

[반응형 페이지 만들기] max,min 활용

- 스와이퍼에서 js 코드 가져올때 숫자는 작은것부터 나열되어야함

- 마지막 괄호 두개는 가져오지 않기

- 붙여넣고 콤마 찍어주기