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

이제 마진에 대한 학습을 진행해본다. 두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 한다. 마진과 패딩은 웹 문서에서 여러가지 요소를 배치할 때 자주 쓰이는 속성이므로 꼭 기억해두어야 한다.바로 학습을 진행해본다.  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..

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

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

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