꿈꾸는 개발자의 블로그

그동안 각각의 CSS 파일을 밖에 두고 스타일링 했었는데, 하나의 컴포넌트 내에서 이용가능한 styld-components를 사용해보았다. 불필요한 CSS가 import 되지 않도록 만들어주기 때문에 좋다! styled-components 설치 yarn add styled-components styled-components를 이용한 구현 import styled from 'styled-components'; export const Test = () => { render ( 버튼 ); } const Wrapper = styled.div` width: 100%; height: 100vh; `; const Button = styled.button` background-color: gray; border-rad..

next.js에서 이미지를 불러오기 위해서는 대신에 모듈을 쓰는 것이 좋다! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 화살표 움직임에는 애니메이션 속성을 통해 다양하게 표현할 수 있다. animation 속성 속성 의미 animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 animation-duration 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 animation-timing-function - linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) 애니메이션 진행 속도, 또는 가속 방식을 지정 ..

저번 주에 기획을 마무리하고, 본격적으로 개발에 들어갔다. 아직 백엔드 코드가 완료되지 않았기 때문에, 프론트엔드에서는 모든 화면의 레이아웃부터 잡기로 했다. 내가 좋아하는 CSS~!! 레이아웃 잡는건 재밌다 ㅋㅋㅋ 그래서 이번 주는 각자 맡은 페이지 별로 레이아웃을 잡고, 간단한 기능을 추가하는 것으로 마무리하였다. 그 중 메인에 동영상을 자동재생하여 보여주기로 했는데, 꽉 찬 화면이 깔끔하고 아주 맘에 든다~! 내가 완료한 기능 인트로 페이지 : 레이아웃 구현, 동영상 적용 우리동네 대형폐기물 페이지 : 레이아웃 구현, kakao map api 적용 앞으로 남은 구현 목록 로그인, 회원가입, 퀴즈 페이지 레이아웃 구현 Api 연결하여 데이터 적용 결과 화면

선택자(Selector) 종류 가장 기본이 되는 선택자만 정리해보았다. 이 외에도 속성 선택자, 가상 선택자 등이 있다. 선택자 종류 표현 예시 전체 선택자 * { } * { width: 100px; } Tag 선택자 tag { } div { width: 100px; } Class 선택자 .class { } .box { width: 100px; } ID 선택자 #id { } #name { width: 100px; } 복합 선택자 하위 (공백) div p { width: 100px; } 자식 > (꺽쇠) div > p { width: 100px; } 인접 형제 + (더하기) div + p { width: 100px; } 일반 형제 ~ (물결) div ~ p { width: 100px; } 복합 선택자 사용..

프로젝트 개발 중에 이것 저것 모듈을 설치하다가보니, 아래 모습처럼 package.json 파일에 dependencies, devDependencies로 나뉘어 추가되는 것을 보게 되었다. 모듈을 설치할 때 아래와 같이 목적에 따라 다르게 추가할 수 있다. $ yarn add $ yarn add --dev// devDependencies에 추가 https://adjh54.tistory.com/38#1)%20%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%20%EC%9D%98%EC%A1%B4%EC%84%B1%20%EA%B4%80%EB%A6%AC%C2%A0-1 dependencies는 실제 상용화시 사용할 패키지를 담고 있고, devDependencies는 개발 시 필요한 ..