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

이제 CSS 공부의 마지막 단원이다. 저녁식사 전에 강의 영상도 들었으니 이제 1시간 정도만 더 공부하면 마칠 수 있을 것 같다. CSS를 다시 공부해 보니 정말 재미있었고 이어서 자바스크립트까지 공부해보고 싶은 마음이 들기도 했다.요즘 하고 싶은 공부가 많아서 무엇을 먼저 하는 게 좋을지 고민이 많이 된다. 사실 게임 개발 공부가 정말 하고 싶지만 12월까지는 웹 개발 공부를 마치기로 스스로와 약속했기에 꾹 참고 있는 것이다. 파이썬 게임 개발도 그 이후에나 가능할 것 같다. 이제 남은 공부를 이어가 보자. 웹 디자인 레이아웃을 만들 때 레이아웃은 아주 중요하다. 웹 사이트를 제작할 때 고려해야 할 기기가 나날이 늘어나고 있기 때문이다. 소스를 최대한 간단하게 유지하면서 대부분의 기기에 대응할 수 있는..

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법 중에 플렉스 박스 레이아웃에 대해 본격적으로 학습해 볼 것이다. 별로 재미있는 내용은 아니지만 웹페이지를 만들 때 매우 중요한 내용이니 잘 공부해 두기로 하자.  플렉스 박스 레이아웃에서 사용하는 용어플렉스 박스 레이아웃은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념이므로 알아 둬야 할 새로운 용어가 많다.      플렉스 박스 항목을 배치하는 속성플렉스 박스에스 플렉스 항목이 여러 개 있는데 일괄적으로 한꺼번에 배치할 수도 있고, 주축이나 교차축 기준으로 다양하게 배치할 수 있다. 배치 방법과 관련된 속성이 많으므로 처음에는 헷갈리는데 다음 표와 같이 기억해 두면 좋다.    1. 플렉스 컨테이너를 지정하는 display 속성플렉스 박스 레..

이제 얼마 남지 않았으니 조금 더 힘을 내보기로 하자. 솔직히 지금 공부가 많이 하기 싫은 마음이 들지만 참고 해보는 중이다. 웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 한다. 여기서는 그리드 레이아웃의 특징을 알아보고, 그리드 레이아웃을 만드는 방법으로 플렉서블 박스 레이아웃과 CSS 그리드 레이아웃을 간단히 살펴보겠다.   그리드 레이아웃이란반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다.그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 ..

이제 미디어 쿼리를 적용한 실습을 진행해보겠다.   미디어 쿼리 적용하기미디어 쿼리가 어떻게 구성되는지 알았으니 이제 웹 문서에 적용해 보겠다. 적용하는 방법은 크게 외부 CSS 파일로 연결하는 방법과 웹 문서에 직접 정의하는 방법이 있다. 1. 외부 CSS 파일 연결하기외부 CSS 파일을 따로 저장해서 웹 문서에 연결하는 방법을 아아보겠다. 이 방법은 각 조건별로 CSS 파일을 따로 저장한 뒤 태그나 @import 문을 사용해서 연결한다.먼저 외부 CSS 파일을 연결할 때 가장 많이 사용하는 태그를 알아보겠다. 이 태그는 태그 사이에 넣는다. 다음 기본형의 의미는 미디어 쿼리 조건이 맞다면 지정한 CSS 파일을 가져와서 적용하라는 것이다. 속성의 순서는 상관없다.  외부 CSS 파일을 연결하는 또..

아침에는 CSS 공부를 하지 못했다. 수학이랑 영어 공부를 다 마치고 나니 1시 반이 되어서 간단한 요리를 해서 점심을 먹고 나니 벌써 3시가 되었다. 이제부터는 인스턴트 음식을 사 먹지 않고 가능하면 집밥을 먹기로 했다.오늘 오후에는 3시간 안에 미디어 쿼리까지 모두 공부해서 CSS 공부를 전부 마치려고 한다. 그리고 지난번에 갔다온 AICON 강의도 정리해보려고 한다. 아마 오늘 컴퓨터 비전 공부는 하지 못할 것 같다. 미디어 쿼리는 반응형 웹 디자인에서 가장 기본적인 개념이다. 사이트에 접근하는 기기의 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 것이다.     미디어 쿼리 알아보기CSS 모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특쩡한 CSS 스타일을 사용하는 방법이다. 미디어 쿼..

