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

다음으로는 쇼핑몰의 본문을 꾸며보기로 하자. 이 부분을 만들면 진짜 웹사이트처럼 보이는 것 같다.    실습 8 - 쇼핑몰 본문 영역 만들기  설명 들으며 하나씩 해결해보기이전에 작성했던 코드는 index.html에 들어있다. 1. 현재 코드 확인하며 살펴보기  article에 이미지와 타이틀 정보가 들어가있다.   2. index.css 파일을 열고 #main article 속성과 색상 코드 작성하기 이 부분까지가 지난번에 작성한 내용이고 그 다음 내용이 이번에 새로 작성한 부분이 된다.   각각의 article에 float left를 적용했다. 강사님이 설명하시는 내용이 많았지만 요즘 들어서는 무슨 말인지 잘 알아듣지 못하는 것들이 참 많다. 아마도 이 웹 사이트를 만드는 것부터인 것도 같고.. 많은..

2주차 수업의 마지막만을 남겨놓고 있다. 오늘 8교시 자율학습 시간에 이 부분을 진행하려고 했는데 파이썬 수업이 계속 있었다. 저녁을 먹기 전에 잠시 공부를 하려고 한다.이번에는 쇼핑몰을 만드는 이론과 실습이 진행된다.    이론 5 - 쇼핑몰 만들기 이런 식으로 쇼핑몰을 제작하게 될 것이다.    실습 7 - 쇼핑몰 상단 영역 만들기    기본 학습 실습해보기 1. 현재 만들어진 영역 살펴보기     2. 마진과 패딩 넣고 텍스트 기본값으로 초기화모든 html 태그에 마진과 패딩을 넣어준다. a 태그는 기본적으로 색이 파란색이고 밑줄이 들어가있는 css이다. 이 설정을 초기화시킨다.       3. ol, u의 불렛 설정 해지지금은 불렛이 없는 것처럼 보이지만 마진값이 0이기 때문이다. 이 설정을 제거..

어제 새벽 1시에 취침했는데 시계가 울리기 3분 전에 일어날 수 일어서 정말 감사했다. 이제 수업에 가기 전까지 3시간 정도 시간이 있다. 오늘 새벽에는 자바 공부에 집중해볼 생각이다. 오후에 자바 수업을 따라가려면 정말 열심히 공부해야 한다.엊그제 지난 일요일이었나 변수와 변수 이름을 짓는 법에 대해서 학습했었다. 오늘은 프로그래밍의 시작 단원으로서의 마지막인 연산자에 대해서 학습해보자.바로 수업 내용으로 들어가볼 것이다!  이론 4 - 연산자 로직의 시작은 계산이다. 처음에 2개의 변수를 할당한다. 전 시간에 분명한 변수의 이름을 지으라고 했는데, a와 b가 그런 변수 이름으로 적당할까?하지만 이 예시는 수식에 해당되고 수식에서는 a, b, x 등과 같은 변수를 잘 사용하는 편이다.3 / 2는 int..

이제 변수에 대해서 학습해보기로 하자. 이미 다 아는 것이지만 복습은 아무리 해도 지나치지 않는 것 같다. 변수와 함께 변수 이름을 짓는 방법에 대해서도 진행해볼 것이다.바로 본 학습에 들어가보자!   이론 2 - 변하는 수, 변수 변수는 변할 수 있는, 프로그래머가 조작할 수 있는 대상이다. 변수는 값을 담는 그릇이다.분명하고 누구나 이해할 수 있는 이름으로 잘 지어야 한다. 이름은 내 프로그램의 로직과 맥락에 따라 선택할 수 있다.  예시변수는 정수뿐 아니라 프로그램에서 필요로 하는 것을 담을 수 있다.        자료형과 이름을 주는 것을 선언이라고 한다. 이름만 있으면 컴퓨터는 변수를 어떻게 처리해야 할지 알 수가 없다. 그렇기에 자료의 형태를 주는 것이다.할당은 어떤 공간에 넣어주는 것을 말한..

