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

이어서 미디어쿼리 사용시 주의사항에 대해서 살펴보겠다.   이론 2 - 미디어쿼리 사용 시 주의 사항  뷰포트의 메타태그를 반드시 기록해야 한다. 만약 그렇지 않으면 정상적으로 작동되지 않는다.        기기값을 디바이스의 기기값으로 대체하겠다는 의미이다. initial-scale은 사용자가 접속했을 때 처음 화면 비율을 말한다. 만약 이 내용을 설정하지 않으면 비율이 깨질 수도 있다.      아래 배경색을 명시하지 않아도 바깥쪽의 코드가 적용되어 미디어쿼리는 노란색으로 적용된다.     실습 1 - 미디어쿼리 사용 시 주의 사항 1 : viewport     코드 작성하기    모바일로 전환하니 크기가 이처럼 줄어들었다.   처음에는 오타가 있어서 한번 틀렸다가 이번에는 다 맞았다.     퀴즈 ..

HTML/CSS 과정의 마지막 주차 학습을 시작해본다. 벌써 눈이 감기며 잠이 오는 저녁시간이지만 할 수 있는데까지 공부해볼 것이다.   이론 1 - 미디어쿼리 소개 반응형은 웹사이트에 접속해서 브라우저의 창을 늘이거나 줄였을 때 자연스러운 크기 조절 효과가 일어나는 것이다. 적응형은 레이아웃의 변화가 뚝뚝 끊기며 달라진다. 즉 자연스러운 변화가 있느냐 없느냐에 따라 반응형과 적응형으로 나뉜다.    가로폭을 설정하는 것 자체가 미디어쿼리이다. 먼저 영역을 설정하고 width, height 등을 지정해준다.      왼쪽이 이 아이콘을 클릭하면 모바일 화면으로 바뀐다. 도메인 주소를 클릭하면 기기 화면에 어을리는 모바일 출력 결과물을 확인할 수 있다. 가장 정확한 방법은 자신이 보는 테블릿이나 스마트폰으..

이제 단원 정리를 하고 마무리 문제 두 문제를 풀어보려고 한다.    한눈에 정리하기         마무리 문제 문제 1번   지금은 색이 한 번에 바뀌지만 서서히 바뀌도록 애니메이션을 적용할 것이다.   문제 풀기 가끔 책 코드가 잘못된 것을 발견하는데 이번에도 그랬다. 정답 코드로 실행하면 아무런 표시가 뜨지 않는다. 그 이유는 li를 Li로 표시했기 때문이다. 이제 배경색이 서서히 바뀌고 있다. 동영상으로 보여줄 수 없어서 확인은 어렵지만 잘 수정되었다.    문제 2번        문제 풀기  x축으로 잘못 설정했더니 곰돌이가 위아래로 회전하고 있다. 코드를 수정해 볼 것이다.   코드 다시 수정하기   이제 애니메이션이 잘 돌아간다.     학습을 마치고문제를 모두 잘 풀었다. 문제를 풀고 나니..

앞에서 배운 CSS 트랜지션을 잘 활용해도 부드러운 애니메이션 효과를 만들 수 있었지만 CSS3의 animation 속성을 이용하면 트랜지션보다 더 쉽게 애니메이션을 만들 수 있다. CSS 애니메이션에서 사용하는 속성CSS3의 animation 속성을 사용하면 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. animation 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임이라고 한다. 키프레임은 @keyframes 속성으로 정의하고, animaiton 속성과 그 하위 속성을 이용하여 애니메이션의 실행 시간이나 반복 여부 등을 지정한다. 아래 표는 animation 관련 속성을 정리한 것이다. 1. 애니메이션의 ..

아침 공부가 끝나고 점심때부터 3시간이 넘도록 인터넷이 되지 않아서 공부를 할 수가 없었다. 내가 이사 오면서 이전에 살던 집에서 썼던 공유기를 계속 연결해서 썼는데 인터넷 회사가 전혀 다르다는 걸 오늘 알게 되었다. 근데 몇 달간은 잘 되었다는 것이 신기했다.딥러닝을 하면서부터 GPU 연산이 되지 않고 이상하게 계속 끊겼던 것도 바로 이런 이유였다. 오늘 아저씨가 1시간이 넘도록 인터넷을 설치하며 봐주다 가셨다. 전에는 혹시나 와이파이가 끊어질까 걱정하며 사용했었는데 이제 이런 걱정으로 한시름 놓을 수 있었다. 본격적으로 공부를 시작해본다. 오늘 해야 할 공부 목표가 많이 뒤처졌다. 이제 2시간 반 동안 최대한 빠르게 이 단원을 마쳐보려고 한다.앞에서는 요소를 이동하거나 회전, 왜곡시키는 등 비교적 단..

새벽에 엘리스로 이 과정을 공부했으니 이제 강의 영상과 책으로 학습을 진행해 보기로 했다. 웹캠은 내일 오후에나 도착할 것 같은데, 내일 새벽까지는 CSS 공부를 다 마치고 그래도 시간이 남으면 컨퍼런스 강의를 정리하다가 웹캠이 도착할 즈음인 오후부터 컴퓨터 비전 공부를 다시 시작하면 될 것 같다. 이전에 CSS를 사용해서 웹 요소에 시각 효과를 추가하는 방법을 공부했다. 이번 장에서는 한 걸음 더 나아가 애니메이션 동작을 어떻게 만드는지 알아보겠다. 애니메이션 동작을 알면 웹 사이트의 메뉴를 부드럽게 열 수 있고, 웹 요소를 이동할 수도 있다.   변형 알아보기일반적으로 물체의 크기나 형태의 위치를 바꾸는 것을 변형 또는 트랜스폼(transform)이라고 한다. 웹 문서에 CSS 변형을 이용하면 사용자..

이제 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에는 이러한 변화를 줄 이름을 작성해 준다. 위에는 조건이고 아래를 ..