scss (13) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 40회차 미션 패스트캠프 프론트앤드 인강 40일차 지난시간에 이어 scss 의 다양한 문법을 알아보았다. 중첩된 속성 font-, margin- 등과 같이 동일 한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할수 있다. 변수 반복적으로 사용되는 값을 변수로 지정할수 있다. 변수이름 앞에는 항상 $를 붙인다 $변수이름: 속성값; 컴파일결과 width, height는 200px, background는 #e96900 url("/assets/images/bg.jpg");로 출력된다. 변수의 유효범위(Variable Scope) 변수는 사용가능한 유효범위가 있다. 선언된 {}내에서만 유효범위를 가진다. 변수 재할당(Variable Reassignment) 다음과 같이 또다른 변수에 변수를 할당 할 수 있다. $red:#f.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 39회차 미션 패스트캠프 프론트앤드 인강 39일차 scss 데이터의종류와 다양한 문법을 알아보았다. 주석 //을 할경우 컴파일안되고 /*내용*/을 할경우 컴파일이되어 보인다. 데이터의 종류(데이터타입) 데이터의 종류에는 숫자,문자,컬러,boolean,null,list,map등이 있는데 문자는 따옴표가 있을수도있고 없을수도있다. null을 사용하면 컴파일하지않는다. 자바스크립트의 배열과 유사한 List의 경우 ,가 들어가면 괄호로 묶어준다. Map의 경우 (key:value, key:value)형태로 ()를 꼭붙여 진행한다. scss의 중첩 중첩을 이용하면 상위선택자의 반복을 피할수있다. Ampersand(상위 선택자 참조) 중첩안에 & 키워드는 상위(부모)선택자를 참조하여 치환합니다. 예제실습 .btn{ width:1.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 38회차 미션 패스트캠프 프론트앤드 인강 38일차 css 전처리기의 종류와 scss를 작성하고 컴파일해보았다. css문법은 row한 원시적인 문법이다. 간단한 프로젝트일경우엔 매우편하지만 프로젝트의 규모가 커지면서 작업의 내용이 고도화되면 고도화될수록 css를 작성하는데 불편함이 굉장히많아진다. css의 이러한 단점을 보완한 개념으로 새로운 CSS preprocessor 전(예비)처리기인 sass(SCSS)와 less로 css가 동작하기전에 사용하는 기능으로 css의 확장개념이다. 웹에서는 표준 css에서만 동작할수있다. 그래서 쉬운문법, 고도화된 sass(SCSS)는 바로사용할수없고 컴파일하여 css로 다시전환시키면된다. Sass와 SCSS의 차이? 재사용가능한 기능을 만드는 방식인 mixin의 경우에도 지시어의 차.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션 패스트캠프 프론트앤드 인강 30일차 scss에서 styled-components를 활용해 버튼별 사이즈, outline, fullwidth를 만들어보았다. large, medium, small 버튼사이즈들을 만들어보자. props와 StyleButton태그안에 size를 추가한다. export default function StyledBtn({children, color, size, ...rest}){ return( {children} ); } StyledButton.defaultProps = { color:'blue', size:'medium' }; props.size에 따라 다른값을 주면된다. ${props => props.size === 'large' && css` height:3rem; font-.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 29회차 미션 패스트캠프 프론트앤드 인강 29일차 scss에서 styled-components를 활용해 버튼을 만들고 styled-components-polished스타일 유틸함수를 사용해보았다. [예제] styled-components로 재사용성 높은 버튼을 만들어보자.Button.js import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` /*공통스타일*/ display: inline-flex; outline: none; border: none; border-radius: 4px; color: #fff; font-weight: bold; cursor: pointer; padding-lef.. 이전 1 2 다음
