안녕하세요.
이 공간은 제가 프론트엔드를 처음 접하며 배운 것을 주저리주저리 쓰는 공간입니다.
이번 내용은 Starbucks clone coding 2편입니다.
사실 요새 과제때문에 강의를 많이 못들었어요.
그래서 내용이 별로 없을 것 같네요.
저번 내용에서 이어서 추가된 내용만 작성합니다.
css
calc();
이번 예시에서는 width 값에서 처음 사용해봤습니다.
width: calc(819px * 3 + 20px);width의 가로값 819px을 3등분으로 쪼갠 후
거기에 20px을 더해주는 값입니다.
width: calc(100% - 50px);이런 식으로 %를 이용한 후 일정 값을 빼주는 방식으로도 작성이 가능해요.
margin-left: calc((819px * 3 + 20px) / -2);화면을 정 가운데에 위치시키기 위한 코드입니다.
position값에 absolute가 주어진 상황인데요.
width에 쓰였던 코드에 / -2 를 주어 left 50%로 왼쪽으로 밀어놔요.
그러면 margin-left에 전체 길이 절반만큼을 -값이 들어가니,
왼쪽으로 땡겨지면서 화면 가운데에 위치시키는 방법이죠.
반대로 right 50%도 가능합니다.
그럼 당연히 margin-right에 -값을 줘서 가운데 위치시키는거죠.
opacity: ;
transition: ;
opacity: .5;
transition: opacity 1s;opacity 속성은 투명도를 나타냅니다.
0.5에서 0은 생략하고 .5로 50%의 투명도를 준 셈이죠.
그리고 transition 속성을 이용해 1초동안 자연스럽게 화면 전환이 일어나는 코드입니다.
javascript
new Swiper('선택자', {옵션})
Swiper는 cdn에서 연결해 사용합니다.
html에도 script가 추가되야 하는데요.
주의할 점은 link도 추가해줘야 정상작동합니다.
<!-- SWIPER -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>이렇게요.
new Swiper('.promotion .swiper-container', {
slidesPerView: 3, //
spaceBetween: 10, //
centeredSlides: true, //
loop: true,
pagination: {
el: '.promotion .swiper-pagination',
clickable: true,
},
navigation: {
prevEl: '.promotion. swiper-prev',
nextEl: '.promotion. swiper-next'
}
});위 코드에서 direction 속성은 생략되었는데요.
참고로 direction 속성의 기본값은 'horizontal'입니다.
그 아래부터는 순서대로
slidesPerView : 한 번에 보여줄 슬라이드 개수(3)
spaceBetween : 슬라이드 사이 여백(10)
centeredSlides : true (1번 슬라이드가 가운데에 보이게 하기)
순서이구요.
pagination: {
el: '.promotion .swiper-pagination',
clickable: true,
}el: '.promotion .swiper-pagination' : 페이지 번호 요소 선택자
clickable: true : 사용자가 페이지 번호 요소를 직접 클릭으로 제어할 수 있는지 여부
를 제어합니다.
