CSS3 [SASS,SCSS] SASS,SCSS 알아보기 목차 CSS의 라이브러리인 SASS, SCSSSASS와 SCSS는 CSS를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기이다. 두 가지 모두 Sass(Syntactically Awesome Stylesheets)라는 이름 아래 개발되었으며, CSS의 단점을 보완하고 스타일시트 작성의 효율성을 높여준다. SASS와 SCSS의 차이SASS (Sass의 옛날 문법): Indentation Syntax라고도 하며, 들여쓰기를 통해 코드의 구조를 나타낸다. 중괄호 `{}`와 세미콜론 `;`를 사용하지 않는다.SCSS (Sass의 새로운 문법): Sassy CSS의 약자로, CSS와 거의 동일한 문법을 사용한다. 중괄호와 세미콜론을 사용하며, 기존 CSS 파일에 쉽게 적용할 수 있다. 주요 기능변수(Va.. 2024. 6. 13. [Next.js]웹 페이지 전환 효과를 주는 방법들 목차 웹 페이지 전환 효과를 주는 것들은 무엇이 있을까?Next.js에서 페이지 전환 효과를 구현하는 방법에는 여러 가지가 있다. 아래는 몇가지 대표적인 방법이다. Framer MotionFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.`AnimatePresence`와 `motion.div`를 사용하여 페이지 전환 애니메이션을 적용할 수 있다.// components/PageTransition.tsx'use client';import { usePathname } from 'next/navigation';import { AnimatePresence, motion } from 'framer-motion';import React from.. 2024. 5. 24. 개인 코드 컨벤션 정리 - CSS 목차 styled-components폴더구조컴포넌트 기반 구조로 각 컴포넌트에 대해 별도의 스타일 파일을 생성한다.src/ components/ Button/ Button.tsx Button.styles.ts Header/ Header.tsx Header.styles.ts 네이밍 컨벤션 파일명CamelCase를 사용한다.`Button.styles.ts` 변수명PascalCase를 사용하여 styled-component를 정의한다.const PrimaryButton = styled.button` /* styles */`; 스타일 정의 순서 : 스타일 속성은 다음 순서대로 작성Positioning: position, top, right, bottom, lef.. 2024. 5. 23. 이전 1 다음