# scss

366개의 포스트
post-thumbnail

[SCSS] SCSS 공부 정리 (1)

SCSS STUDY 👨🏻‍🏫 > 본 글은 FastCampus 강의를 듣고 정리하기 위해 쓴 글입니다. :] 주석 ✍🏻 // CSS로 compile할 때 compiled된 css file에서 보이지 않음. /\\/ 변수 ✍🏻 $variable 자식

2일 전
·
0개의 댓글
post-thumbnail

HTML/CSS정리 11 -SCSS

scss : css 전처리기> css의 부족한 점을 메워줄 수 있다css에서는 이렇게 일일이 경로를 적어줘야 했지만scss에서는 코드가 중첩되기 때문에 중복되는 코드가 적어진다.이렇게 {}를 이용하여 중첩할 수 있음.css에서는 로 썼어야 했지만 scss에서는이렇게

2일 전
·
0개의 댓글
post-thumbnail

[TerraBlock] 리액트로 2D 마인크래프트 만들기

게임을 만들기 위해 리액트를 사용하는게 아닌, > 리액트 실력을 키우기 위해 게임을 만들고 있습니다. 🤔 사이드 프로젝트로 게임을?? 🤔 1. 리액트 실력을 키우기 위해 간단한 게임들을 사이드 프로젝트로 해보니 깊게 생각해야 할 부분도 많고 간간히 알고리즘이 필

4일 전
·
0개의 댓글

SCSS

js 삼항연산자와 유사 (조건? true: false)단위가 없는지 확인하는 내장함수

4일 전
·
0개의 댓글

SCSS 기초

@mixin: 재사용할 그룹을 선언(정의)하는 것은 @include: 정의된 @mixin을 사용해당 선택자의 속성을 모두 가져옴%를 사용하지 않은 컴파일된 CSS 파일.btn을 사용하지 않아도 추가됨.% 사용내장 함수 map-get

4일 전
·
0개의 댓글
post-thumbnail

[TIL]CSS Module과 Scss

지금까지 React 프로젝트를 진행하면서 css는 CSS-in-JS 방식인 styled-components를 사용해 왔으나, 온보딩 코스의 강사님께서는 CSS Module + Scss 방식을 사용하고 계시기에 이번 기회에 한번 사용해 보기로 했습니다.말 그대로 CSS를

2022년 5월 15일
·
0개의 댓글
post-thumbnail

React : SPA & SCSS

📕 SPA >Single Page Application (싱글 페이지 어플리케이션)의 약자이다. 즉, 페이지가 1개인 어플리케이션이란 뜻으로 유저가 요청 할 때 마다 페이지가 새로고침 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 발생하고, 불필요한 트래

2022년 5월 12일
·
0개의 댓글
post-thumbnail

SCSS

1. 주석 2. 중첩 scss css 3. 상위(부모) 선택자 참조 scss css 4. 중첩된 속성 scss css 5. 변수 scss css 6. 산술 연산 scss css 7. 재활용 scss css 8. 반복문 scss css 9. 함

2022년 5월 11일
·
0개의 댓글
post-thumbnail

Instagram Clone - react, scss(1)

Router와 UseNavigate / SCSS 변환하기

2022년 5월 10일
·
0개의 댓글

@import @use 차이점

원티드 프리온보딩 코스 중 scss를 사용하게 됐는데,사용하면서 궁금한 것들을 공부해봤다.SCSS 파일을 불러오려면 import 하면 된다.근데 @use 이렇게 생긴 놈을 발견했는데 이건 무엇에 쓰이는 것일까?import와 use의 공통점은 파일을 import 해 사용

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

[회고] CSS과제 회고

Css 클론코딩 : 프로그래머스 | 코딩테스트 연습 코딩테스트 연습 이번 주 과제는 SCSS를 이용하여 홈페이지를 클론 코딩하는 과제였다. 프로그래머스를 선택한 이유 개발자가 되기 위한 공부를 하는데 가장 많이 들리는 사이트 중 하나가 프로그래머스 코딩 테스트 연습 부분이고, 또 그렙 같은 교육 기업에 가고자 하는 욕심이 있었기 때문에 시도하였다....

2022년 5월 7일
·
0개의 댓글
post-thumbnail

[SCSS] SCSS 문법5 - @mixin & @include

이번 포스트에서는 SCSS(SASS)의 또 다른 강력한 문법인 @Mixin과 @include(보통 둘이 합쳐 Mixins이라고 부르는 사람들도 있습니다.)에 대해서 알아보도록 하겠습니다.Mixins은 스타일시트에서 재사용이 가능한 스타일을 정의할 수 있도록 하는 문법이

2022년 5월 6일
·
0개의 댓글
post-thumbnail

[SCSS] SCSS 문법4 - 연산자

SCSS는 연산을 위한 연산자들을 지원하고 있습니다. SCSS 타입이 지원하는 값이라면 연산자를 통한 연산으로 다양한 값을 표현할 수 있습니다. 연산자의 종류와 사용가능한 타입들은 아래표와 같습니다.SCSS를 다루실 정도라면 연산자의 의미정도는 아실거라고 생각되어 연산

2022년 5월 6일
·
0개의 댓글
post-thumbnail

[SCSS] SCSS 문법3 - @import

SCSS(SASS)에서도 @import 구문을 사용할 수 있습니다. SCSS에서 파일을 import할 경우 기본적으로 SCSS(SASS) 파일로 가져오게 됩니다.파일을 import 하게 되면 해당 파일의 내용이 현재 파일에 추가되는 효과를 가져옵니다.컴파일 결과만약,

2022년 5월 5일
·
0개의 댓글

POB_TIL 02 : SCSS, css module

css를 작성할 때 다양한 기능을 사용할 수 있다. 클래스 이름 중복을 피할 수 있다

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[SCSS] SCSS 문법2 - Nesting

Nesting은 '중첩'이라는 뜻을 가진 단어입니다. SCSS(SASS)는 중첩이라는 기능을 지원해서 기존 CSS에서 셀렉터를 활용하는데 발생했던 여러 불편함들을 없애주고 있습니다.예를들어 CSS에서 어떤 자식요소를 선택하기 위해서는 다음과 같이 사용했어야 했습니다.C

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[TIL] SCSS(2)

너랑은 언제 친해질까?🤨

2022년 5월 2일
·
0개의 댓글