📈 40 Wonders

• 프로젝트 이름: 40 Wonders
• 사용한 언어: HTML, SCSS, JavaScript, jQuery
• 사용한 JavaScript 라이브러리: GSAP (ScrollTrigger)
• 웹사이트 유형 : Responsive (반응형)

SCSS란?

SCSS는 Sassy CSS의 약자로, 기본 CSS 문법을 기반으로 변수, 중첩 규칙, 믹스인 Mixin, import 등의 기능을 제공하여 CSS를 더 모듈화하고 유지보수하기 쉽게 만들어 줍니다.

변수 (Variables)

$primary-color: #fff;
body {
  background: $primary-color;
}

SCSS에서 변수는 $ 기호로 시작하며, 변수 이름 뒤에는 유효한 CSS 식별자가 올 수 있습니다.

중첩 (Nesting)

ul{
    li{
      display: inline-block;
      margin-right: 10px;
      a{
        text-decoration: none;
        color: $primary-color;
      }
	}
}

CSS 선택자를 중첩하여 코드를 더 가독성 있게 작성할 수 있는 기능입니다.

믹스인 (Mixin)

$tablet:1023px;
@mixin tablet(){
    @media (max-width:$tablet) {
        @content;
    }
}
@include tablet{
	flex-direction: column;
	padding: 0;
	height: auto;
}

SCSS에서 코드를 재사용하기 위한 기능 중 하나입니다. 믹스인은 재사용 가능한 코드를 정의하고 필요할 때마다 해당 코드를 불러와 사용할 수 있게 합니다.

*Mixin을 사용하여 본 프로젝트의 Media Query를 작성하였습니다.

@import

@import './layout/header';
@import './layout/nav';
@import './layout/footer';
@import './page/main';

@import는 SCSS에서 외부 파일을 가져와서 현재 파일에 포함시키는 기능을 제공합니다. 이를 통해 코드를 모듈화하고 여러 파일 간에 스타일을 쉽게 공유할 수 있습니다.

SCSS 파일 구조/명

@import './util/var';
@import './util/mixin';
@import './vendors/swiper-bundle';
@import './base/fonts';
@import './base/reset';
@import './base/common';
@import './layout/header';
@import './layout/nav';
@import './layout/footer';
@import './page/main';

util

사이트 전반에 걸쳐서 재사용되는 스타일을 정의합니다. (변수, Mixin 등)

vendors

프로젝트에서 사용하는 외부 스타일을 넣습니다. (Swiper, 부트스트랩 등)

base

사이트 전반에 걸쳐서 재사용되는 스타일을 정의합니다. (fonts, reset, common 등)

layout

사이트 구조에 해당하는 레이아웃을 넣습니다. (header, footer, nav)

page

모든 페이지가 같은 스타일을 사용할 수는 없기 때문에 각 페이지에서 사용될 구체적인 스타일을 여기에 넣습니다. main, _페이지 이름.scss

믹스인을 활용하여 vw 계산하기

@mixin unit($prop, $num1:0){
    @if($prop=='font'){
        font-size: ($num1*100)/1920+vw;
    }
}
@include unit(font,66);

1920px = 100vw 기준으로 폰트사이즈 계산

1. unit이라는 이름의 믹스인을 정의. unit은 두 개의 매개변수 $prop(이름)과 $num1(변환할 숫자)을 받게 되며 $num1의 기본값은 0으로 설정

2. 만약 $prop이 font와 같을때 실행할 수 있도록 조건문 처리

3. font-size에 vw 계산식 사용 ($num1*100)/1920+vw

4. @include를 사용하여 px vw로 변환

반응형 Grid

auto-fill

auto-fill은 그리드 컨테이너의 사용 가능한 공간에 그리드 아이템을 최대한 많이 배치합니다. 빈 공간이 생기면 해당 공간이 빈 상태로 유지되며 컨테이너에 빈 공간이 있을 수 있습니다.

auto-fit

auto-fit은 auto-fill과 비슷하지만, 그리드 아이템의 크기가 작아서 빈 공간이 생길 때 해당 부분이 채워집니다. 컨테이너의 빈 공간이 거의 없거나 전혀 없을 수 있습니다.

minmax()

minmax() 함수는 CSS 그리드 레이아웃에서 사용되며 그리드의 행 또는 열의 크기를 동적으로 지정하는 데 활용됩니다.
*주로 반응형 웹 디자인에서 사용

40 Wonders에서 사용한 예시

.partner-list{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(504px,1fr));
	border-top: 1px solid #464646;
}

그리드 아이템의 크기를 최소 504px에서 최대 1fr로 설정하여 최소 크기를 유지하면서 남은 공간에 따라 크기가 반응형으로 조절되도록 하였습니다.

숫자 증가 애니메이션

1. [data-number] 속성을 가진 모든 요소를 선택한 후 각각에 대해 함수를 실행 (each 반복문 사용)

2. 객체 startCount의 속성 var를 0으로 초기화

3. 현재 처리 중인 data-number 속성 값을 가져와 targetNum 변수에 할당하기

4. gsap.to를 사용하여 객체 startCount 의 var 속성을 targetNum 값으로 변경

5. onUpdate를 사용하여 애니메이션이 업데이트 될 때마다 함수가 실행될 수 있게 하기

6. 변수 strLength (문자열 길이) 초기화

7. 조건문을 사용하여 문자열에 소수점이 포함되어 있는지 확인

8. 소수점이 있을때 문자열을 소수점을 기준으로 나누고 소수 뒷자리 부분 strArr[1]의 길이를 계산

9. innerHTML을 사용하여 내용을 애니메이션 중인 값으로 갱신시키기 (toFixed 함수에 소수점 뒷자리 부분의 길이 strLength를 넣어 소수점 뒷자리 수를 유지하도록 만들기)