# scss

24개의 포스트
post-thumbnail

Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초

Styled Components? CSS나 SASS같이 class, id, tag name를 가져와 쓰지 않고, 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯 스타일컴포넌트를 쓰는 것을 말한다. 즉, 리액트에서 ui단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하

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

[Project 01] 1차 프로젝트 회고

프로젝트 소개 2주동안 (2.21 ~ 3.6) 프리미엄 온라인 푸든마켓 마켓컬리 클론코딩을 진행하였습니다. 프론트엔드 3명 + 백엔드 2명 총 5명의 개발자들이 한 팀이 되었으며, 저는 프론트엔드를 담당했습니다. 프론트엔드 Github 백엔드 Github 사용된 기

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

Svelte#1 - Svelte scss/eslint 관련 vscode 설정

svelte관련해서 scss와eslint를 설정 하다가 좀 애먹은 부분이 있어서 공유 및 기록한다.

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

PROJ-FOODLY-DAY4 : 인풋 아웃라인, SCSS공유, transform & transition

프로젝트 4일차 인풋 아웃라인 제거 인풋창을 만들고 내용을 입력하려 커서로 클릭을 하면 파란 줄이 인풋창을 감싸게 된다. 이것을 outline 설정으로 제어할 수 있다. 해당선택자를 통해 인풋창에 아웃라인 속성을 none으로 설정했다. 매번 하는 설정인데 왜 매번

2020년 2월 27일
·
0개의 댓글

TIL SCSS문법(종류)

SCSS문법

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

SASS/SCSS 설치부터 간단 사용법 정리

SASS & SCSS란? SASS(Syntactically Awesome StyleSheet)는 CSS의 단점을 보완한 CSS의 확장형이다. 그리고 SCSS는 SASS를 더 편리하게 수정한 버전이다. 확장자는 .scss 사용하며, 브라우저에서 SASS구문을 이해하지 못

2020년 2월 20일
·
0개의 댓글

TIL - 프론트 엔드 스터디

//css.text { width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }h1 { background:url("h1 { background:url(h1 { background:url

2020년 2월 20일
·
0개의 댓글

How to import SCSS in Vue

Vue에서 Style 적용 방식

2020년 2월 13일
·
0개의 댓글

Scss - mixin basics

@mixin으로 선언하고 @include로 불러온다. 일반적으로 @extend 대신 mixin을 사용하는 것을 권장한다(https://sass-guidelin.es/ko/#extend) examples (from https://poiemaweb.com/sass-css-extention)

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

Next.js + Sass

Import .sass or .scss files in your Next.js project https://github.com/zeit/next-plugins/tree/master/packages/next-sass

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

SCSS 중첩된 정의 처리 / 재활용

현재까지 SCSS를 사용함에 있어서 SCSS의 특별한 기능을 많이 활용하지 못한것 같아 오늘 하루를 투자해서 스타일 시트를 모두 리팩토링 했다. CSS 전처리기 사용을 통해 조금더 효과적으로 스타일시트를 작성할수 있게 됬다. 중첩된 속성 정의 @mixin / @include

2019년 12월 30일
·
0개의 댓글
post-thumbnail

자주 쓰는 html,css

css float한거 영역 채우기 clearfix img float 속성을 적용한 요소의 부모요소에 ::after를 사용해주면 된다. span과 ul태그를 감싸는 div 태그에 ::after를 추가하였습니다. 레퍼런스 : CSS / float를 clear하는

2019년 12월 19일
·
0개의 댓글

20191204 - AWS / React / CSS

올해가 얼마 남지 않았따. AWS - 외부에서 받은 EC2 Instance에 ssh를 사용하여서 접속해봄 - 외부에서 받은 MongoDB(DocumentDB)에 접속해보...려다가 안됨 Creating an AWS DocumentDB Cluster Amazon VPC 외부에서 Amazon DocumentDB 클러스터에 연결 React ...

2019년 12월 4일
·
0개의 댓글
post-thumbnail

IE에서 flex-direction: column 사용시 주의사항 ⚠️

문제 flex-direction: column이 문제가 되었는데 자식 영역의 height가 잡히지 않아서 전부 겹치는 문제가 생김. Chrome환경에서는 문제가 없던 것이 IE에서 문제가 되었다. 해결 flex: 1을 flex: 1 0 auto로 바꾸니까 문제가 해결되었다. IE10에서 flex의 기본값은 최신 사양에 정의 된대로 0 1 auto가...

2019년 11월 22일
·
0개의 댓글

리액트 Responsive nav bar 구현

소스 코드 : https://github.com/leaveittogod0123/ReactLab/tree/master/ResponsiveNavBar create-react-app을 사용하셔도 되고 또는 웹팩을 통해서 프로젝트 설정을 다 하신 상황을 가정합니다. 웹팩을

2019년 11월 20일
·
0개의 댓글

React 개발환경 세팅하기 - 3. Sass 설치

React 프로젝트에 Router 설치 방법 1. 터미널을 킨다. 2. Sass 설치를 희망하는 React프로젝트의 디렉토리로 이동한다. 3. 입력한다. 4. 설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "node-sass" 이 있는지 확인해 본다. 끝! +활용방법 형태로 파일을 생성 후,...

2019년 11월 3일
·
0개의 댓글

React

06221ac4ae96f681e3bed114dd1bdd9f.jpg REACT 가상 DOM을 활용하여 부분적인 렌더링을 하는 자바스크립트 라이브러리(프레임워크x) SPA(Single Page Application) 리액트의 특징 (1) 화면 view단을 구현하기 위한 최소단위로 재사용가능한 component를 사용 (2) component를 조립하여 완...

2019년 10월 4일
·
0개의 댓글
post-thumbnail

[ Netflix Clone 3 ] Style

Static Directory image.png style을 담당하는 static (정적) 폴더에 스타일링에 관련된 파일들을 담아둔다. /images 필요한 이미지와 로고 등이 들어가있는 폴더 /sass scss 파일을 작성하는 폴더로 abstracts 와 components 두 가지 하위 폴더로 나눠져 있고 index 파일인 style.scss...

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

[ SASS ]

Syntactically awesome stylesheet (어썸한 문법 스타일시트) 평소 코드펜이나 다른 프로젝트 코드를 봤을 때 많은 스타일링 파일이 scss로 작성되어있는 것을 많이 봤어서 궁금증을 해결하기 위해 정리합니다. CSS Preprocessor (css 전처리기기)란? >CSS 문서 작성을 하다 보면 많은 코드가 중복이 되고 양이 많아...

2019년 8월 31일
·
0개의 댓글

SCSS

SCSS = SASS + CSS > SASS 컴퍼일러로 SCSS 파일이 CSS 파일이됨 1. 기본문법 기본틀은 CSS 문법과 동일 EX) .sec { margin: 0;} nested block(넥스팅) 을 적용 // 을 이용해서 라인 단위로 주석처리 2. 네스팅(nesting) 네스팅이란 서브루틴 중에 다른 서브루틴을 짜 넣는것. 셀렉터 네스팅 d...

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