320x100 front-end/CSS3 [SCSS] SCSS 사용하기 SCSS란? SASS를 더 편리하게 수정한 버전. 확장자는 .scss 사용하며, 브라우저에서 SASS구문을 이해하지 못하기 때문에 컴파일하는 작업이 필요하다. 설치하기 npm install -g node-sass //에러나면 아래껄로 하기 sudo npm install --unsafe-perm -g node-sass 설치 후 파일확장자명을 .scss로 사용한다. 유용한 플러그인 Live Sass Compiler Sass와 SCSS를 컴파일 작업을 하지 않아도 실시간으로 확인이 가능, 문법오류 체크를 해줌 주요기능 중첩 //SCSS .section { width: 100%; .list { padding: 20px; li { float: left; } } } //컴파일 후 .section { width: 1.. 2022. 11. 29. [React-css] styled-component 설치 및 사용법 + 작업환경 셋팅하기 CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. Component가 많을 경우, class명이 중복될 수 있는 문제를 방지해준다. 💅 1. 패키지 설치 (1) 터미널로 설치. $ npm i styled-components //타입스크립트로 작성시 아래와 같이 입력 $ npm i styled-components @types/styled-components (2) component파일 상단에 styled함수를 임포트한다. import styled from "styled-components"; 💅 2. 사용방법 (1) 기본문법 styled.태그 뒤에 백틱(``)을 작성하고 그안에 css스타일링을 한다. (작명시 첫글자 대문자 필수) con.. 2022. 4. 5. [CSS] all 속성 - 스타일 초기화하기 요소의 기본 스타일 속성을 초기화하려면 all: unset; 요렇게 써주면 된다. 간단하다. 스타일 하나하나 바꿀 필요 없이 한줄이면 끝! /* BAD */ button{ background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer } /* GOOD */ button{ all:unset; } button뿐만 아니라 a태그, ul,li 등등 디폴트 스타일이 있다면 모두 사용이 가능하다. 굿굿! 2022. 3. 6. 이전 1 다음 320x100
