패스트캠퍼스 챌린지 17일차 - Part 1. 스타벅스 예제(5)

16. 요소 슬라이드 - 공지사항

.notice .notice-line {
	position: relative;
}
.notice .notice-line .bg-left {
	width: 50%;
	height: 100%;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 0;
}
.notice .notice-line .bg-right {
	width: 50%;
	height: 100%;
	background-color: #f6f5ef;
	position: absolute;
	top: 0;
	right: 0;
}
.notice .notice-line .inner {
	height: 62px;
}

/* .inner의 height만 바꿔도 .notice-line이 그에 맞게 변하고, 
.bg-right와 .bg-left는 100%로 채워지므로 전체적인 height 변경 가능 */

.notice .notice-line .inner__left .swiper-container {\\
	flex-grow: 1;
}
/* 안 보이니까 자리 만들어줌 
혼자 있으니까 꽉 채움*/
/* 기본값인 stretch일 때는 그냥 놔둬도 되지만, 
부모요소 align-items: center로 바꿔준 후에는 높이 지정해줘야 됨 */

Notice 부분 배치

17. Swiper.js 라이브러리 버전 확인하기

Swiper

6버전 : 첫번째 div class = “swiper-container”
7~버전 : 첫번째 div class = “swiper” 사용

18. 요소 슬라이드 - 수직 슬라이드(Swiper)

Vertical Slider 만들 것 → Demo에서 확인 가능

Get Started - CDN 연결

<!-- min 버전 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

Swiper는 CSS 파일도 필요함!!

<!-- 기본 구조 -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
</div>

// 생성자
// new Swiper(선택자, 옵션) 
new Swiper('.notice-line .swiper', {
	direction: 'vertical',
	autoplay: true,
	loop: true, // 반복재생여부 (마지막 다음에 다시 처음으로)
});

19. 요소 슬라이드 - 요소 가운데 배치

/* css 단위 계산 */
/* calc() */
width: calc(819px * 3 + 20px);
widtt: calc(100% - 50px);

left: 50%;
margin-left: width 절반크기;

 

이런 방식으로 가운데 배치하는 방법 자주 씀

Notice 완성 + Promotion Test

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.