위와 같이 코드가 겹치는 부분이 많을 때 ( 공통되는 부분 )
div로 전체를 감싸주고 공통되는 사항을 깔끔히 정리해줌.
( 보기에도 훨씬 깔-끔 )
다시 쬐금 정리. ( 오타 + 위치 수정 )
swiper.js 쓸 때 한 페이지에 여러가지 데모의 슬라이드를 써야할 땐 다중 클래스를 사용하는게 더 편함.
ex ) slide1 , slide2 이런 식으로. ( 기존에 MySwiper를 지우고 slide 클래스로 만드는게 효율적. )
spaceBetween -> 슬라이드 간의 공백 간격
Loop -> 반복
width 값을 50% 줬는데 수직으로 떨어짐 ( 여기에서 조금 의아한 부분, button 태그는 인라인인데 width 값 50% 줘도 먹네?
그리고 인라인태그 특성상 오른쪽으로 붙어야 하는데 수직으로 떨어지네? )
그래서 포지션 릴레이티브를 준 .card div 박스에 font-size:0을 넣어주니 다시 수평으로 50%씩 공간을 먹음.
이게 헷갈려서 코드를 훑어보니 윗 쪽에서 width 값을 580px을 준게 있는데,
그 안에서 width 값 공간을 상속받았고, 거기에서 이제 width값을 50%씩 주면 반 반씩 나눠가지는 식으로 width값이 먹히나봄.
이건 계속 마크업해보고 css 입히면서 익숙해지면 더 분명해질듯. 여튼, button 태그같은 인라인 태그여도
위 부모 라인 에서 width값이 있는 상태면 공간 안에서 나눠가지는 50% 씩 주는 width값도 먹히는 것으로 보임.
그리고, 윗 쪽 div 라인에다가 font-size : 0 을 주면 깔쌈하게 맞아 떨어짐.
+ button 태그에도 기본 색이 있다. background : none을 해주면?
이런 식으로 버튼을 감싼 div에 rgba를 넣어주고 버튼 태그에 배경색을 없애줘서 이런 효과를 내는게 가능. ( 신기 )
letter-spacing : 자간
line-height : 1 -> 줄 간격 초기화 ( 줄같은거 css로 그려 넣을 때 )
button은 포인터가 바뀌지 않음. -> cursor:pointer 필요.
마찬가지로 페이지네이션도 클래스명 임의대로 바꿔주어서 css를 더 자유롭게 핸들링할 수 있음
( js 클래스명만 매칭을 시켜주면 동작 )
제이쿼리 슬라이드 부분 css 까지 완성.
https://github.com/wonpoem/test
GitHub - wonpoem/test
Contribute to wonpoem/test development by creating an account on GitHub.
github.com