syleemomo의 IT 블로그 syleemomo의 IT 블로그

* 연습과제 1 import './App.css'; import React from 'react' import styled, { css } from 'styled-components' const Button = styled.button` all: unset; color: white; cursor: pointer; border-radius: 5px; font-weight: bold; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; &:hover{ opacity: 0.7; } /* 버튼의 크기 설정 */ ${props => { const size = props.size || 'medium' switch..

* Styled Components 의 개념 Tagged Template Literal 을 이용하여 자바스크립트 파일 안에서 컴포넌트 스타일링을 한다. * styled-components 모듈 설치하기 npm install styled-components 위의 명령어를 실행하여 모듈을 설치하자! * Tagged Template Literal 의 개념 Tagged Template Literal 은 Template Literal 과 유사하다. Template Literal 은 문자열 안에서 달러와 중괄호를 사용하여 아래와 같이 자바스크립트 표현식을 삽입할 수 있다. import './App.css'; import React, { Component } from 'react' function App() { co..

* 연습과제 1 import React from 'react' import './Button.scss' function Button({ children, size, color, width, handleClick, disabled }){ return {children} } export default Button; Button.defaultProps = { size: 'medium', color: 'tomato', disabled: false } @use "sass:list"; $colors: blue, tomato, grey; $hover-colors: skyblue, lightsalmon, lightgray; $sizes: large, medium, small; $default-height: 50px; ..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com npm 설치없이 sass 파일을 컴파일하려면 비주얼 스튜디오 편집기에서 위의 확장프로그램을 설치하면 된다. index.html 파일을 위와 같이 작성한다. 그리고 style.scss 파일을 생성하고 링크를 걸어준다. 이때 주의할점은 html 문서에서 링크를 연결할때는 style.css 로 작성하는 것이다. 그런 다음 비주얼 편집기 우측 하단의 Watch Sass 버튼을 클릭하면 style..

* 연습과제 1 import Button from './Button' import './Nav.css' function Nav(){ const navigate = (url) => { window.location.href = url } return ( navigate("https://google.com")}>구글 navigate("https://naver.com")}>네이버 ) } export default Nav .nav-container{ display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 70px; box-shadow: 0 4px 10px 2px grey; position: fixed; z-index: ..

* 컴포넌트 스타일링하는 몇가지 방법 기본적으로 CSS 를 사용하여 스타일링한다. 그 밖에 SASS 와 Styled Component 가 있다. SASS 는 CSS 를 마치 프로그래밍적으로 생각하여 중복되는 CSS 코드를 변수나 함수로 만들어 사용가능하다. Styled Component 는 Tagged Template literal 을 사용하여 자바스크립트로 스타일링한다. 컴포넌트 스타일링을 할때 어떤 도구를 사용할지를 결정하는건 개발자의 선호에 달려있다. 그보다 중요한건 어떤 도구를 사용하든 컴포넌트를 만들고 스타일링할 수 있는지다. 그래서 일단은 기본적인 CSS 를 사용하여 스타일링하는 연습을 하는 것이 우선이다. * 컴포넌트 스타일링시 참고할 문서 https://mui.com/material-ui/..