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

이이서 미디어쿼리를 적용하는 학습을 진행해 볼 것이다. 이론 학습은 이게 마지막이다. 하지만 실습이 정말 많아서 아직 공부를 마치려면 멀었다.    이론 3 - 미디워쿼리 적용하기  이전에 만들었던 엘리스 홈페이지를 모바일 버전으로 바꾸려고 한다.       상단과 본문을 모두 50%에서 100%로 변경한다.    좌우 정렬을 가운데 정렬로 바꾸게 된다.    실습 3 - 미디어쿼리 사용 시 주의사항 2 : 속성 상속     이 코드를 실행하고 크기를 축소해도 색깔이 변경되지 않는데 이것은 미디어쿼리 바깥쪽에 이미 yellow 속성이 들어가 있기 때문이다. 이제 지시사항대로 border를 추가해 만들어볼 것이다.     원래 크기로 하면 border가 빨간색으로 표시된다.    크기를 줄이니 이처럼 사라..

이어서 미디어쿼리 사용시 주의사항에 대해서 살펴보겠다.   이론 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 변형을 이용하면 사용자..

오늘은 657호 두 번째 학습 날이다. 이번 호는 4일 동안 마쳐야겠다는 목표를 세웠다. 빨리 남은 신문들을 모두 학습하고 정기구독을 신청하고 싶다. 구독을 하면 온라인으로도 할 수 있으니 나름 공부 효과도 좋고 재미있는 편이다.오늘도 1시간 정도 영어 공부를 해본다. 학습일지를 쓰는 시간도 공부 시간에 포함되기에 중요한 시간의 일부이다.   People - Mark Zuckerber   마크 저커버스Several big companies, like Microsoft, wanted him to work for them.몇몇의 큰 회사/ 마이크로소프트같은/ 그는 그들을 위해 일하기 원했다. But, he rejected them and went to Harvard University.그러나 그는 그들에게 ..

어제에 이어 나머지 문제를 모두 풀어보았다. 오늘 푼 문제는 어제보다 난이도가 훨씬 더 높았지만 오늘 푼 모든 문제를 다 맞았다. 그중에는 내가 가장 약한 식을 세우는 문제도 많이 있었다. 잘 안 풀렸지만 생각을 집중하며 반드시 풀겠다는 각오로 풀었는데 신기하게도 다 맞았다.   에이급 수학 STEP C 문제 풀이 노트                  마지막 문제 두 개는 정말 어려웠는데 조금 더 시간이 걸리더라도 문제를 집요하게 풀어나갔다.    학습을 마치고오늘 수학 공부를 하며 깨달은 점이 있다. 내가 잘 못한다고 미리부터 겁먹지 않고 생각을 집중하며 문제를 풀 때 반드시 해결할 수 있다는 것을 알게 되었다. 식을 세우는 걸 그동안 정말 못한다고 생각했다. 하지만 이건 경험이 부족했고 그동안 수학을 ..

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