이제 다시 공부를 시작해볼 것이다. 수업에 들어가기 앞서 자바를 간단히 소개해볼 것이다. 엘리스에 자바 1, 2 수업이 있어 이번주에 이 수업을 수료할 생각이다. 같은 반 학생들은 이 과정을 모두 미리 수강하였기에 자바에 대한 지식이 어느 정도 있는 상태였다.난 처음이니 잘 못할 수밖에 없다. 하지만 이 수업을 듣고 나면 자바가 어느새 친숙해지고 어렵지 않게 느껴질 것 같다. JAJA 1 수업에 대하여 수업 소개 커리큘럼  이 과정의 목표 수업을 들으면 좋은 사람   자바 언어 실습해보기 문장 출력해보기 파이썬과 달리 중괄호도 있다. C나 C++보다는 C#에 더 가까운 느낌이 들었다. String arg[]도 있고..  학습을 마치고여기까지가 OT 수업이었다. 오늘은 3시간 만에 자바 1주차 수업을 마치..

이번 단원에서 가장 중요한 부분이 될 것 같다. 강의 영상도 꽤 길지만 차근차근 학습하다보면 어느새 마쳐있을 것 같다. 이 부분까지만 공부하고 이제 인사교에 갈 준비를 하려고 한다.    이론 4 - 레이아웃에 영향을 미치는 속성 원래의 성격을 바꾸고 싶을 때 사용한다. inline-block은 공간의 크기와 상하배치 작업도 동시에 하고 싶을 때 사용한다.     왼쪽이나 오른쪽에서부터 정렬하고 싶을 때 사용한다.    float left와 right가 양 끝에 정렬된다.         clear는 float을 마지막으로 사용한 지점에 넣어준다. both는 왼쪽 오른쪽 양쪽에 대한 기능을 꺼주는 의미이다.     설정하지 않았는데도 미세한 공백이 생기는 이유는 원래 html 태그에 패딩값을 갖기 때문이다..

마진 병합 현상에 대해서 학습해보기로 하자.    이론 3 - 마진 병합 현상  box2는 bottom이 아니라 margin-top이다. 상식적으로 생각할 때는 250이 될 것 같지만 150으로 설정된다. 큰 값이 작은 값을 병합시키기 때문이다.        웹 사이트를 제작할 때 가장 많이 마주치는 문제이기도 하다.    실습 3 - 마진 병합 현상    기본 학습 실습해보기 1. 형제지간 마진병합 현상 동급인 관계가 형성되고 있다.   2. 형제 지간의 마진 병합 적용하기겹친 부분에 병합되어 마진이 적용된 것을 볼 수 있다. 큰 값인 150px로 적용되었다. 동일하다면 같은 값을 기준으로 병합된다.   3. 부모 자식간의 마진 병합 현상앞에서 살펴본 코드는 주석 처리를 하고 main과 article의..

블록과 인라인 요소에 대해서도 이론부터 학습을 진행해보기로 하자.    이론 2 - Block 요소와 Inline 요소     블록 요소에는 p, head, div, h1~h6까지 등이 존재한다.    대표적으로 , 태그가 존재한다. 상하 배치 작업을 사용할 수 없다.   실습 2 - Block 요소와 Inline 요소     기본 학습 실습해보기 블록과 인라인의 차이점 알아보기  블록은 세로로, 인라인은 가로로 배치됨을 알 수 있다.   p 태그와 a 태그의 차이점 각 성격별로 다르게 적용이 되었다.   상하배치 작업 알아보기 블록 요소는 마진이 적용되었지만 인라인에는 적용이 되지 않았다. 즉 인라인은 상하 배치 작업이 불가능하다는 것을 알 수 있다. 좌우는 가능하다.내가 사용하는 요소가 블록인지 인..

오늘 새벽 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를 이용해 ..