이번 클론코딩을 통해 처음으로 css전처리기인 Scss를 사용해 보았다. 이번 코딩에서 많이 사용했던 Scss 기능을 정리해봤다.
중첩
- 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}
상위 선택자 참조
- 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 바꿀 수 있다.
.marque-box{
display: flex;
justify-content: flex-end;
cursor: default;
&+.marque-box{
margin-top: 60px;
}
@import
외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다.또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다.
@mixin
- 미디어쿼리
이렇게 @include로 불러오면 되기 때문에 css에서 미디어쿼리를 사용할 때보다 더 편하게 사용할 수 있다.$mobile: 768px; //320 $tablet: 1023px; // 768 $desktop: 1280px; //1024 .header{ @include tablet{ height: 50px; padding: 18px 0; box-sizing: border-box; }
이번 슬라이드는 기존과 다른 모양이라 스와이퍼에 대해 더 배울 수 있었다.
.issue-swiper{
@include tablet{
max-width: 710px;
}
max-width: 2250px;
padding: 86px 0 96px;
margin: -50px auto 0;
perspective: 2000px;
.swiper-wrapper{
transform-style: preserve-3d; //매우 중요!
}
perspective
원근감을 주기 위해 사용하는 css속성이다.
transform-style: preserve-3d;
3D 공간에서 자식 요소들을 렌더링하는 방법을 결정하는 방법으로 기본값은 flat이다.
이와 반대로 3D 렌더링을 결정하는 값이 preserve-3d으로, 이를 사용하면 해당 컨테이너 영역을 삼차원 영역으로 활용 할 수 있다. 그렇기 때문에 이번 슬라이드에서는 transform-style: preserve-3d;를 꼭 넣어줘야한다!
기존에 숫자 카운트애니메이션에 gsap에 스크롤 트리거를 추가하여 특정 섹션에 왔을 때 카운트가 될 수 있도록 하였다.
function numberCounter(target_frame, target_number) {
this.count = 0; this.diff = 0;
this.target_count = parseInt(target_number);
this.target_frame = document.getElementById(target_frame);
this.timer = null;
this.counter();
};
numberCounter.prototype.counter = function() {
var self = this;
this.diff = this.target_count - this.count;
if(this.diff > 0) {
self.count += Math.ceil(this.diff / 5);
}
this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
if(this.count < this.target_count) {
this.timer = setTimeout(function() { self.counter(); }, 20);
} else {
clearTimeout(this.timer);
}
};
ScrollTrigger.create({
trigger:".sc-donation",
start:"0% 40%",
end:"0 30%",
onEnter:function(){
new numberCounter("counter4", 4338644);
new numberCounter("counter3", 258953);
new numberCounter("counter2", 10);
new numberCounter("counter1", 130000);
}
})