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

이제 드디어 새로운 단원에 들어갔다. 먼저 글꼴 관련 스타일과 웹 폰트에 대해서 학습해보기로 하자. 오늘은 일기를 쓸 게 좀 많아서 아침 공부가 평소보다 많이 늦어졌다. 늦어도 오후 2시까지는 CSS 속성 관련 공부를 다 마치려고 한다. 텍스트  스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일과 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일이 있다.   " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   1. 글꼴을 지정하는 font-family 속성  태그를 비롯해 , 처럼 텍스트를 사용하는 요소에서 주로 사용한다.  웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 웹 문서에서 의도한 글꼴이 아닌 글꼴로 표시된다. 따라서 글꼴을 지정할 때는 만약 ..

CSS 수업도 3일에 걸쳐 진행되었다. 여기서부터는 따라갈 수 없는 내용들이 너무 많아서 그냥 필기만 했던 것 같다. 자바스크립트부터는 수업 속도도 너무 빨라서 필기도 잘 하지 않았지만 말이다.사실 책이나 엘리스 수업에서는 더 자세히 다루고 설명도 잘 해주시기에 수업을 따로 정리해야 할까 많은 고민이 되었다. 그래도 내가 공부한 것들을 기록으로 남기는 것이 나중을 위해서 좋을 것 같아 짧게라도 정리하기로 했다.  1. CSS 기초   무척 간단해보이지만 여기에는 많은 내용들이 빠져있다. 수업 시간에는 다루지 않은 CSS 개념들이 정말 많았다.    2. 폰트   아직 폰트 관련 학습은 진행하지 않았지만 비슷한 내용이라 묶어서 정리해본다. 이런 식으로 글꼴을 다양하게 변형시킬 수 있다.    3. 선택자 ..

이제 드디어 단원을 마무리할 때가 되었다. CSS 첫번째 단원 학습인데 아직 갈 길이 멀다. 하루종일 해도 한 단원도 끝내기 어려운데 CSS를 하루나 이틀만에 다 마치겠다고 계획했으니.. 무엇이든 너무 빨리 배우는 것보다 천천히 생각하고 고민하며 학습하는 것이 더 좋은 것 같다.   단원 한눈에 정리하기      연습문제 풀기문제 1번    문제로 제공된 코드는 이렇게 되어 있다. 이건 내부 스타일 시트를 적용한 것이고 이제 외부 스타일 시트를 연결해야 한다.   CSS 파일   HTML 파일   결과 화면    문제 2번       첫번째 도전  완전 반대로 적용이 되었다. 제목에 배경색이 적용되어야 하는데.. 다시 풀어보자!    두번째  도전   h1에 파란색 배경이 입혀지지 않아 고민을 정말 많이..

이제 두 단원만 학습하면 1주차 과정을 마치게 된다. 1주차 분량이 얼마나 많던지.. 그래도 이제 끝이 보인다. 바로 학습을 이어가도록 하자. 책으로만 하는 것보다 훨씬 더 많은 도움이 되고 있다.    이론 8 - 캐스케이딩              원본을 덮어씌울 때 캐스케이딩을 사용하곤 한다.    실습 9 - CSS 캐스케이딩    기본 실습해보기1. 순서에 의한 캐스케이딩  나중에 작성된 것이 우선하여 파란색으로 변경되었다.   2. 디테일에 따른 캐스케이딩  디테일하게 명시한 것이 우선순위가 더 먼저이다. 이때 이 둘의 순서를 바꾸어도 동일한 결과가 나타난다.    3. 선택자에 의한 캐스케이딩1) 클래스와 type 비교  클래스 선택자의 우선순위가 높기에 노란색 컬러가 적용되었다. 2) 클래스..

공부하는 게 정말 재미있다. 지난주에도 열심히 공부할걸 정말 많이 후회가 된다. 거의 2주내내 놀기만 했는데 그런 시간을 통해서 나를 돌아보며 마음을 새롭게 다질 수 있었다.이제 부모 자식 관계에 대해서 학습해볼 것이다. 책에서는 짧게 몇 줄로 나와있는 부분인데 더 깊게 다루어볼 수 있을 것 같다.  이론 7 - 부모 자식 관계  부모에게서 상속 받았으므로 자식도 모두 빨간색으로 표시된다. 하지만 자식인 자신이 우선하기 때문에 h1과 p가 각각 다른 색으로 바뀐다.     해더와 푸터에 동일한 태그를 사용했는데, 해더 안에만 h1, p 태그의 색상이 지정되기를 바랄 때 다음과 같이 할 수 있다. h1과 p가 누구의 자식인지 표시하기 위해 앞에 이름을 지정해준다.따라서 부모를 먼저 쓰고 자식을 그 다음에 ..

