"게임 개발자"를 향한 매일의 공부일지 1기 : 2024년 5 ~ 12월

이제 얼마 남지 않았으니 조금 더 힘을 내보기로 하자. 솔직히 지금 공부가 많이 하기 싫은 마음이 들지만 참고 해보는 중이다. 웹 사이트의 레이아웃을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 한다. 여기서는 그리드 레이아웃의 특징을 알아보고, 그리드 레이아웃을 만드는 방법으로 플렉서블 박스 레이아웃과 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의 철자를 잘못 썼었다.   이제 잘 제출되었다. 느낌표가 보라색으로 ..

이제 모든 학습이 끝나고 단원을 마무리해보는 시간이다.   4장을 닫으며               학습을 마치고이 단원은 테스트 문제도 있는데 다음 포스트에 이 문제들을 풀어보려고 한다. 테스트 문제는 무척 어렵겠지만 풀면서 조금 잊어버린 html도 학습해보는 좋은 시간이 될 것 같다.

이어서 본문과 하단 영역의 미디어쿼리도 적용하는 실습을 진행해 보겠다.   실습 5 - 본문 영역 미디어 쿼리 적용하기  이번에는 풀 사이즈로 본문 영역을 조절하는 미디어쿼리를 작성해 볼 것이다.  코드 작성하기 코드를 이렇게 안쪽에 작성해 준다.     이건 원래 사이즈이고 크기를 줄이면 이렇게 하나의 사이즈로 보인다.      작성된 코드가 잘 들어있는 것을 확인할 수 있다. 미디어쿼리 안쪽에 작성된 코드가 바깥쪽에 영향을 미치도록 작성했기 때문에 가능한 일이다. 하지만 제출을 눌러보니 height가 빠져있어서 이 내용을 추가해 주었다.    이전의 결과화면을 확인했을 때보다 높이가 훨씬 높아진 것을 볼 수 있다.       실습 6 - 하단 영역 미디어 쿼리 적용하기   하단 영역도 한 줄로 배치되..