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

오늘 새벽 5시에는 일어나려고 했으나 너무 졸려서 1시간 정도 더 자고 일어나본다. 수업 가기 전까지 2시간 정도 공부할 시간이 있어 어제 공부하려고 했던 CSS를 학습해보기로 했다.책에서 학습한 내용을 좀더 깊이있게 학습해보자.    이론 1 - 박스 모델       border는 눈에 보이지는 않지만 존재하는 영역이다.         실습 1 - 박스 모델  기본 학습 실습해보기 레이아웃 구성하기    마진과 패딩 넣어보기 border를 기준으로 100px 만큼 공백이 생겼는데 여기가 마진이다. 텍스트 안쪽에도 100px 들여쓰여졌는데 여기는 패딩이 적용된 곳이다.     원래는 300px이었으나 패딩이 들어가는 순간 100px만큼의 공간이 더 생겼음을 생각해야 한다.   margin 한줄로 작성하기..

눈이 조금 감기지만 이 내용만 학습하고 취침하려고 한다. 강의도 다 들었고 이제 정리하면서 학습을 진행해보려고 한다. 그래도 공부하는 것이 정말 재미있어졌다. 웹 문서에서 위치나 글씨를 원하는 위치에 넣고 싶은데 생각만큼 쉽지 않다. 이럴 때 position 속성을 사용하면 웹 문서에서 요소의 위치를 자유롭게 정할 수 있다.   1. 웹 요소의 위치를 정하는 left, right, top, bottom 속성position 속성으로 기준 위치를 정한 뒤 요소의 위치를 left, right, top, bottom 속성에서 선택하고 속성값을 지정한다.   텍스트 요소 자유롭게 배치하기     2. 배치 방법을 지정하는 position 속성웹 문서 안의 요소를 자유자재로 배치해주므로 HTML과 CSS를 이용해 ..

이번에는 레이아웃을 만드는 방법에 대해서 학습해보기로 하자. 박스 모델의 블록 레벨 특성과 인라인 레벨 특성을 이해했다면 웹 문서의 레이아웃을 만들 때 도움이 된다. 이전에 충분히 이해하고 넘어갔으니 이 수업도 잘 따라갈 수 있을 거라 기대한다.먼저 강의부터 듣고 정리를 시작해볼 것이다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   1. 배치 방법 결정하는 display 속성이 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 주로 웹 문서의 네비게이션을 만들며서 메뉴 항모을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.   수평 네비게이션 만들기 인라인 요소가 없었을 때는 수직으로 배열된 표였다. 하지만 ..

이제 마진에 대한 학습을 진행해본다. 두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 한다. 마진과 패딩은 웹 문서에서 여러가지 요소를 배치할 때 자주 쓰이는 속성이므로 꼭 기억해두어야 한다.바로 학습을 진행해본다.  1. 요소 주변의 여백을 설정하는 margin 속성마진은 요소 주변의 여백을 의미한다. 마진을 이용하면 요소와 요소 사이의 간격을 조절할 수 있다. margin: | | auto   margin 속성으로 여백 설정하기  개발자 모드에서 보면 마진값이 잘 들어가 있음을 확인할 수 있다.    2. margin 속성을 사용하여 웹 문서를 가운데 정렬하기margin 속성을 사용해 웹 문서의 내용을 화면 중앙에 배치하려면 우선적으로 배치할 요소의 내..

이제 테두리 스타일에 대한 내용을 학습해보기로 하자. 박스 모델을 사용해 웹 문서에 요소를 배치하려면 각 박스 모델의 크기와 여백, 테두리 스타일 등을 고려해야 한다. 특히 테두리 스타일은 선의 모양뿐 아니라 두께와 색상도 지정할 수 있다. 그리고 네 방향 모두 같은 테두리를 사용할 수도 있고 각각 다르게 지정할 수도 있다. 이 수업을 마치면 얼마나 많은 것들을 알 수 있을지 기대가 된다.   " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    1. 박스 모델의 방향 살펴보기 박스 모델 방향은 맨 윗부분부터 top, right, bottom, left 순으로 돌아간다.     2. 테두리 스타일을 지정하는 border-style 속성이 속성의 기본값은 none이므로 속성값을..

