KDT/TIL
7/27 TIL : CSS 애니메이션 기반 페이지, Sass
ebulsok
2022. 9. 1. 18:30
CSS 애니메이션 기반 페이지
📌 코드: https://github.com/ebulsok/KDT-727-animation.git
📌 결과물: https://kdt-727-animation.netlify.app/
- 애니메이션 기준점 속성: transform-origin
- @keyframes 애니메이션이름 { }
- animation: 애니메이션이름 진행형태 진행시간 진행횟수
🔎 Sass(Syntactically Awesome Style Sheets) 설치
- Node.js 설치(https://nodejs.org/ko/)
- [터미널] node --version 정상적으로 설치되었는지 확인
- [터미널] npm install sass -g NPM을 통해 Sass 설치
- [터미널] sass --version 정상적으로 설치되었는지 확인
🔎 Sass+SCSS 사용하기
- [터미널] sass --watch 경로/파일이름.scss 경로/파일이름.css
- 다른 scss 파일 가져오기
- @import "경로/파일이름";
- 부분 파일의 경우 _제거하여 불러옴 (ex. _reset.scss => @import "reset";
- Nesting 방식
- 자기 자신 선택자로 & 활용
- $로 변수 지정
- _mixin.scss 파일 => @mixin 이름( 매개변수 ) { }, 원래 파일 => @include 이름( 매개변수 );
- @for 변수 from 숫자 to 숫자, @for 변수 from 숫자 through 숫자
- @each $el in 배열
- @if 조건 { }