NOW OR NEVER

리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..

SASS/SCSS 문법 함수(functions) @mixin과 굉장히 유사하지만 차이점 존재 @mixin은 믹스인 이름을 정의하고 믹스인 안에서 처리될 매개변수를 정의하고 그 매개 변수는 스타일 안에서 사용할 수 있다. 믹스인 안에 특정 스타일을 정의해서 사용하는 개념 @function은 믹스인처럼 함수이름을 먼저 정의하고 매개변수가 특정한 값을 받아서 @function 내부에서 처리하게 됨 @mixin과 다른 점 : 믹스인은 내부에서 처리되는 것이 어떠한 스타일(속성:값;)이다. 속성:값; 세트로 이루어진 전체적인 스타일을 재활용하기 위해 사용하는 개념이 믹스인이다. @function이 처리하는 것은 결과적으로 특정한 값이다. @function은 스타일이 아닌 특정한 값을 재활용하기 위한 개념이다. 항..

SASS/SCSS 문법 변수 1. !global(전역 설정) 값 뒤에 사용하는 개념 이 플래그를 사용해서 선언해놓은 변수를 유효범위에 종속되지 않고 전체 영역에서 쓸 수 있는 형태로 정의 가능 기존에 선언된 전역변수가 덮어 써질 수 있다.(변수를 재정의하지 않는 이상) 변수가 적용되는 곳을 기준으로 해서 가장 가까운 곳에서 마지막에 선언된 값이 마지막으로 들어간다. 2. !default(초기값 설정) 할당되지 않은 초기값을 설정 할당된 변수에는 새롭게 정의되는 값을 적용하지 않고 기존 할당 값(전역변수 등) 사용 변수와 값을 설정할 때 기존 변수가 있을 수도 있으니 현재 설정하는 변수의 값은 기존에 변수가 있는 경우에는 사용하지 않는다는 의미로 사용 Bootstrap, 기타 CSS, SCSS 상뇽하는 라..

Grid item 함수 grid에서 사용하는 주요 함수 인수: 함수의 괄호 안에 들어가는 것, 함수에 들어가는 일종의 데이터 1. repeat( ) 함수 행과 열의 크기 정의를 반복할 때 사용 반복하는 횟수를 첫번째 인수로 활용하고 행과 열의 크기 정의를 두번째 인수로 사용 두번째 인수에 반복패턴 입력 가능 선의 이름도 정의 가능 fr 단위 사용 가능 grid-template-rows와 grid-template-columns에서 사용 grid-template : grid-template-rows 정의 / grid-template-columns 정의; ex) grid-template : repeat(2, [row-start] 200px [row-end] / repeat(3, [col-start] 100px..