# Sass

445개의 포스트
post-thumbnail

SCSS(Sass)란?

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

3일 전
·
0개의 댓글
·

235024 - React(css module)

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

6일 전
·
0개의 댓글
·

[scss] @if

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

7일 전
·
0개의 댓글
·

[scss] 변수, !global, !default

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

2023년 5월 22일
·
0개의 댓글
·

[scss] @each, @while

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

2023년 5월 22일
·
0개의 댓글
·

[scss] @for (through / to)

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

2023년 5월 22일
·
0개의 댓글
·

230519 - React(useCallback, useEffect, useReducer), SASS/SCSS(반응형)

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

2023년 5월 19일
·
0개의 댓글
·

[scss] @for 반복문

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

2023년 5월 18일
·
0개의 댓글
·

230517 - React(배열 렌더링, useRef), SASS/SCSS

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

2023년 5월 17일
·
0개의 댓글
·

230516 - useState

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

2023년 5월 17일
·
0개의 댓글
·

230515 - React(가위바위보), sass/scss(채팅어플)

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

2023년 5월 15일
·
0개의 댓글
·

230512 - React(가위바위보), sass/scss(채팅어플)

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

2023년 5월 12일
·
0개의 댓글
·

230511 - React(가위바위보), sass/scss(조건문, 반복문)

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

2023년 5월 11일
·
0개의 댓글
·

230509 - useState, sass/scss(mixin, content, import, extand)

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

2023년 5월 9일
·
0개의 댓글
·

230508 - useState, sass/scss

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

2023년 5월 9일
·
0개의 댓글
·

[SCSS] font-face mixin

style/base/\_typography.scss

2023년 5월 9일
·
0개의 댓글
·
post-thumbnail

[회고] 원티드 프리온보딩 프론트엔드 인턴십 - 사전 과제편

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

2023년 4월 29일
·
0개의 댓글
·

왜 Sass에서 Styled-components로 전환했을까?

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

2023년 4월 28일
·
0개의 댓글
·
post-thumbnail

[SCSS] node-sass 설치&설정

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

2023년 4월 25일
·
0개의 댓글
·
post-thumbnail

(SEB_FE) Section3 Unit3 Component Driven Development

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

2023년 4월 18일
·
0개의 댓글
·