클라이언트/ 서버/ 엔지니어 "게임 개발자"를 향한 매일의 공부일지

애니메이션 구현 실습을 이어서 진행해보겠다.   실습 5 - 메뉴 영역 애니메이션 구현하기   html 파일    css 파일 코드가 정말 길다.   처음 실행 화면은 이렇게 되어 있는데 여기서 메뉴에 마우스를 올리면 폰트 색깔이 변경되도록 코드를 수정할 것이다.   코드 수정하기  마우스를 올렸을 때 메뉴의 글씨 색깔이 검은색에서 약간 붉은 계열로 변경되었다.    auto를 지우면 왼쪽으로 마진이 없도록 지정된다.   채점도 잘 되었다.    실습 6 - 본문 영역 애니메이션 구현하기    이번에는 마우스를 올렸을 때 배경색과 이미지의 크기가 달라지는 효과를 적용해볼 것이다. 제공된 코드는 이전과 같으니 따로 캡쳐하지는 않았다.  1. 배경색 바꾸는 코드 추가하기   마우스를 올리니 배경색이 옅게 바..

애니메이션 효과를 좀더 자세히 살펴보기로 하자.    이론 1 - 애니메이션 응용  애니메이션도 한 줄로 작성이 가능하다. 앞에 나오는 것이 duration인데 1000ms는 1초를 의미한다. 따라서 1500ms는 1.5초가 된다. infinite는 애니메이션을 무한으로 반복하는 것이다.    애니메이션도 prefix를 달 수 있다. 이것을 사용할 때는 키프레임과 쌍을 이루어 작성해야 한다. 없으면 없는 것끼리, 있으면 있는 것끼리 작성해야 한다. transform을 사용할 때도 webkit을 꼭 써주어야 한다.       마우스를 올렸을 때 1초동안 색깔이 변하는 설정이다.       all은 img에 적용하는 모든 속성에 영향을 주겠다는 의미이다. 마우스를 올렸을 때 크기를 확대하는 기능도 추가했다...

이제 애니메이션에 대해서 공부해 볼 것이다. 이전 단원에서는 transform과 transition에 대해서 배웠다. 이 둘은 어떤 조건이 있을 때 적용하는 것이고, 애니메이션은 조건과 관계없이 사용하는 것으로 웹 사이트에 접속하자마자 애니메이션 효과가 나타난다.   이론 3 - Animation  changeWidth는 개발자가 임의로 작성한 내용물로 원하는 속성값으로 바꿀 수 있다. interation을 6회로 주었다. 애니메이션 진행방향은 direction으로 사용하는데, normal은 시작에서 끝으로 가는 것이고, reverse는 끝에서 시작으로 가는 것이다. alternate는 시작과 끝 방향이 반복되는 것이다.@keyframs에는 이러한 변화를 줄 이름을 작성해 준다. 위에는 조건이고 아래를 ..

이번에는 Transition에 대한 개념부터 학습해 보겠다.   이론 2 - Transition  예를 들어 빨간색 버튼을 파란색 버튼으로 바꾸고자 할 때 이 과정을 자연스럽게 변화하는 과정을 줄 때 이 기능을 사용한다. 이 예제에서는 가로값을 변화 주었고, 이 효과가 나타나는데 2초 동안 적용했다.     속도도 다양한 종류가 있는데 빨라졌다 느려질 수도 있고 일정한 속도를 유지할 수도 있다. 이 속성들을 사용하는 것이 timing-function이다. delay는 바로 적용하지 않고 약간의 차이를 두는 것이다.     태그, 아이디, 클래스 선택자는 원래 문서에 존재하거나 개발자가 임의로 작성한 속성값이다. 가상 선택자는 CSS에서 미리 만들어놓은 선택자이다.     작성하는 순서는 이와 같다. 만약..

지난 8월에 8일 동안 HTML/CSS 공부를 했었다. 하지만 CSS를 다 공부하지 못하고 절반 정도 남겨둔 내용들이 있어 오늘 공부를 진행해보려고 한다. 어제는 컴퓨터 비전 공부를 했었는데 웹캠이 없는 관계로 할 수 있는 실습이 얼마 되지 않았다. 차라리 물건이 도착할 때까지 다른 과목을 공부하다가 내일부터 컴퓨터 비전을 공부하면 될 것 같았다.어제 저녁에는 공부하기가 무척 싫었지만 오늘도 새벽에 3시 15분에 일어나 공부를 시작해 본다. 우선 엘리스로 학습을 진행하고 지난번에 공부했던 웹 표준의 정석 책으로도 강의를 듣고 책을 보며 학습할 예정이다.    이론 1 - Transform  여기서의 회전은 평면적인 회전이다. 이 값은 음수로도 가능하다. 축소할 때는 0.5와 같은 소수값을 사용하면 된다...