# Sass
개인 개발 일지 - First - EXM
난 웹 프론트엔드 개발자가 목표인 학생이다 학원은 안다니고 독학으로 배우고 있고 공부한지 2년정도 되었다. 이번에 React와 Firebase 그리고 Figma를 사용해 만든 개인 프로젝트를 소개해보려한다. 어느정도 완성하는데에는 4~5일 정도 걸렸고 이 프로젝트는
리액트 컴포넌트에 CSS 적용하기 - 많이 사용하는 4가지 기술 정리
리액트 프로젝트에서 컴포넌트 구조를 어떻게 짜는지가 유지보수에 중요하듯 컴포넌트의 스타일링 또한 리액트의 큰 축으로서 CSS를 어떤 구조로 관리할지 관건입니다. 구조화를 돕는 4가지 기술을 소개합니다. SASS (pre-processor) SASS와 같은 CSS 전처
scss 라이브러리 알아보기
기존 css에서 사용되는 반복적이고 가독성이 떨어지는 코드를 nesting rules(반복 규칙)를 통해 반복되는 selector를 묶고 변수, 함수, mixins를 통해 사용자가 사용하기 쉽고 가독성이 좋게 만든 라이브러리CSS pre-processor(전 처리기)라
[Sass] 설치하기, --watch 옵션
npm -v 설치확인npm show sass version 설치가 잘 되었는지 버전 확인cd dev/sass_test 디스크드라이브를 바꾸는 명령 c,d / 폴더 이동은 cd 명령어 사용문법은 scss<변환할 scss 파일명> <변환될 css 파일명>sas
Code Refactoring
flex 를 사용하지 않더라도 각 요소의 width 값을 100%로 주면 자동적으로 세로 정렬이 만들어진다. 불필요하게 flex를 사용해주지 않아도 된다.<p>의 경우 블록 레벨 요소이다. MDN에서 해당 요소에 대한 설명이다."블록 레벨 요소는 언제나 새로운 줄
이제 때가 되었다. 다양한 CSS 처리 방법을 알아보자.
뭐... 다양한 CSS 처리 방법은 예전부터 알고 있었다. 근데 이제 혼자 제작을 많이 하다보니 CSS로만으로도 충분해서 깊게 들어가지 않았었다. 문제는 처음으로 큰 프로젝트의 형태 (물론 내 입장에서. 이정도 크기는 작은 크기라고 하더라..엉엉😭)에서는 CSS를
[SASS] 시작하기
업무 중에 구글링이나 코드펜을 통해 검색할때 많은 파일이 scss로 작성되어 있었고css 내 반복되는 내용은 줄이고 효율적으로 스타일시트를 관리할 수 있다고 해서 공부해보기로 했다.도대체 얼마나 효율적이고 재사용성이 있으며 유지보수에 있어 얼만큼 편리한지직접 공부해보고
React Style
Style Loaders Webpack에서 js, jsx 파일을 import할 때 babel-loader를 사용하게되는데 이때 로더는 babel-config에 따라 번역할 문법이 설정됩니다 이와 별개로 css 파일이나 다른 확장자를 가진 파일(sass, scss)을
[React] sass
설치 시 node-modules폴더에 sass폴더가 생성된다. (package source code)\--save: package.json에 설치된 패키지의 이름과 버전 정보를 업데이트Js파일 import 구문도 수정해야 한다sass의 가장 기본적인 기능으로 Nesti
[SASS] 01. 내가 보려고 작성한 SASS 문법(SCSS)
편의상 scss로 지칭터미널에서 아래의 명령어를 입력하여 설치$ npm i -g sasssass-project 디렉토리 생성하고 트랜스파일링할 scss 파일을 생성트랜스파일링할 sass 파일의 경로와 트랜스파일링 후 생성될 css파일의 경로 지정$ sass foo.ss
React - SASS
SASS 🎨 > sass는 css 전 처리기 입니다. sass 문법이 css로 변환해주는 것! nesting, mixin, 변수 를 이용해 스타일시트의 유지보수와 가독성을 좋게 만들어 줍니다. 설치방법 --save 를 적는이유는 package.json 설치된 패키
.png?w=768)
TIL 014 | Sass(SCSS) 조건문 & 반복문 & 함수
Today, I Learned.멋쟁이 사자처럼 프론트엔드 스쿨에서 배운 내용 정리. - Sass(SCSS) 조건문 & 반복문 & 함수.