7. clone 하면서 생소했던 css 정리1

1. flex: 1   1   0%

flex: flex-grow(flex item 확장 속성) flex-shrink(flex item 축소 속성) flex-basis(flex item 기본크기 결정 속성-기본값 auto)

확장, 축소 전부 속성이 1이기 때문에 flex comtainer의 크기에 따라서 flex item의 크기도 커지거나 작아진다는 의미.

 

2.  transition : color 0.125s ease-in 0s

css 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공.

속성 변경을 하면 바로 즉각 바뀌는데 transition으로 속성의 변화가 일정 기간에 걸쳐 일어날수 있도록 한다.

 transition: <property> <duration> <timing-function> <delay>

1. transition-property :  트랜지션을 적용해야 하는 css속성의 이름을 명시. 여기에 작성된 속성만 transition영향을 받게된다.

2. transition-duration : 트랜지션이 일어나는 지속 시간을 명시. 모든 속성에 같은 지속시간을 명시할 수 도 있고 각 속성 개별의 지속시간을 명시할 수 도 있다.

3. transition-timing-function : 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시.  Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택도 가능하다. (ease, linear, step-end, steps(4, end)

4. transition-delay : 속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의.

 

3. text-overflow: ellipsis

text가 overflow가 되는 부분을 화면에서 사용자에게 보여주는 방식을 설정

ellipsis는 overflow되는 부분을 ...으로 표시한다.

4. transform

해당 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.

position이 fixed거나 absolute인 요소의 컨테이닝 블록으로 작용한다.

 

1. translate : 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킨다.

2. rotate : 설정한 각도만큼 시계 방향 또는 반시계 방향으로 회전시킨다.

3. scale : 설정한 배율만큼 늘리거나 줄인다.

4. skewX : 설정한 각도만큼 x축 방향으로 기울인다.

5. skewy : 설정한 각도만큼 y축 방향으로 기울인다. skew:로 x y 동시에 설정가능.

6. matrix : transform 메소드를 한 줄에 설정

순서 : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

 

 

*참고

https://d2.naver.com/helloworld/8540176

https://developer.mozilla.org/ko/docs/Web/CSS

http://www.tcpschool.com/css/css3_transform_2Dtransform