emotion

[css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector

export const GameInput = styled.input` transition: all 0.8s ease-in-out; &:focus { cursor: pointer; ${GameImg} { transform: scale(1.2); } ${GameTitle}::after { opacity: 1; } ${PlayBtn}::before { opacity: 0.6; } ${PlayBtn}::after { opacity: 0; } ${GameLike} { opacity: 1; } } `; styled.div 를 styled.input으로 바꾸면 focus 했을 때 다른 요소들에게 영향을 주지 못한다. 라벨라벨 이렇게 만들어서, export const Modal = styled.div` width: 3..

@media, 반응형 디자인(Responsive Design)

사이트는 크게 반응형 사이트, 적응형 사이트 두 가지로 나뉜다. 요즘 트렌드는 반응형이다. 배달의 민족, 오늘의집, 직방(정말 조아하시는. ), 코드캠프 등이 있다. 적응형 사이트의 대표적인 예는 네이버, 다음, 쿠팡, 페이스북, 옥션, 크몽 등이 있다. 화면에서 보여줘야할 내용이 너무 많으면 반응형으로 만드는 것도 힘들고 UX 좋지 않다. 무조건 반응형으로 만들어야 한다는 건 잘못된 생각이고, 들어가야 할 곳과 아닌 곳을 구분해서 디자인 한다. 웹을 기획하는 단계에서 반응형 기획과 디자인이 같이 들어가야 한다! 반응형 웹을 만들기 위해서는 화면 구간을 나눠줘야 한다. 보통 모바일 크기일 때, 태블릿 크기일 때, pc크기일 때로 나눈다. 이런 나뉘는 포인트를 breakPoint 라고 한다! 화면을 전환하..

ColorHighlight, emotion 폰트 추가

ColorHighlight, 색이 연할수록 구분하기도 어렵고 뽑기도 어려운데 없는 것보단 훨씬 편하다~!!! 그리고 텍스트 배경색으로 보여주는게 직관적이라 좋음 npm install --save @emotion/css styles.js 에 import하고, injectGlobal 안에 작성하니 폰트 적용됨!!!!!! 🍎 나중에 알려준다고 다른 거 먼저 하라고 하셨지만 폰트를 너무 적용시켜보고 싶었어욧,,, 🥳