오늘은 ENIE 활동을 할 게 많아서 기사를 두 편만 읽고 학습을 진행해 보았다. 이제 매일 영어 공부하는 시간이 즐겁고 기대가 된다. 그리고 조금씩 공부도 진지해지고 범위도 넓어지는 걸 느낀다.엊그제부터 사전을 찾아보며 발음 기호도 열심히 읽었는데 오늘은 발음 기호를 기사 옆에 표시하며 모르는 단어는 밑줄을 긋고 열심히 공부했다.   영어 기사 읽기 Aha! - How to Build Your Own Board Game  이 기사를 읽고 나도 보드게임을 해보고 만들고 싶은 마음이 들기도 했다. 어렸을 때는 보드게임을 정말 좋아해서 동생과 많이 했었다. 어른이 되어서도 가끔씩 가족들과 루미큐브와 여러 가지 게임을 즐기곤 했었는데 엄마가 얼마 전에 집에 있는 보드게임을 전부 다 팔아버려서 무척 아쉽다.근데..

최상위 수학은 에이급 수학보다 STEP 1 문제 좀더 많았다. 그래도 내일까지 이틀동안 풀려면 1시간으로는 부족할 것 같아 오늘은 수학 공부를 하는데 1시간 반 이상 투자해보았다.    최상위 수학 STEP 1 문제 풀기                   학습을 마치고요즘에는 아침을 먹고 나서 수학과 영어 공부를 한다. 새벽에 운동가기 전에는 시간이 짧을뿐더러 내가 하고 싶은만큼 충분히 공부하고 싶기 때문이다. 거기다가 아침에 보통 청소를 하고 집안일도 하다보면 시간이 금방 간다.오늘은 집안일이 좀 있어서 10시에 공부를 시작했다. 그래도 매일 꾸준히 할 수 있어서 정말 감사하다. 이제 영어 공부를 해야겠다.

어제 풀었던 STEP C에서 틀린 문제 3문제를 다시 풀어보았다. 한 문제만 빼고 두 문제는 실수로 틀린 거였다. 그래도 전보다는 실수가 많이 줄었다.오답 정리를 하는 날에는 그동안 풀었던 문제집도 올리니 책을 스캔한 것도 함께 올려본다.   지금까지 풀었던 에이급 수학 STEP C 문제                                에이급 수학 STEP C 틀린 문제 다시 풀기     학습을 마치고5번 문제는 조금 어려워서 푸는데 시간이 좀 걸렸다. 다른 두 문제는 모두 실수라서 무척 아쉬웠다. 만점을 맞기는 아직 많이 어렵지만 그래도 조만간 만점을 맞을 날이 있을 것 같다. 수학 실력이 나날이 향상되는 것을 느끼기 때문이다.이어서 문자와 식 단원으로 최상위 수학 문제집을 풀었다.방정식부터는 ..

이제 책으로 반응형 웹과 미디어 쿼리에 대해서 공부해보려고 한다. 이 단원만 학습하고 새벽 2시 조금 넘어서부터 진행되었던 5시간 동안의 새벽 공부를 마칠 생각이다. 반응형 웹 디자인은 PC 브라우저든 모바일 브라우저든 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여 주는 것을 말한다. 화면 크기가 다양한 모바일이 계속 쏟아져 나오는데 그때마다 사이트를 따로따로 제작하는 것은 매우 비효율적이다.이런 점을 고려해서 화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를구현하는 것이 바로 반응형 웹 디자인이다.   반응형 웹 디자인이란?포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 이때 반응형 웹  디자인은 ..

그동안의 공부를 마무리하며 테스트 문제를 바로 풀어보기로 했다. 공부를 마치고 시간 나면 풀어야지 하면 언제 다시 풀게 될지 모르니 학습을 마친 바로 지금 풀어보기로 했다.책으로는 아직 미디어쿼리 부분이 남아있지만 가능하면 6시 전까지는 모든 문제를 다 풀고 그때부터는 다른 공부를 진행해볼 것이다.    실력 확인 테스트이 과목은 실력 확인 테스트도 있어서 문제를 풀어보기로 했다. 원래 책 학습까지 다 마치고 할까 생각했는데 그냥 내친김에 하기로 했다.    문제 1번  문제 풀어보기inline 스타일로 작성하려면 h 태그 안쪽에 다음과 같이 속성을 주면 된다.   근데 h6의 태그가 틀렸다고 나온다. 어디가 잘못된 걸까? purple의 철자를 잘못 썼었다.   이제 잘 제출되었다. 느낌표가 보라색으로 ..