초보개발자 개발일지

112일차(1)/CSS(11) : 3차원 컨텐츠 만들기(4) - 3d공간을 정의하고, 그 안에 들어 있는 div들을 큐브 형태로 배치함 - 특정 UI를 페이지 로딩 시점에 3차원 transform을 이용해서 3차원적으로 배치해둔 다음, 특정 시점에 부모 요소를 3차원 transform 시키면 배치시켜둔 대로 움직인다. - 마우스를 올렸을 때(특정 시점) 부모 div가 통째로 움직이도록 할 수 있다. - 부모 div에 마우스 hover되었을 때 애니메이션이 적용되도록 한 상태! - 원래는 겹쳐져 있었는데, 200px만큼 z축 방향으로 밀어버린 것이다. - 2번째 div도 90도를 돌리고 200px 을 밀어버린 상태. - 이렇게 겹쳐있던 div를 회전, 평행 이동시켜 정육면체 모양을 만들 수 있다. - 처음..

111일차(1)/CSS(10) : 3차원 컨텐츠 만들기(3) - 3d transform을 하려면 먼저 3차원 공간을 정의해야 한다. - 그러고 나서 이 안에서 3차원 transform을 만든다. - perspective (물체와 관찰자와의 거리), perspective-origin (관찰자의 위치 설정) 설정을 한다. - 어떤 물건을 어디에서 바라보느냐에 따라 관점은 달라질 수 있다. - 이 3차원 공간 안에서 3d transform을 하겠다고 선언하면 된다. - 선언하는 방법은 transform-style 과 transform-origin 을 설정하면 된다. - 이 파란 박스가 3차원 공간이다. 이 안에서 어떤 아이템을 3차원 transform하겠다! - 지정한 개체를 rotateX(45deg) 한 상..

110일차(1)/CSS(9) : 3차원 컨텐츠 만들기(2) - Transform : 개체를 변화시키는 것 (회전, 크기 조절, 비틀기 등...) - Transition : 변화시킬 때 중간 변환과정을 보여주는 것 (애니메이션) - border 속성을 경계선의 굵기(px), 스타일(실선), 색상 지정 등을 따로따로 쓸 수 있는 것처럼, linear도 하나하나씩 따로 작성할 수 있다. - property : 트랜지션을 적용할 수 있는 모든 요소에다가 적용하라는 뜻! - duration : 변환 과정을 얼마 동안 보여줄 것인가(초 단위) - timing function : 변환할 때 중간 과정을 보여주기(보여주는 방식) - ease-in-out : 처음에도 천천히 나중에도 천천히 움직이며 변화함 - 웹에서 숨..