css문법 (transform~flex초반)

transform = 요소의 변형, 변환을 주는 효과 , 속성은 1개 

• 속성하나로 여러가지 함수를 지정, 2D와 3D(평면과 삼차원)을 표현할 수 있다. 
• transform:rorate(20deg) translate(10px,0) skew scale의 함수로 입력이 가능하다. 
• transform: 원근법  이동 크기 회전 기울임;

transform = 2D 변환 함수

• translate : 이동을 변환하는 함수 (x축, y축)입력, 수치는 px단위로 입력가능함. 
• translateX( x축 ) translateY(y축)
• scale : 확대, 축소, 크기를 변환하는 함수 , 단위는 없이 배수로 지정함. (1,1) 변화x, (1.5, 1.5); 05배효과
• scaleX(x축)  scaleY(y축)
• rotate : 회전 ,degree 인수를 각도로 입력함.
• skew : 기울기, 비틀기 (x-deg, y-deg)
• matrix(n,n,n,n,n,n) : n이 6개 :전체적으로 이용가능 , 2차원 변환효과를 한번에 제어할 수 있는 함수
• position:relative;의 경우 배치를 하고 끝! 할 때 사용하는 함수로 애니메이션에 특화가 되어있다. translate의 경우 배치후에 효과를 주기 때문에 애니메이션에 최적화가 되어 있다. transform:translate(30px, 30px);
• transform :  translate(20px, 10px) skewX(20deg,0); 띄어쓰기를 이용하여 속성을 여러개 사용 할 수 있음.

3D함수

• translate3d :  (x축,y축,z축) =이동
• translateZ(z) 우리눈에 어디로 이동했는지 보이지않기 때문에 이동하는 것이 잘 안보임 
• scale3d :  (x축,y축,z축) = 크기 
• scaleZ(z)
• rotate3d : (x,y,z,a(각도))  = 회전
• rotateX(x), rotateY(y),rotateZ(z)
• perspective(n) : 원근법(거리) : 항상 가장 앞에 존재 해야함, 수치가 높으면 멀리서 봄, 가까우면 가까이서 봄
• matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) n:16개  :3차원의 변환 효과

transform = 변환속성

• transform-origin : 요소의 변환의 기준점 : 기준점을 두고 회전가능
• transform-style : 3D 변환요소의 자식요소들도 3D변환을 사용하도록 할지 설정
• perspective(속성) : 하위요소를 관찰하는 원근거리의 설정
• perspective-origin : 원근 거리의 기준점을 설정
• backface-visibility :  3D변환으로 회전한 요소의 뒷면의 숨김을 설정(180deg)
•  

  

  3d 45도로 표현한 x,y,z축

transform-origin = 요소 변환의 기준점을 설정

• x축 : left, right, center, % , 단위
• y축 : top, bottom, center, %, 단위 : 윈도우에서는 y축은 아래로 되어있음 양수-아래형태
• z축 : 단위

transform-style =3d변환요소를 자식요소도 함께 3d변환을 줄 것 인가 

• 기본값 : flat 자식요소의 3d변환사용을 하지 않겠다. 
• preserve-3d: 사용하겠다. 자손에게 전달하려는 모든 부모에게 작성을 진행해야함
•  

  

  보시면 부모요소들은 모두 transform-style가 preserve-3d가 명시 되어있다. 

perspective 속성 = 하위요소를 관찰하는 원근거리 (px사용)적정량이 필요하다. 

• perspective의 하위를 perspective가 관찰한다. 그렇기 때문에 관찰하고자 하는 상위에 class를 넣어 모두 emmet를 해줘야한다. 
• 속성 :  관찰대상의 부모요소로써 모든 것을 관찰할 수 있다.
• 함수 : transform:perspective() = 1개의 함수이기 때문에 관찰대상에 직접 적용하며, 1개만 확인이 가능하다.

perspective-origin = 원근거리의 기준점을 설정한다. 

• x축 : left , right , %, 단위, center  :기준점 50%정중앙
• y축:  top, bottom, % , 단위, center :기준점 50%정중앙
• 눈을 어디에 두고 원근효과를 볼 것 인가에 대한 이야기이다.

backface-visibility=3d 변환으로 회전된 요소의 뒷면을 숨길 것 을 설정

• visible : 기본값, 숨기지않음
• hidden : 숨김

• 

  0일때 나오지 않고 180도 일 때 나오는 img

  matrix 
• 2차원의 효과 = 개별적으로 속성을 입력하더라도 브라우저에서는 matrix 함수로 계산한다. 
• 2d함수 : matrix (n=6)  3d함수 : matrix3d (n=16) 직관적인 것을 입력시에 사용됨

• 

