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

지난 7월 초에 오수열 교수님의 산출문서 특강을 들었다. 오후에는 UI/UX 디자인에 대한 수업이었는데 그건 별거 없어서 따로 기록을 하지 않아도 될 것 같았다.자료를 주시겠다고 했는데 아직까지도 올라오지 않아 영상을 시청하며 캡처한 것을 올려볼 생각이다. 이때부터였나 인사교를 가고 싶지 않고 공부도 안하고 싶은 날이 많아져 지각과 결석을 자주 하게 되었다. 이날 처음으로 30분 정도 지각을 해서 앞부분은 듣지 못했고, 수업을 들으면서 팀 프로젝트 작업이나 다른 일을 하기도 했다. 그래도 도움이 되는 내용들이 많아 다시 들으면서 내용을 정리해본다. 다른 줌 강의는 2주가 지나면 삭제되는데 이 강의는 그래도 꾸준히 올라와있어 다시 들을 수 있었다.​  ​개발자들에게 하는 부탁​​코딩만 잘해서는 개발을 결코..

이제 HTML/CSS 수업 시간에 배웠던 내용을 정리해보려고 한다. 폼을 작성하는 내용은 별로 많이 하지 않았고 HTML 이틀, CSS 3일을 수업했을 뿐이었다. 3시간에 5일에 걸쳐 15시간을 수업한들 너무나 짧아서 많은 내용을 다루지 못했다.오히려 책에서 훨씬 더 자세한 내용을 다루고 있다. 그래도 복습하는 차원에서 기록으로 남겨보기로 했다.    1. 입력 폼 만들기  책으로 학습할 때는 그냥 정리만 하고 표에 기록된 건 거의 읽지 않을 때가 많았는데 수업 내용을 정리하며 다시 한번 복습해 보니 정말 좋았다. method에는 get과 post 방식이 있는데, get은 사용자가 입력한 내용이 그대로 드러나고 post는 숨겨지는 장점이 있다. name, value, target 이런 속성은 매우 중요하..

이제 단원을 정리하며 문제를 풀어보기로 하자. 문제를 과연 풀 수 있을지 의문이지만 한번 도전해 볼 것이다.    단원 한눈에 정리하기            연습문제 풀기 문제 1번    주어진 문제는 이렇다. CSS 외에는 제공된 정보가 없어서 하나하나 입력을 해주어야 할 것 같다.  첫 번째 도전  button이라고 하니 이렇게 버튼만 나타나고 글씨가 보이지 않는다. 아마도 submit으로 써야 하는 것 같다.  두 번째 도전   submit뿐 아니라 id에서 value로 변경해야 이름이 제대로 나온다. id로 하면 제출하기만 나온다. 이건 원래 등록되어 있는 이름이 나타나는 모양이다.    문제 2번    이 문제도 제공된 내용이 거의 없어 스스로 작성해야 한다. 1번 문제는 그래도 어떻게 풀어야 하..

이제 마지막 장 학습만이 남아있다. 폼 태그를 학습하는 내용도 분량이 만만치 않다. 이것만 학습하면 연습 문제를 풀고 오후에는 CSS 공부를 시작하려고 한다.여기서는 input 태그 외에 다양한 태그에 대해서 학습하게 된다.     1. 여러 줄을 입력하는 텍스트 영역 태그폼에서 텍스트를 여러 줄 입력하는 영역을 만둘 수 있다. 내용 이 태그에서는 너비 크기를 지정하는 cols 속성과 줄 수를 표시하는 rows 속성을 사용한다.    텍스트를 여러 줄 입력하기 메모 영역에 여러 줄을 입력하는 칸이 나타난 것을 볼 수 있다.   2. 드롭다운 목록을 만들어주는 , 태그사용자가 내용을 직접 입력하지 않고 여러 옵션 중에서 선택하게 하려면 드롭다운 목록이나 데이터 목록을 사용한다. 드롭다운 목록은 목록을 ..

계속해서 폼 태그에 대한 내용을 학습해 보자. 동영상 강의를 먼저 공부하고 책을 보니 전보다 훨씬 이해하기 쉬운 것 같다. 영상이 짧아서 책에 있는 내용을 절반도 다루지 않지만 그래도 도움이 된다. 만약 전부다 다 다룬다면 너무 길어서 잘 보지도 않을 테니까. 폼 태그는 단순히 내용을 입력하는 것뿐 아니라 입력란에 커서나 힌트를 표시할 수 있다. 꼭 입력해야 하는 필드도 지정할 수 있다고 한다. 예전에는 자바스크립트로 실행한 것을 태그 속성만으로 처리하게 되었다.    1. 자동으로 입력 커서를 갖다 놓는 autofocus 속성페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.    2. 힌트를 표시해 주는 placeholder 속성사용자가 텍스트를 입력할 때 입력란에 적당히 ..

