transform 의 속성은 크게 2가지로 나눠진다. 1) 2D - 위치이동 : transform(가로, 세로) - 회전 : rotate(각도) - 크기 : scalc(숫자) - 비틀기 : skew(각도) 2) 3D - 3D 공간배치 : transform-style: preserve-3d; - 위치이동 : transform3D(가로, 세로, z축) - 회전 : rotateZ(z축) - 크기 : scaleZ(배수) 참조를 통해 예제 확인할 것. 참조 natsgun.tistory.com/14
animation = css style + @keyframes (애니메이션의 중간상태를 나타내는 것.) keyframes를 통해서 부드러운 렌더링 효과 구현이 가능하다. animation은 단축형과 속기형으로 사용할 수 있다. * 단축형 1) animation-name : animation의 중간상태를 지정하기 위한 이름 정의 keyframes의 이름 = animation의 이름 2) animation-duration : animation을 한 번 재생하는데 걸리는 시간을 설정. 3) animation-delay : animation 시작을 지연할 시간을 설정. 4) animation-direction : animation의 방향을 결정. 속성 예시) normal / alternate / reverse ..
[CSS3] Grid 란 ?
# 그리드의 기본적인 형태 정의 grid-template-columns grid-template-rows # repeat 함수 : 반복되는 값을 자동으로 처리할 수 있는 함수 repeat(반복횟수, 반복값) ex. repeat(3, 1fr) = 1fr 1fr 1fr # minmax 함수 : 최솟값, 최댓값을 지정할 수 있는 함수 ex. minmax(100px, auto) ➝ 최소한 100px, 최대는 자동으로 늘어나게 처리한다. 즉, 아무리 컨텐츠의 양이 적어도 최소한 100px의 값을 확보하며 컨텐츠 양이 넘쳐 100px을 넘어가면 알아서 영역이 늘어나게 된다. # auto-fill, auto-fit : column의 갯수를 미리 정하지않고 설정된 너비가 허용하는 한 최대한 셀을 채운다. * 차이점 :..
[CSS3] Flex (Flexible Box)에 대하여
이전 근무지에서 ie9까지 맞춰야하기 때문에 이제껏 써보지 못한 (ㅠ.ㅠ) CSS3의 Flex에 대하여 내가 이해하기 쉽도록 정리해보자! 먼저 큰 틀에서는 부모/자식으로 나누어본다. 부모 : .container => flex container 자식 : .item => flex item 부모속성 flex-direction : 배치 방향 설정 flex-wrap : 줄바꿈 처리 설정 flex-flow : flex-direction + flex-wrap justify-centent : 가로축 방향 정렬 align-items : 세로축 방향 정렬 (전체 아이템에 대하여) align-content : 여러 행 정렬 1) flex-direction : 배치 방향 설정 .container{ flex-direction:..