CSS 선택자에 대해서 조금 전에 책으로 학습했지만 좀더 심화적인 내용을 공부하며 복습해보기로 하자.   이론 6 - CSS 선택자    타입은 태그를, 클래스는 태그 별명을, ID는 태그의 이름이라고 보면 된다.               실습 7 - CSS 선택자CSS 선택자에는 3가지 유형이 있다.    기본 내용 실습해보기 1. Type 선택자 : 태그를 지정한다    2. Class 선택자 : 별명을 지정한다자신이 짓고 싶은 별명으로 만들어주면 된다.   3. ID 선택자 : 태그에 이름을 부여한다   본 문제 풀어보기 처음에 ID를 잘못 써서 다시 고쳐서 풀었다. ID에서 D는 소문자였다. 노란색이라서 잘 눈에 띄지 않았나보다. 책으로 공부할 때는 잘 알지 못했던 부분을 이 학습을 통해 확실히 ..

조금 생소하지만 캐스케이딩에서 대해서 학습해보기로 하자. CSS와 스타일 시트는 비슷해 보이지만 조금 차이가 있다. '스타일 시트'라는 용어 앞에 '캐서케이딩(cascading)'이라는 용어가 하나 더 붙은 것이 CSS이다. 이 CSS에 담긴 캐스케이딩은 무엇을 의미하고 어떤 역할을 하는지 학습해보겠다.   1. 캐스캐이딩의 의미CSS에서 'C'는 캐스캐이딩의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래 즉 계단식으로 적용된다는 의미로 사용한다. CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.     2. 스타일 우선순위우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말한다. 우선 순위는 다음 3가지 개념에 따라 지정된다.   스타일의 ..

원래 새벽에 하던 수학 학습일지 쓰는 일을 오늘은 아침에 해본다. 그냥 저녁이나 내일 할지 고민이 되었으나 아침에 수학 공부를 하고 나면 머리가 맑아질 것 같아 바쁜 시간을 쪼개서 하기로 했다.오늘까지 해서 최대공약수와 최소공배수 단원을 마치게 된다. 수학 학습 앱으로 올해 2월에 1년 결제해놓은 게 있어서 그무렵에 풀기도 했는데, 그 문제는 지금 푸는 문제집보다 난이도가 훨씬 낮은 편이다.그래도 기본 개념과 응용 문제를 익히기에 참 괜찮은 앱이라고 생각한다. 지금은 여기까지는 공부할 시간이 없는 것 같아 넘어가지만, 다음에 시간이 되면 이것까지 해볼 생각이다.오늘은 딱히 개념 학습은 없고 바로 문제로 들어가도 될 것 같다.   우리의 인생에서 최대공약수와 최소공배수한때 이 개념에 매료가 되어 내 인생의..

오늘 정리해볼 문제는 어제에 이어 최대공약수와 최소공배수 단원이다. STEP 3의 문제를 풀어볼 예정인데 맞은 문제보다 틀린 문제가 훨씬 더 많기도 하다.어제 풀고 싶었지만 어려워서 풀지 못했던 문제부터 시작해보려고 한다.이 단원은 아마도 내일까지 학습해야 할 것 같다.   오늘의 수학 개념 정리 🥞 최대공약수와 최소공배수의 관계어제 잠깐 이야기했었는데, 최대공약수와 최소공배수를 곱한 값은 두 수의 곱과 같다. 이 공식은 자주 사용하니 외워두는 것이 좋겠다.그리고 어떻게 해서 이 공식이 나오는지도 알면 문제를 활용하는데 도움이 된다.    🥞 최대공약수 활용 문제일정한 양을 가능한 많이 나누어주는 문제직사각형을 가장 큰 정사각형 또는 가장 적은 수의 정사각형 조각으로 빈틈없이 채우는 문제몇 개의 자연..

어제 저녁에 수학공부일지를 올리지 않고 취침해서 오늘은 아침 시간에 올려보기로 했다. 사실 어제도 새벽에 수학공부를 하고 소인수분해 학습일지를 올렸다. 따로 시간을 두지 않고 새벽이든 저녁이든 하고 싶을 때 하면 될 것 같다.이제부터 새로운 단원에 들어가본다. 최대공약수와 최소공배수 단원인데 여기서도 활용문제만 들어가면 왜렇게 어려운지.. 나의 취약점이 보였다.우선 개념부터 정리해보자!   🍒 오늘의 수학 개념 정리 최대공약수 구하기       공약수란 두 개 이상의 자연수 중에서 공통인 약수를 말한다. 그러니까 최대공약수는 공약수 중에서 가장 큰 수이다.   최대공약수의 성질두 개 이상의 자연수의 공약수는 그 수들의 최대공약수의 약수이다.18과 24의 최대공약수는 6이므로, 18과 24의 공약수는 6..