• 1.매트리스 형태 2.scale(x,y) 3.translate (x,y) 3.skew(x각도,y각도) 4. rotate(각도)의 형태 
• matrix(scale(1) transiate(10px,20px) skew(45deg,-20deg) skew은 tan45,tan-20의 값이 매트릭스 내부에 들어간다. 

animation = 요소에 애니메이션을 제어하는 단축키 이다. @keyframes 를 선언하고, 그부분을 제어한다. 

• animation: 이름 지속시간 [타이밍 함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]
• @keyframes 정의한 이름 == animation 의 이름
• ex) animation: hello 25 linear(일정하게) infinite (무한) both; 
• ex) @keyframes hello{ 0%{ width:200px; } 100%{width:500px;}}

@keyframes = 2개이상의 animation의 중간상태를 지정(frame을 지정함)

• @keyframes 이름{ 1프레임(%) {속성:값;} 2프레임(%) {속성:값;} 3프레임(%) {속성:값;}} width만을 입력할 수 있는 것이 아닌 background 또한 입력가능 함, 

animation-name = 프레임의 이름을 연결 

• none : 기본값 , @keyframes : 지정

animation-timing-function = transition과 동일

animation-duration= 지속시간 

animation-delay= 대기시간의 설정, 음수도 허용 

• duration 이 3s고 delay가 -1s일 경우 1만큼을 생략후 2s 부터 움직인다.
• duration이 먼저 나오고, delay가 이후에 나오고 나머지는 순서가 뒤바뀌어도 상관없다. 

justify-content : 수평정렬    align-item:수직정렬

animation-count = 애니메이션의 반복횟수를 설정 

• 숫자 : 1이 기본값 , 반복횟수를 설정할 수 있음
• infinite : 무한 반복

animation-direction =반복방향

• normal : 정방향 = 기본값
• reverse : 역방향
• alternate : 정방향에서 역방향반복 (왕복) 
• alternate-reverse : 역방향에서 정방향반복 (왕복)
• 왕복의 경우 무한반복때 확인하기 어려움, 그렇기 때문에 숫자로 입력을 하는데, 1회를 할 경우 단일성에 멈추기 때문에 2회로 입력을 해야함, 횟수를 1회를 추가하면 된다. 

animation-fill-mode = 전후상태의 위치를 설정

• none : 기본값 : 기존위치  -> 시작->동작->기존위치에서 끝
• forward : 기존위치->시작->동작->애니메이션 동작끝에서 멈춤
• backward : 애니메이션 시작위치->시작->동작->기존위치에서 끝
• both: 애니메이션 시작위치->시작->동작->애니메이션 동작끝에서 멈춤 = forward와 backward를 합친 모습

animation-play-state = 애니메이션의 재생과 정지를 설정

• running  : 기본 값
• paused : 정지 text움직일때 멈추게 변경할 수 있음
• box:hover{ animation-play-state : paused } 작성후 box::hover::before {content:"paused";}처럼 가상요소를 이용하여 마우스를 올리면 글자가 바뀌도록 입력을 할 수 있음

MULTI-COLUMNS = 일반 레이아웃을 확장하여 여러 텍스트를 가독성 확보를 위하여 다단으로 쉽게 정리 (신문기사처럼)

• columns : 다단을 정의 하는 단축키  auto가 기본값으로 브라우저가 단의 너비와 개수를 설정
• column-count : 단의 갯수를 설정
• column-width : 최적의 너비를 설정 단위 :auto :요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우, 단의 개수가 조정 됨
• column-gap : 단과 단사이 간격을 설정 
• column-rule :  단과 단사이를 지정하는 단축키
• column-rule-width : 단의 두께
• column-rule-style :  단의 종류
• column-rule-color : 단의 요소의 글자 색 -> column의 경우 글자색에 영향을 받기 때문에 단의 선을 지정하고 싶다면 개별적으로 지정해야한다. 
• column-rule-gap : 단과 단사이의 중간의 구분선 

css flex 문법의 설명(flexible box) = 수평, 수직 정렬

• flex는 css3으로 업데이트 이후 생긴 수평, 수직 정렬을 만드는 속성이다. 
• 이전에는 display : inline 은 수평으로 만들고 싶어도 가로세로 수평이 없기 때문에 inline-block값으로 변경하였으나 기본base는 inline요소로 띄어쓰기로 칸이 벌어지고 , item들이 글자화가 되는 현상이 생겼다. 이후 대체제로 clearfix 로 이용하였으나 이 또한 전문적인 용어가 아니기 때문에 flex를 이용하게 되었다. flex는 container라는 부모요소를 이용하여 items화 시켰다. 
• flex-container : 블록으로 특성 
• inline-flex : 인라인으로 특성