웹표준교과서

이미지출처 : www.wisia.com

마크업을 공부할땐 항상 웹표준 교과서와 W3C 홈페이지를 이용한다. 뭐 앞으론 HTML5를 많이 볼테지만 그동안 많이 참고가 되었던 책이다. 이 책은 기본에 충실하면서도 왠만한 내용은 다 들어있다고 생각한다. 한권 가져다 놓으면 나름 든든한 책이다. 이 책 역시 처음부터 쭉 보기보단 필요한 부분을 찾아서 보는 용도가 좋다고 생각한다.

자바스크립트 완벽가이드

이미지출처 : jinaida.egloos.com

자바스크립트에 대한 아주 유명한 책이다. 흔히들 괜찮은 자바스크립트 책을 추천해달라고 하면 권하는 책이기도 하다. 이 책은 처음부터 끝까지 전부 보진 않았지만 꾸준히 보는 책이다. 매번 볼때마다 다른 느낌인건 실력이 올라가고 있기 때문인걸까? 여하튼 자바스크립트를 공부하기 위해선 필수라고 생각한다. 내 생각에 이 책은 레퍼런스적인 성격보다도 기본에 충실하게 설명한다고 느껴진다.

CSS3 embossing, highlight, gradient effect

text embossing effect

<주요 속성 요약>

#test1 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #b38f00;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; 

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

}

<속성 설명 >

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

box highlight effect

<주요 속성 요약>

#test2 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #bbb;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

   box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -moz-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -webkit-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

}

<속성 설명>

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

linear gradient effect

<주요 속성 요약>

test3 {                    

     background: -moz-linear-gradient(90deg, #1a1a1a, #808080);

     background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#1a1a1a));

}

<속성 설명 -moz-linear-gradient>

- 첫번째 : 각도. 0deg 왼쪽에서 시작, 90deg 아래에서 시작

- 두번째 : 시작 색     - 세번째 : 끝나는 색

<속성 설명 -webkit-gradient>

- 첫번째 : 타입 (radial or linear)

- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑

- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위

- 네번째 : 시작 색     - 다섯째 : 끝나는 색

HTML5 meta Tag

1. 문서 설명 : 검색엔진에 좀 더 노출 시킬 수 있다.

<meta name="description" content="HTML5 Tutorial" />

1. 문서 키워드 : 검색엔진에 좀 더 노출 시킬 수 있다.

<meta name="keywords" content="HTML5,CSS3,JavaScript" />

1. 문서 작성자를 정의

<meta name="author" content="Jace Park" />

1. 문서 수정자와 날짜 정의

<meta name="revised" content="Jace Park, 07/06/2010" />

1. 문자인코딩 정의

<meta charset="cp949" />

1. 페이지 리다이렉트 (5초 뒤, 해당url로 이동한다.)

<meta http-equiv="refresh" content="5;url=http://www.abc.com/" />

1. 페이지 리플레시 (5초 간격)

<meta http-equiv="refresh" content="5" />

1. 문서 편집기 정의

<meta name="generator" content="Gvim 7.2">

1. 어플리케이션 이름 정의: 만일 어플리케이션 이름이 없다면 정의하지 안아도 좋다.

<meta name="APPLICATION-NAME" content="Long headed application">

1. 웹크롤러에 노출여부 결정 (noindex - 문서 긁어가지 않음, nofollow - 문서 내 링크 긁어가지 않음)

<meta name="robots" content="noindex,follow" />

JavaScript - Zoo Keeper

zookeeper_1.zip

Javascript로 Zoo Keeper를 만들었습니다.

더 깨질 블럭이 없는 경우 판을 재배치하는 기능과

동시에 여러개 블럭을 움직였을 때의 경우가 구현이 안되었습니다.
그 밖에 미쳐 발견하지 못한 버그가 있을 수 있겠지만
일단은 프로토타입 거의 완성입니다!

물론 css로 눈속임을 했고, 기능이 완벽하지 않지만 뿌듯하네요.

이번 프로젝트를 통해서 게임을 만들기 위해서 어떤 고민을 해야하는지를 꺠달았습니다.

향후 구현하지 못한 부분을 완성시키고,

html5, css3, javascript UI library(스크립타큘러스 또는 제이쿼리 UI 등등)를 이용해서
좀더 화려한 게임으로 업그레이드 시키고 싶네요.