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

CSS 수업 때 선택자에 대해서 수없이 들어보았으나 어떻게 사용하는지는 거의 감을 잡지 못했다. 하지만 단 1시간 학습을 함으로 이 개념을 확실히 배울 수 있었다. 그러면서 난 역시 필기하면서 책과 함께 직접 실습하고 스스로 문제를 푸는 과정 속에서 많이 성장한다는 걸 느꼈다.내가 언제 공부가 하기 싫은지 생각해 보면 눈으로만 학습하고 있거나 과정이 너무 어려워서 무슨 말인지 알아들을 수 없을 때였다. 요즘 수업이 그러했다. 도무지 따라갈 수 없을 만큼 벅찼고 어디서부터 시작해야 할지 알 수 없었다.  이제 난 다시 마음을 잡고 공부에 집중하고 있다. 공부가 너무나 재미있어서 손에서 놓을 수 없을 정도이다. 다시 잡은 이 마음을 다시는 놓치고 싶지 않다.이번 단원에서는 스타일 규칙을 태그뿐 아니라 웹 문..

이젠 본격적으로 CSS 세계로 들어오게 되었다. CSS 수업 부터는 무척 어려워서 무슨 말인지 잘 알아듣지도 못했고 수업을 잘 따라가지 못했다. 다시 책과 함께 학습해볼 수 있어서 정말 좋다. 왜 진작 공부하지 않았는지 후회가 된다.지금이라도 정신을 바짝 차려서 남은 인사교 4달 동안 정말 열심히 공부해보려고 한다.     1. 스타일 형식 알아보기선택자 { 속성1: 속성값1; 속성2: 속성값; } 여러 개의 속성값을 사용할 수 있다.   스타일 규칙을 작성하는 방법여러 줄과 한 줄에 표시하는 방법이 있는데 속성이 여러 개일 경우 여러 줄로 표시하는 것이 보기에 좋다.  스타일 주석을 표기하는 방법 한 줄 또는 여러 줄의 주석을 표기할 수 있다.   2. 스타일 시트 알아보기스타일 규칙을 한눈에 확인하고..

이제 책과 강의 영상을 시청하며 CSS 공부를 본격적으로 해볼 것이다. 엘리스도 아주 조금 맛보기로 학습을 진행했는데 얼마 안 되는 부분이었지만 1시간 넘게 걸렸다. 어제 내가 세운 학습 계획이 얼마나 무리한 일정이었는지 알 것 같다. 이런 식이면 주말 내내 공부를 해도 절반을 끝내기도 어려울 듯하다.이 단원에서는 CSS를 어떻게 표현하는지 기초적인 내용부터 학습하게 될 것이다. HTML은 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다. CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당한다.     왜 스타일을 사용할까?스타일이란 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다. 내용은 건드리지..

오후가 한참 지나서야 HTML 학습이 모두 끝났다. 수업 내용까지 정리하고 나니 정말 후련하다. 이제 CSS 공부를 시작해 볼 것이다. 내일까지 CSS를 다 마칠 수 있을지 모르겠으나 할 수 있는 데까지 해볼 생각이다. 그리고 저녁에는 기획 특강도 듣고 다른 해야 할 작업들이 있다.우선 엘리스로 기본 학습을 진행해볼 것이다. 여기서부터는 온라인 학습과 수업, 책까지 학습해야 하니 기록할 것도 분량도 정말 많을 것 같다. 그래도 차근차근 학습을 진행하다 보면 어느새 공부를 마칠 때가 될 것이라 기대해 본다.    이론 5 - CSS CSS란 무엇인가?디자인과 공간에 대한 크기를 설정하는 부분이 CSS이다.    선택자에는 HTML 태그를, 속성에는 속성의 이름을 넣어준다.        CSS 연동 방법  ..

이제 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라는 아이디를 한번 사용하면 한두 글자만 입력해도 자동 완성이 되는 것을 볼 수 있다. 이 학습에..