이어서 input 태그의 속성에 대해서 학습해 볼 것이다. 분량이 많아서 두 개의 포스트로 나누어서 작성하고 있다. 여기서부터 새로운 강의 학습도 이어지고 있다. 날짜와 시간 등에 대해서 다루고 있는데 수업 시간에도 이 부분은 잠깐 소개만 해서 학습이 잘 되지는 못했다.책을 통해 자세한 내용을 학습해볼 것이다.     사용자 입력을 위한 input 태그 두 번째 숫자 입력 필드를 나타내는 type = "number", type = "range" number는 조금 전에도 보았듯이 스핀 박스가 나타나며 숫자를 선택할 수 있고, range는 슬라이드 막대를 움직여 선택하게 된다.      스핀 박스를 사용해 숫자 입력하기  스핀이나 막대를 최대 5개 혹은 3개까지 선택하면 더 이상 표시가 되지 않는다.   ..

앞장에서는 개념적인 기초 학습을 진행했다면 이번 장에서는 input 태그의 다양한 기능에 대해서 학습하게 된다. 아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 태그를 이용해서 넣는다.    웹 폼의 다양한 곳에서 사용하는 태그input 태그가 어떻게 사용되는지 확인할 수 있다.      태그의 type 속성 한눈에 살펴보기    텍스트와 비밀번호를 나타내는 type="text"와 type="passward"비밀번호 필드는 입력하는 내용을 화면에 보여주지 않아야 하므로 *나 ●로 표시한다.     간단한 로그인 폼 만들기  아이디와 비밀번호를 입력할 수 있다. monte라는 아이디를 한번 사용하면 한두 글자만 입력해도 자동 완성이 되는 것을 볼 수 있다. 이 학습에..

어제부터 다시 공부에 집중할 수 있게 되었고 공부에 흥미를 느끼는 중이다. 티스토리에는 하루에 50개의 글만 저장할 수 있지만 사실 하루에 50개를 올리는 일은 흔치 않은 일이다. 벨로그에 그동안 올렸던 글을 다 정리하면 앞으로는 많아야 20개가 될 테니 이 부분은 더 이상 제약사항이 되지 못한다.공부는 한번 쉬면 다시 시작하기가 참 힘든 것 같다. 잠시 쉬면서 놀다가 공부에 집중하는 시간도 처음에 30분 정도는 정말 하기 싫은 마음과 싸워야 하지만 그 이후에는 다시 즐겁게 할 수 있다. 만사가 그러한 것 같다. 이제 한 달 전에 공부하다 말았던 부분을 학습해보기로 하자. 저녁을 먹고 나서 8~9월 학습 계획을 짜보았는데 사실 너무 벅찬 무리한 계획이었던 것 같다. 너무 일정을 빡빡하게 계획하면 하기가 ..

이어서 테이블 실습을 진행해 보겠다. 이 수업도 둘째 날 진행했었다. 표를 만드는 건 정말 어려웠다. 특히 행와 열을 병합하는 문제가 참 쉽지 않아서 선생님께 질문을 했던 기억이 난다. 다른 학생들도 처음 해보는 작업에 어려움을 느끼기도 했으나 대부분 잘하는 것 같았다.들을 때는 조금 알았다가도 돌아서면 잊어버렸다. 오늘 점심때 이 부분을 혼자서 실습해 보며 드디어 병합하는 방법을 알게 되었다.     1. 테이블 만들기 기본 테이블을 만들어보았다. 테두리와 색깔은 보통 CSS를 통해 설정하는데 HTML에서도 조절할 수 있다. 하지만 이 방법은 별로 추천하지 않는다고 한다.       이번에는 열을 병합하여 표를 만들었다. 난 행과 열이 정말 많이 헤깔린다. 행이 어디인지 한참을 생각하며 손으로 그림을 ..

이 부분은 인사교 수업 시간에 진행했던 내용인데 한번 정리해 보기로 했다. 사실 책에 모두 나와있는 내용이라서 생략하려고 했으나 그래도 책에 없는 내용도 다루고 있어 짧게라도 소개하는 것이 좋을 것 같다. 공부할 내용이 정말 많고 수업의 진도를 따라가지 못해 복습은 꿈도 못 꾸고 있지만 그래도 이제는 차근차근 정리해보려고 한다.책으로 학습을 한번 진행해서 수업의 내용도 별로 어렵지 않았다.    1. 목록 만들기   순서가 있는 목록과 순서가 없는 목록을 이렇게 만들어 볼 수 있다. 그래도 처음에는 수업을 나름 잘 들어서 어렵지만 따라서 필기를 잘했다. 나중에 갈수록 잘하지 않았지만 말이다.   2. 하이퍼링크   텍스트를 클릭하며 해당 링크로 이동한다. 네이버로 이동할 수도 있고 실습 파일로도 이동하는..