button3 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. 다양한 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. 이전 1 다음
