PROJ-FOODLY-DAY4 : 인풋 아웃라인, SCSS공유, transform & transition

eunji hwang·2020년 2월 27일

CSS JavaScript React animation front end input outline scss transform transition

FOODLY : 클론코딩 과정

목록 보기

4/7

프로젝트 4일차

인풋 아웃라인 제거

input:focus { outline : none; }

인풋창을 만들고 내용을 입력하려 커서로 클릭을 하면 파란 줄이 인풋창을 감싸게 된다. 이것을 outline 설정으로 제어할 수 있다. 해당선택자를 통해 인풋창에 아웃라인 속성을 none으로 설정했다.
매번 하는 설정인데 왜 매번 잊어버리는지.. 적어두고 계속 꺼내봐야지!ㅋ

리액트 컴포넌트 간 SCSS공유

작업을 하다 분명 완료된 컴포넌트였는데, 묘하게 CSS가 어색하게 변해버린 컴포넌트를 발견했다. 개발자 모드로 확인해보니 ()선택자에 line-height가 지정되어 있었다. reset.scss에는 지정하지 않은 속성인데 추가로 작성되었다. 혹시나 팀원에게 물어보니 ()선택자를 사용한 분이 계셨다.
리액트에서는 컴포넌트를 공유해 쓰기 때문에 해당 컴포넌트에서 태그선택자, (*)선택자를 통해 스타일을 적용했을때 모두에게 적용되어 버린다. 리액트에서 css적용할때는 항상 class선택자를 사용해야 하며, scss를 사용하여 작성한다면 최상위에 className(리액트에서)선택자를 시작으로 태그 선택자를 사용하자.

*, 태그 선택자는 단독사용 금지
SCSS를 사용할때는 class 선택자를 부모로 두고 태그 선택자 사용가능

transition

트랜지션 ? 트랜지션은 CSS속성 변화값을 찾아 지정시간에 맞춰 변화를 준다.
사용자 이벤트에 따라 className(clss선택자)를 변경하면 해당 요소의 이전 CSS속성중 transform & transition 옵션에 따라 애니메이션 되어 보인다.

property

transition-delay : 지연시간 기입 (ms, s 단위 가능)
transition-duration : 움직임줄 시간 (ms, s 단위 가능)
transition-property : 감시할 속성 지정

예를 들어

.block-scale {
  transform: scaleY(1);
  transform-origin: top;
  height: 75px;
  transition-property: transform;
  transition: 1s ease-in-out;
  display: block;
  transition-property: height;
  transition-delay: 1s;
  transition: 1s ease-in-out;
}
.none-scale {
  transform: scaleY(0);
  transform-origin: top;
  height: 0px;
  transition-property: transform;
  transition: 1s ease-in-out;
  display: block;
  transition-property: height;
  transition-delay: 1s;
  transition: 1s ease-in-out;
}

위 CSS 속성에 따라 아래 컴포넌트에 적용된다.

<div className={this.state.boolean? '.block-scale':'none-scale'}>
  이 박스는 this.state.boolean에 따라 점점 커지며 보였다가 점점 작아 사라질꺼야
</div>

위 코드에서 보이는 div는 this.state.boolean이 참일때 보여질것이고, 거짓일때 점점 사라질 것이다.
두개의 css 속성들 중에 transition-property옵션으로 지정하여 변화를 감시하라 지정할 수 있고.
transition: all 1s ease-in-out 속성을 통해 한방에 all로 지정하여 감시 할 수 있다.
이벤트에 따라 변화될 때는 transition을 사용하여 애니메이션을 주며, 이벤트상관없이 움직임을 주고 싶다면 keyframe & animation 속성을 활용하자.

transform

트랜스폼은 CSS선택자가 지정된 요소의 크기, 중심점, 회전, 찌부시키기 등이 가능한 옵션이다. 포토샵이나 일러스트에서 쓰던 transform을 생각하면 이해가 빠르다. transform과 transition을 활용하면 애니메이션 적용할때 아주 편하다~

속성 & 값

transform-origin : 요소의 중심점을 정한다. top, bottom, left, right, center 사용이 가능하며 %, px 등 가능
translate(x,y) : ()에는 인자로 X기준 이동할 거리, Y기준 이동할 거리
translateX(), translateY(), translateZ()
skew(x,y),skewX(), skewY() : 해당 각도로 비틀기. x,y 중 하나의 속성만 넣어도 됨
rotate, rotateY(), rotateX()
perspective : 원근감

프로젝트 4일차 느낀점!

벌써 4일이나 갔는대 제대로 완료된 기능이 없다. 쉬울거라 생각했던 회원가입 컴포넌트에서 하루종일 시간을 보냈다. 문제는 1차컴포 > 2차컴포 > 3차컴포까지 프롭스를 전달! 프롭스가 조건에 맞을때 화면에 3차 컴포넌트를 출력할것! 저녁시간 이후 계속 된 고민은 집에 오는 지하철 안에서 해결했다.

뭐가 문제야 ?

컴포넌트간 Props 전달에 심취한 나머지 너무 깊게 전달하려 했다. 1차 컴포에서 2차 컴포로 props를 넘기고, 그 props를 활용해 2차컴포에서 3차 컴포의 display 유무를 출력하면 되는 간단한 문제였다. 3차 컴포넌트로 props를 전달할 필요도 없었다.

문제는 너무 어렵게 코드를 작성해야 한다고 생각해서다. 단순하게 생각하면 되는 문제를 너무 깊게 파고들어 오류를 범한다...😂
조금더 단순하게, 쉽게 생각하는 연습을 하자! 내 코드 너무 어렵다.. 재활용도 안되는 코드를 짜고있다..
어찌되었든 지하철에서 집에 도착할때까지 당장 가방속 노트북을 꺼내 코드를 수정하고 싶었다! 이게 바로 코딩의 재미잉가! 너무 재미난것!!!