# Sass

solimlee

css는 문서의 스타일을 구현하는 스타일 시트 언어이다. 프로젝트가 커지고 코드가 많아질수록 유지보수가 어렵다는 불편함이 생길 수 있다. > 1. selector를 만들때 매번 불필요한 부모요소의 선택자를 적어야 한다. > 2. 코드 수동 변경 필요 > 3. 중복

raumschiff_

🚩 React CSS Module 📝 설명 css module을 사용하면 css 클래스가 중첩되는 것을 방지할 수 있다. css 파일명 뒤에 .module을 붙여주면 됨 ✒️ 예제 코드 작성 입력 App.js Button1.jsx Button1.module.css Button2.jsx Button2.module.css CheckBox.j...

ssarr_i

if(조건식, 표현식1, 표현식2).section-v1{ width: $section-v1; background-color: if($section-v1 > 700, coral, orange);}/ CSS 컴파일 결과 /.section-v1{ width:900pxl

ssarr_i

변수 이름 앞에 $를 넣어서 사용한다.반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있다.변수에서 사용 가능한 값은 문자열, 숫자, 색상, 불리언(true, false), 리스트(Array), null이다.변수 문법 코드문서의 최상위

ssarr_i

@each는 list와 map데이터를 반복할 때 사용한다.자바스크립트 for in 반복문과 유사하다.하나의 데이터를 저장하기 위해서 변수를 사용하는데, 여러 개의 데이터를 저장할 때에는 list 또는 map이라는 형식으로 저장한다.연관된 데이터들끼리 모아서 하나의 변수

ssarr_i

@for $index from 1 through 3through 숫자까지 반복 \* 1부터 3까지 반복@for $index from 1 to 3to 바로 앞 숫자까지만 반복 \* 1부터 2까지 반복

raumschiff_

🚩 React useCallback 📝 설명 React Hooks 중 하나, useMemo와 비슷 useMemo는 특정 결과값을 재사용, useCallback함수를 재사용 함수 안에서 사용하는 props가 있으면 꼭 deps로 포함시켜야 함 -> 최신값을 인식하게 ✒️ 사용법 useCallback(함수선언구, 변화요소(dependency)) 예제...

ssarr_i

1. @for문의 사용 위와 같은 형태로 작성하고 to 대신 through를 작성할 수 있다. 예시 > @for문을 작성할 때 변수는 보간법으로 처리해야 컴파일 에러가 발생하지 않는다 > > * 보간법 > - #(샵) 특수문자와 {}(중괄호)를 사용하여 표기한다

raumschiff_

🚩 React 배열렌더링 prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js UserList1.jsx UserList2.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [React] 배열렌더링 useRef 📝 설명 컴포넌트의 속성

raumschiff_

🚩 React useState(중첩된 객체) prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js 출력 이미지로 대체 ![](https://velog.velcdn.com/images/raumschiff_/post/02

raumschiff_

🚩 React 리액트로 가위바위보 만들기 3일차(완성) 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 버튼 클릭할 때 마다 컴퓨터의 이미지 랜덤으로 변경됨 가위 ![...

raumschiff_

🚩 React 리액트로 가위바위보 만들기 2일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 아직 승패 관련글씨는 구현x 버튼 클릭할 때 마다 컴퓨터의 이...

raumschiff_

🚩 React 리액트로 가위바위보 만들기 1일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면(미완성) >각 버튼 클릭 시 콘솔 출력

raumschiff_

🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Input.jsx Input2.jsx 출력 이미지로

raumschiff_

개인사정으로 하루 결석하여 나중에 추가 예정 🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Count

noocgs

style/base/\_typography.scss

jungsu

나는 사전 과제 프로젝트를 어떻게 관리했을까? 이게 최선이야?

hoon-devlog

오늘은 프로젝트에서 스타일링 작업을 진행하면서 Sass에서 Styled-components로 전환한 이유에 대해서 알아보자.Sass에서는 클래스명이나 ID명 등의 선택자를 사용하여 스타일을 적용하므로, 불필요한 중첩과 복잡도가 높아지는 단점이 있었다. 프로젝트 규모가

hyoredm

vscode 터미널에 npm init -y 입력\-> package.json 파일 생성vscode 터미널에 npm i node-sass 입력\-> package-lock.json 파일 생성packge.json "sctipts" 부분 아래와 같이 수정cf) node-sa

lovesyung

Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.CSS 방법론들의 특징과 장단점을 이해한다.Styled Components의 기본 사용법을 익힌다.HTML과