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

이제 3주 차 학습을 마무리하는 시간을 갖기로 했다.    3장을 닫으며              학습을 마치고이제 수학 공부를 한 후 아침 운동을 해 볼 것이다. 어제는 운동 시간이 많이 늦어졌지만 오늘은 가능하면 빠르게 운동을 마치고 아침 요가도 할 수 있으면 해 볼 것이다. 이번주부터 걷기와 달리기 운동뿐 아니라 요가와 근육 운동도 추가해 보기로 했다.공부를 다 마치고 나니 정말 기쁘다! 어제 저녁에는 과연 내일 공부를 할 수 있을까 걱정이었는데 말이다. 역시 난 새벽형 인간인가 보다.

애니메이션 구현 실습을 이어서 진행해 보겠다.     실습 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와 같은 소수값을 사용하면 된다...

남은 4문제는 풀기 싫어서 건너뛰려고 했는데 그래도 푸는 것이 좋을 것 같아 마음을 다시 잡아보았다.    연습문제 풀기 세 번째 문제 7번DALL·E는 영어 문장을 주면 내용에 맞는 영상을 자동으로 생성해 주는 혁신적인 모델이다. 이 사이트에 접속해 영상 생성을 시도하고 결과 영상을 제시하시오.  DALL·E 사이트 DALL·E mini by craiyon.com on Hugging Face huggingface.co 처음에는 실행이 안되고 어떻게 쓰는지도 몰라서 잘못된 사이트인 줄 알았다. 근데 구체적으로 문장을 쓰지 않아서 나타나지 않은 거였다.    신나게 뛰어가는 강아지의 모습을 영상으로 만들어달라고 요청했다.     이렇게 신나게 뛰는 강아지의 모습이 나왔다.    그중에 한 장을 선택해 보았..

이어서 연습문제 4번부터 풀어보려고 한다. 요즘 공부의 흥미가 조금 떨어지는 기간이지만 요즘은 슬럼프 없이 공부에 집중하려고 하는 편이다. 연습문제가 너무 많아서 풀기 귀찮지만 모두 내게 도움이 되는 것들이니 재미가 없더라도 한번 풀어보려고 한다.   연습문제 풀기 두 번째 문제 4번가운데 이미지는 1957년에 세계 최초로 컴퓨터에 저장된 아이 영상이다. 당시 사용된 컴퓨터의 메모리와 CPU 사양을 조사하고, 이 영상을 저장하고 처리하는데 어떤 어려움이 있었을지 설명하시오. 미국 MIT의 컴퓨터 과학자 러셀 커쉬(Russell Kirsch)가 당시의 컴퓨터인 SEAC(Standard Eastern Automatic Computer)을 이용해 스캔하여 디지털화한 이미지이다. 이 이미지는 176x176 픽셀..

연습문제는 각 장에 10문제 정도 수록되어 있다. 이 문제를 다 풀고 다음 장으로 넘어갈 생각이다. 이제 오후 공부를 본격적으로 시작해본다. 오후에는 3시 반 넘어서 공부를 시작했으니 3시간 정도 열심히 공부해야겠다.   연습문제 풀기 문제 1번2022년 6월 21일 발사에 성공한 누리호에는 4개의 큐브 위성이 실려 있다. 이들은 차례대로 분리되어 독립적인 임무를 수행하고 있다.(1) 큐브 위성 4개의 임무에 대해 조사하시오.(2) 그중 하나를 선택해 컴퓨터 비전 기술을 응용할 수 있는 구체적인 과업을 구상하시오.  누리호에 대한 설명 누리호누리호 또는 KSLV-Ⅱ(Korea Space Launch Vehicle-Ⅱ, 한국형발사체-Ⅱ) 는 한국항공우namu.wiki   누리호에 발사된 4개의 큐브 위성에..

새벽에 공부하다 말았던 컴퓨터 비전 학습을 점심식사 전까지 해볼 생각이다. 오늘 새벽에 다른 때보다 천천히 공부를 하며 오히려 마음이 정말 흐뭇하고 기뻤다. 그리고 어떤 것을 배울 때 충분히 생각하고 고민하며 즐길 수 있는 시간이 갖추어질 때 나의 생각과 사고가 더 넓어진다는 걸 배울 수 있었다. 그런 의미로 AI와 컴퓨터 비전 관련 영화나 영상이 있으면 찾아보며 오늘은 1장만 공부하는 걸 목표로 삼기로 했다. 이 책은 실습하고 시청해 볼 영상들도 많이 제공하고 있다.    컴퓨터 비전 만들기인간은 뛰어난 시각을 가지고 있기 때문에 컴퓨터 비전을 만드는 일이 쉬울 거라고 착각하기 쉽다. 하지만 앞에서 살펴보았듯이 결코 그렇지 않다. 컴퓨터 비전의 궁극적인 목적은 인간처럼 일반적인 상황에서 잘 작동하는 시..