CSS3 (Project) SideProject ClonePaging (HTML&CSS, JS) 수강 중 Nodejs라는 걸 배우기 전에 여태 까지 배웠던 HTML&CSS, Javscript를 이용해서 ClonePaging 하는 개인 프로젝트를 맞이하게 되었다!!! 저 3가지의 스택들을 배우는 중간중간에 ClonePaging 하고 싶은 것을 찾아 하는 시간이 있긴 했다 다만, 제대로 하지도 않고 설렁설렁해서 아쉬웠는데 잘되었다는 생각을 했었다 어렸을 때 부터 좋아했었던 MondayKiz 소속사를 ClonePaging 하기로 마음을 먹었다 개인 프로젝트의 기간은 1주일! (22.10.06 ~ 22.10.12) 우리 기수 전인원들이 프로젝트 시작전 본인들의 희망 페이지를 찾고 승인받기 위해 한 명씩 한 명씩 담당 교수와 이야기를 나눴다 그러곤 교수는 내 차례 때 이렇게 말을 했다 너는 이거 전체 페이지.. 2023. 3. 1. (CSS) animation animation 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줄 수 있다 CSS에서 애니메이션 속성으로 동적인 효과를 줄 수 있다 애니메이션의 상태를 나타내는 키프레임들로 구성 @keyframes @keyframes name { 0% {...} n% {...} 100% {...} } → name: 애니메이션 이름 설정 0% : 시작할 때의 모양을 설정. from으로 사용해도 가능 n% : n% 일 때의 모양을 설정 100% : 끝날 때의 모양을 설정. to로 사용해도 가능 트랜지션 효과 보다 훨씬 더 규모가 크고 복잡하지만 다양한 효과를 적용해서 좀 더 정밀하고 원하는 CSS효과를 줄 수 있다 JS를 모르더라도 간단하게 애니메이션을 구상할 수 있다 JS를 이용한 애니메이션이 .. 2023. 1. 11. (CSS) position position HTML 상에서 요소들이 배치되는 방식을 결정하는 CSS 명령어 설정 종류 static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다 absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있다. 이전 영역과 같은 위치를 기준으로 한다. 부모의 좌측 상단(top, left)을 기준으로 절대적인 위치를 설정. 단, 부모의 position이 설정이 되어 있어야 기준을 잡고 영역의 위치를 잡을 수 있다. 없으면 부모의 부모 영역까지 position 기준을 확인한다 relative : 원래 있던 위치를 기준으로 좌표를 지정. 이전 영역의 위치를 기준으로 한다. 해당 설정이 된 요소가 첫 번째 자식이라면 부모의 상단에 기준을 잡고, 그 외라면 이전 .. 2023. 1. 11. 이전 1 다음
