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

이어서 컬러 속성에 대해서 학습을 진행해본다. 앞서 색을 지정하는 4가지 방식에 대해서 배울 수 있었다. 이 내용은 CSS뿐 아니라 포토샵이나 다른 작업을 할 때도 필요하니 잘 숙지하기로 하자.   텍스트를 정렬하는 text-align 속성왼쪽 · 오른쪽 · 양쪽 · 가운데 정렬 등을 사용할 수 있다.   텍스트 정렬하기  정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본이다. 왼쪽 정렬에서는 오른쪽에 여백이 생기지만, 양쪽 정렬에서는 여백이 생기지 않는다는 차이가 있다.    줄 간격을 조절하는 line-height 속성줄 간격을 원하는 만큼 조절할 수 있다. 줄 간격 24px로 지정하기p { font-size: 12px; line-height: 24px; }p { font-size: 12px; lin..

앞에서 글꼴 관련 스타일을 배웠으니 이번에는 텍스트 관련 스타일에 대해서 학습해볼 것이다. 글꼴과 텍스트 스타일은 비슷해보이지만 다른 모양이다. 글꼴이 폰트와 관련된 내용이었다면 텍스트 스타일은 글자와 단어, 글자로 이루어진 문단에서 사용하는 스타일이다.    1. 글자색을 지정하는 color 속성웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때는 color 속성을 사용한다.  color:   1) 16진수로 표현하는 방법#ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것이다. 6자리의 16진수는 앞에서부터 묶어 #RRGGBB로 표시한다. RR 자리에는 빨간색, GG 자리에는 초록색, BB 자리에는 파란색의 양을 표시한다. 각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해..

첫 번째 단원을 학습하는데 시간이 너무 많이 걸려서 이 부분은 최대한 빠르게 진행해보려고 한다. 앞에서 font-family 속성으로 글꼴을 지정할 때 글꼴이 아닌 경우를 대비해 다른 글꼴을 지정했다. 하지만 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다.    1. 웹 폰트란?사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려면 어떻게 해야 할까? 이전에는 포토샵 같은 프로그램에서 원하는 글꼴을 이용해 텍스트를 이미지로 저장한 뒤 웹 문서에 넣어 사용했다. 하지만 CSS3가 웹 폰트를 표준으로 채택한 덕분에 이런 번거로운 작업은 하지 않아도 된다.웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다. 즉, 기존에 가지고 있던 웹 폰트를 ..

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

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가지 개념에 따라 지정된다.     스타일..