아침 10시 반 부터 오후 6시까지 한 단원 학습을 마치고 이제 두번째 단원에 들어간다. 박스 모델도 공부할 게 참 많은데 오늘 저녁까지 여기는 다 마치고 싶다. 그럼 바로 학습에 들어가보자! 웹 문서에서 내용을 배치할 때는 각 요소를 박스 형태로 구성한다. 이것을 'CSS 박스 모델' 이라고 한다. 각 박스 모델은 셀제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성된다.    1. 블록 레벨 요소와 인라인 레벨 요소 박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. ◆ 블록 요소 : 요소를 삽입했을 때 혼자 한 줄을 차지하는 것◆ 인라인 레벨 요소 : 콘텐츠  만큼 영역을 차지하고 나머지 공간에 다른 요소가 올 수 있음블록 레벨 요소 사용하기    인라인 레벨 ..

7장을 마치고 단원을 정리하며 연습문제를 푸는 일만 남아있다. 이 시간이 가장 기대가 되면서도 즐겁다. 얼마나 배우고 실력이 향상되었는지 점검할 수 있는 시간이기 때문이다.문제다 다른 단원에 비해 2배나 많지만 무척 재미있을 것 같다. 그럼 바로 시작해보자.   단원 한눈에 정리하기      연습문제 풀기 문제 1번       이렇게 불릿도 제거하고 색깔과 줄 간격도 변경해주었다.    문제 2번      이젠 글씨가 잘 보인다. 이 문제도 어렵지 않게 잘 풀었다.     문제 3번      조금 어려운 문제였는데 정말 잘 풀었다. 이렇게 문제를 스스로 해결하는 기쁨을 말도 다 할 수 없다. 마지막 문제만이 남아있다. 이 문제도 충분히 잘 풀 수 있을 것이다!    문제 4번         마지막 문제는..

드디어 1주차 학습을 마쳤다. 한 달도 더 전에 HTML 부분을 공부하다 말았고, 어제와 오늘에 걸쳐 1주차의 모든 내용을 마쳤다. 정말 배울 게 많은 알찬 수업이었다. 그럼 단원 정리를 하며 마무리를 해볼 것이다.   단원 정리하기                                           학습을 마치고 단원 정리도 분량이 만만치 않다. 1주차 학습 내용은 무려 32개나 되지만 이 모든 것을 다 마쳤다는 것이 뿌듯하고 기쁘다. 여기까지 배운 것 중 관련있는 내용의 수업 자료들을 추가적으로 학습하고 책에 나온 연습문제도 풀어보는 시간을 갖고자 한다. 요즘에는 학습일지를 짧게 쓰는 편이다. 이 시간도 아껴서 공부에 투자하고 싶기 때문이다.

이제 1주차의 마지막 학습이 될 것 같다. 이 내용은 강의가 조금 긴데 책을 먼저 학습할지 고민이 되었다.  어제 온라인 학습을 먼저 진행하다  책으로 학습을 먼저 하는 것이 좋을 것 같아 이후에 진행해본다. 여기서는 CSS의 기본 속성에 대해서 학습하게 된다.   이론 9 - CSS 주요 속성  특정 영역의 공간을 설정할 때 사용한다. 고정값이 px이고 가변값을 %로 표현한다.     여러 개의 폰트를 쓰는 것이 좋다. 굵기는 100 단위로 올라가며 사용한다.      작성 순서는 상관 없다.         실습 10 - CSS 주요 속성 1      기본 내용 실습해보기 배경과 글자색 변경하기   체크박스를 해제하면 해체된 결과값을 화면으로 확인할 수 있다. 하지만 이는 브라우저 상에서만 적용된다. ..

이제 7장의 마지막 이론 학습이 남아있다. 점심을 먹을 때도 지나서 배도 무척 고프지만 조금이라도 학습을 진행해보려고 한다.  강의에 좀 집중이 되지 않아서 대충 들어서 다시 들어야 할 것 같다.웹 사이트에서 자주 등장하는 메뉴 항목은 대부분 목록과 링크를 결합하여 만든다. 여기에 CSS를 적용하면 훨씬 멋진 사이트 메뉴가 되는 것이다. 이제 목록을 만드는 스타일 속성을 알아보기로 하자.   1. 목록 스타일 블릿 모양과 번호 스타일을 지정하는 list-style-type 속성순서 없는 목록의 경우 목록 앞에 다양한 블릿 모양을 넣을 수 있고, 순서 목록에서는 번호 스타일을 지정할 수 있다.    순서 없는 목록과 알파벳 대문자 목록 지정하기   원래는 불릿이 있었으나 없앴고, 두번째 단락에서는 1, 2..