scss6 outline과 full width 버튼 오늘 만들 버튼은 아래와 같다. 기존에 우리가 작성했던 Button.js와 Button.scss 그리고 App.js 파일을 vscode에서 열어준다. 오늘 작성할 내용에 이전에 작업했던 코드와 크게 다르지는 않다. classNames() 함수의 파라미터에 다음과 같이 {outline, fullwidth}를 추가해준다. 기존에 방식과 달리 { }를 사용한 이유는 outline과 fullwidth로 받아올 값이 Boolean값이기 때문이다. 우리는 이 Boolean값을 이용하여 버튼의 윤곽과 폭을 설정하도록 하겠다. Button.js 파일에 아래와 같이 작성해주면 된다. import React from 'react'; import classNames from 'classnames'; import './But.. 2020. 3. 27. 다양한 색상의 버튼 오늘도 어김없이 본격적인 작업 이전에 괜찮은 사이트를 하나 추천하려한다. 컬러와 과련된 사이트이다. 바로 open color라는 사이트이다. 밝기별로 색깔들을 나열해 보여준다. https://yeun.github.io/open-color/ Open Color Color scheme for UI design yeun.github.io 우리가 오늘 최종적으로 만들 버튼의 이미지는 아래와 같다. 자! 그럼 본격적으로 코딩을 시작해보자. 일단 예전에 작업했던 Button.js와 Button.scss에서 추가로 작성을 해주면 된다. $blue: #228be6;// 주석; $gray: #495057; $pink: #f06595; .Button{ display: inline-flex; color: white; fon.. 2020. 3. 27. 다양한 Button 만들기 저번 시간에는 파란색 버튼 1가지를 만들어보았다. 오늘은 더 나아가 다양한 색과 크기의 버튼을 만들어볼까한다. 본격적으로 코딩을 하기 이전에 새롭게 라이브러리를 설치해야한다. 기존의 작업을 좀 더 수월히 하기 위해서이다. 터미널을 열고 다음과 같이 입력을 해주면 된다. >yarn add classnames 이 라이브러리는 다양한 옵션으로 class의 이름을 조합하여 사용할 수 있도록 도와준다. 다음 그림을 보면 좀 더 이해하기 쉬우리라 본다. classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames({ 'foo-bar': true }); // => 'foo-bar' classNa.. 2020. 3. 25. Button 컴포넌트 꾸며보기 오늘 우리가 만들어 볼 버튼은 아래와 같다. 어떻게 하면 아래와 같은 버튼을 만들 수 있을까? src 폴더 안에 Button.js와 Button.scss 파일을 추가해준다. Button.js 파일에는 아래와 같이 작업을 해준다. import React from 'react'; import './Button.scss'; function Button({children}){ return( {children}); } export default Button; Button.scss에는 아래와 같이 작업을 해준다. $blue: #228be6;// scss에서 변수를 정의할 경우 $를 사용한다 .Button{ display: inline-flex; color: white; font-weight: bold; outlin.. 2020. 3. 25. SASS 이용을 위한 환경설정 vscode를 실행한 다음 터미널을 아래와 같이 열어 준다. 필자는 터미널에서 명령어를 입력하여 react-tutorial이라는 폴더를 생성하도록 하겠다. 아래와 같이 입력하면 된다. >mkdir react-tutorial 그 다음에는 react-tutorial 폴더로 이동하여 react의 기본적인 라이브러리를 설치한다. >cd react-tutorial >npx create-react-app styling-with-sass 우리가 실습할 폴더의 이름은 stylinh-with-sass이며 이 폴더를 열어 작업영역으로 불러오면 아래와 같이 실행된다. 여기서 우리는 한 가지를 더 설치해야한다. node-sass 라는 이름의 라이브러리이다. 이 라이브러리를 설치해야 우리의 프로젝트에서 스타일링을 멋지게 할 수.. 2020. 3. 24. SASS 1. SASS란 무엇인가? syntactically awesome stylesheets의 약자로 웹 디자인을 하기 위한 언어로 사용된다. CSS의 가독성과 유지보수를 편리하게 다룰 수 있다는 장점을 가지고 있다. SASS에 대해 자세히 알고자 한다면 아래의 주소를 방문하는 것을 추천하다. https://sass-guidelin.es/ko/ Sass Guidelines — Korean translation 분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드. sass-guidelin.es 2. 확장자 SASS를 이용할 경우에 2가지의 확장자를 사용할 수 있다. 첫 번째는. sass/이다. 처음에 SASS가 등장하였을 때, 주로 사용하였다. 다음 SASS의 예시 코드이다. nav ul .. 2020. 3. 24. 이전 1 다음
