전체 글

제작하게 된 계기

평소 인터렉티브 기법을 곁들인 이벤트 기술에 대한 관심이 많았다 프론트엔드 작업에서도 꽤 많이 쓰인다고 하기에 공부해볼 필요가 있다고 생각했다 스크롤 인터렉션이 멋지게 구성된 사이트를 찾던 중 애플 에어팟 사이트를 찾게 되었다 처음엔 엄청 멋진 사이트다..라고 생각했지만 정신을 차리고 나니 내가 이걸 어떻게 만들지..이런 생각도 들었다 그래도 마음에 든 사이트인 만큼 최대한 비슷하게라도 구현을 목표로 해보자!! 이번 프로젝트에서는 완성도를 목표를 하는게 아닌 스크롤 이벤트에 대한 이해도와 자바스크립트 문법 공부가 우선순위가 돼야 한다고 생각한다 스크롤할 때 영상이 실시간으로 바뀌는데 찾아보니 영상을 이미지로 아주 많게 쪼개서 프레임으로 사용하는 듯하다 랜더링 문제도 고려해야 하지만 일단 만들고 생각해 봐..

Styled-Components Dialog 만들기

Dialog란 화면을 가리면서 어떤 작업을 선택할지 나오게 되는 컴포넌트 박스입니다 Components 폴더에 Dialog.js 생성 기존에 만든 버튼을 활용할 예정이기에 버튼도 같이 불러옵니다 import React from "react"; import styled from "styled-components"; import Button from "./Button"; function Dialog() { return ; } export default Dialog; 어두운 배경 설정 const DarkBackground = styled.div` position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: cen..

Styled-Components 버튼 스타일 추가 설정

Button.js에서 outline props를 생성합니다 function Button({ children, color, size, outline, ...rest }) { return ( {children} ); } outline은 true or false Boolean값으로 정해지기 때문에 defaultProps 설정을 전달하지 않는다면 undefined가 되면서 false와 똑같이 간주하게 됩니다 색상 쪽에서 지정하겠습니다 ${(props) => props.outline && css` color: ${selected}; background: none; border: 1px solid ${selected}; &:hover { background: ${selected}; color: white; } `}..

Styled-Components 각각의 버튼 사이즈 조정 하는 방법

Button.js에서 size props를 생성합니다 function Button({ children, color, size, ...rest }) { return ( {children} ); } //Button 기본값 설정 Button.defaultProps = { color: "blue", size: "medium", }; 사이즈 props에 따라 각기 다른 값을 주겠습니다 props.size가 large라면 css에 어떤값을 줄 것이냐 라는 의미입니다 ${(props) => props.size === "large" && css` height: 3rem; font-size: 1.25rem; `} 2번 복사해서 large, medium, small을 만들고 값을 지정하겠습니다 /* 크기 */ ${(pro..

Styled-Components Polished 라이브러리

✨ polished | A lightweight toolset for writing styles in JavaScript A lightweight toolset for writing styles in JavaScript. polished.js.org Polished 라이브러리는 다양한 스타일 유틸 함수를 적용할 수 있습니다 사용할 함수를 가져와서 import하면 적용됩니다 Polished 라이브러리 설치 $ npm install --save polished Button.js에 사용할 import 해줍니다 import { darken, lighten } from 'polished'; hover에서 사용해봅시다 /* 색상 */ background: #228be6; &:hover { background: ${..

Styled-Components로 버튼 만들기

src 폴더에 components 폴더를 생성하고 BUtton.js 파일을 생성합니다 Styled-Components를 불러옵니다 import styled from "styled-components"; 버튼 컴포넌트 생성 const StyledButton = styled.button``; 먼저 공통적으로 해야할 사이즈를 조절합니다 const StyledButton = styled.button` /* 공통 스타일 */ display: flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; justify-..

Styled-Components 사용방법

새 리액트 프로젝트를 생성합니다 Styled-Components를 설치합니다 $ npm install styled-components 사용하지 않는 코드는 날리고 이 상태에서 시작하겠습니다 import React from "react"; function App() { return ; } export default App; styled-components 를 사용할 땐 import를 통해 불러옵니다 import styled from "styled-components"; 컴포넌트 이름을 생성합니다 const Circle = styled.div``; 스타일을 지정합니다 const Circle = styled.div` width: 5rem; height: 5rem; background: black; border..

Styled-Components 소개

Styled-Components란 React에서 다루는 CSS in JS 라이브러리 중 가장 인기있는 라이브러리입니다 CSS in JS의 의미는 JS 안에 CSS를 작성하는 것입니다 하지만 Styled-Components 외에도 emotion, styed-jsx, jss 등 인기 있는 라이브러리도 많습니다 Styled-Components를 사용하면 파일 안에서 CSS와 JS를 한번에 바로 만들어내서 실행시킬 수 있습니다 이런식으로 작성합니다 const Button = styled.div` width: 5rem; height: 5rem; background: black; border: 1px solid black; border-radius: 1rem; `; function App() { return ; }..