# Sass

54개의 포스트
post-thumbnail

첫 React 팀 프로젝트, Westagram 돌아보기

CRA를 사용하여 팀원이 함께 초기 셋팅을 진행공동으로 public 폴더와 scss를 사용하고 관리git을 사용한 첫 번째 협업 프로젝트

2020년 9월 11일
·
6개의 댓글
post-thumbnail

TIL DAY.20 React Router, Sass

SPA:페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성이 되어서 유저가 새로운 페이지를 요청 할 때 마다 페이지가 새로고침되고 로딩할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 하는 방식입니다.

2020년 9월 7일
·
0개의 댓글
post-thumbnail

리액트에서 css사용하기

.css파일 작은 프로젝트서 사용시간편 그러나 속성 클래스 이름 겹칠때 오류 발생중복 방지를 위해 컴포넌트명-클래스 방식 이름이나 css선택자 활용ex ) .App-header/ .App-link (컴포넌트-클래스명)filename.module.csssassnpm i

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

React스터디_컴포넌트 스타일링

일반적으로 우리가 흔히 알고 있는 css를 이용하여 스타일링하는 방법입니다.

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

SCSS (each)

list 반복 CSS 변환결과 Map 데이터 반복 CSS 변환결과

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

SCSS (for... through/ to)

through 숫자까지 반복to 숫자 바로 앞의 숫자까지 반복

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

SCSS (mixin, if, or, or not ...)

SCSS CSS 변환결과

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

TIL no.30

Airbnb 3일차

2020년 9월 2일
·
1개의 댓글
post-thumbnail

TIL 47 | React Router, Sass

라우팅(Routing)이란 다른 경로(주소)에 따라 다른 화면(View)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어있지 않다. 따라서 리액트의 라우팅 기능을 위해 React-router라는 라이브러리를 사용한다. (Third-party Library)C

2020년 9월 1일
·
0개의 댓글
post-thumbnail

css & sass는 무엇이며, 차이점은 ?

프론트엔드라면 어느정도 css도 사용할 줄 알아야 한다고 생각한다. 일을 하면 어느정도 css를 만들거나 수정을 해야 할 일이 생기기 때문이다.^^.... css(Cascading Style Sheets) 는 무엇인가 ? html이 문서 파일이며, css는 style

2020년 8월 23일
·
0개의 댓글

[React] Style Component

1️⃣ Sass Install Use dynamic class name classnames library * How to use * ...Rest Props When you wanted to further hand off these items (i.e., thin

2020년 8월 21일
·
0개의 댓글
post-thumbnail

justify-content

flex 라는 display 속성: css 의 flex 는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이다.flex 를 사용하기 위해서는 컨테이너 태그에 display: flex 속성을 부여해야한다.(flex-direction: row; 을 사용하여 정렬방법을 세로로

2020년 8월 10일
·
0개의 댓글
post-thumbnail

Sass

문법적으로 매우 멋진 스타일시트CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다. Sass에서는 두 가지 확장자 .scss와 .sass를 지원한다. 이 두가

2020년 8월 10일
·
0개의 댓글

컴포넌트 스타일링

일반 CSS : component를 스타일하는 가장 기본적인 방식Sass : 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있게 해준다.CSS module : 스타일을 작성할 때 CSS클래스가 다른 CSS 클

2020년 8월 6일
·
0개의 댓글

[TIL] Sass, React-router

CSS Pre-processorCSS에 변수, Nesting, 연산자 등 CSS에서 기본적으로 제공되지 않는 문법들을 사용해서 CSS를 편리하게 작성하게 해줄 수 있게 해주는 툴작성 후 최종적으로 Sass 패키지에 의해서 CSS로 컴파일되어서 실행 됨반복되는 작성을 최

2020년 8월 5일
·
0개의 댓글

TIL. Sass, Router, Git 초기세팅 - 8/5

Sass는 css의 상위에 있는 메타언어로, 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 일종의 CSS 전처리기(pre-processor)이다

2020년 8월 5일
·
0개의 댓글

styled-components

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 css-in-Js라고 부른다. css-in-JS 라이브러리 중에서 개발자들이 가장 선호하는 styled-components를 알아보자! styled-component

2020년 8월 5일
·
0개의 댓글
post-thumbnail

Sass

css와 같은 스타일을 파일이나 css에서 조금 더 확장된 기능을 추가한다고 생각할 수 있다.자주 사용되거나 value가 복잡하다던지 등을 변수로 저장하여 원하는 곳에서 하나의 값으로 사용할 수 있다.스타일도 스크립트나 html처럼 부모자식관계로 묶어 관리할 수 있다.

2020년 7월 24일
·
0개의 댓글

Sass 기초

Sass를 사용하면, 변수, 중첩, 미스 인, 상속 등의 다양한 스타일의 유지 보수화 할수 있는 기능들로 css파일을 작성 할 수 있다. 공식 문서를 쭉 읽어보면서, 해석하고 이해한 내용을 적었다.우선 다음과 같은 명령어를 통해서, sass를 설치했다.그리고 공식문서에

2020년 7월 16일
·
0개의 댓글
post-thumbnail

[TIL] Sass(SCSS)

Sass(SCSS) / 전처리기에 대해서

2020년 7월 15일
·
0개의 댓글