css에는 마진 상쇄(margin collapsing) 혹은 마진 겹침(margin overlap)라는 현상이 있습니다. 탑과 바텀에 마진이 있는 경우 큰 쪽 한 개만 적용되는 현상을 말합니다. 아래위 마진이 겹쳐 있습니다. 1. 현상 확인 아래 코드를 실행해봅시다. See the Pen CSS3 Margin collapsing (margin overlap ) - Issue Check by DangGun (@danggun) on CodePen. 탑 마진(margin-top)을 20px주고 바텀마진을(margin-bottom) 20px를 줬습니다. 그런데 결과물은 20px 입니다, 이것을 마진 상쇄(margin collapsing), 마진 겹침(margin overlap) 현상이라고 합니다. 2. 현상의 ..

예전에 C#과 다이랙트3d를 이용하여 2d 게임 프레임웍을 만든적이 있는데 거의 그 설계 그대로 자바스크립트로 구현하는 프로젝트 입니다. HTML5의 'canvas'태그를 이용합니다. 아직은 공개버전아니기 때문에 자세한 설명은 생략합니다 ㅎㅎㅎ 게임을 만들때 필요한 기능들을 미리 구현한 라이브러리라고 생각하시면 됩니다. 슬슬 문서화를 준비하고 있습니다. 지금 이 프레임웍을 이용하여 게임하나를 만들고 있는데....확실히 편하네요 ㅎㅎㅎ 다른 분들이 만든 것들에 비하면 형편없지만 말이죠;;;; 2013.10.31 - 0.61 TSF_Draw_Array 추가 : 드로우 메니저에서 배열로 관리되는 드로우객체를 출력할 수 있게 되었습니다. TSF_Draw_Sprite : 알파값이 무시되는 버그 수정

예전에 C#과 다이랙트3d를 이용하여 2d 게임 프레임웍을 만든적이 있는데 거의 그 설계 그대로 자바스크립트로 구현하는 프로젝트 입니다. HTML5의 'canvas'태그를 이용합니다. 아직은 공개버전아니기 때문에 자세한 설명은 생략합니다 ㅎㅎㅎ 게임을 만들때 필요한 기능들을 미리 구현한 라이브러리라고 생각하시면 됩니다. 2013.10.21 - 0.6 TSF_Resource : 리소스 처리 구조 변경 TSF_Draw : 코드 구조 개선(TSF_Draw_Image, TSF_Draw_Sprite, TSF_Draw_Text, TSF_Animation 로 분리 ) - 출력 오브젝트에 알파값을 적용할수 있게 구조가 변경되었습니다. 스프라이트 : 스프라이트 이미지 처리를 위한 'TSF_Draw_Sprite'추가 TS..

HTML5용 게임 프레임웍입니다. 예전에 C#과 다이랙트3d를 이용하여 2d 게임 프레임웍을 만든적이 있는데 거의 그 설계 그대로 자바스크립트로 구현하는 프로젝트 입니다. HTML5의 'canvas'태그를 이용합니다. 아직은 공개버전아니기 때문에 자세한 설명은 생략합니다 ㅎㅎㅎ 게임을 만들때 필요한 기능들을 미리 구현한 라이브러리라고 생각하시면 됩니다. 테스트용 게임(새창) 2013.09.30 - 0.5 게임루프 : 리소스 관리 : 리소스를 매모리에 적재하고 관리하는 기능입니다. 리소스를 그룹단위로 관리 할수 있습니다. 리소스 로딩도 처리합니다. 씬관리 : 게임의 장면을 관리하는 단위입니다. 그리기 관리 : 이미지를 계층으로 나누어 출력하는 기능입니다. 소리 관리 : 소리를 관리합니다. 타이머 관리 : ..

html5로 작성된 코드를 보다가 table 코드에서 ""를 보았습니다. 1.테이블(table)에 추가된 th th가 무엇인가 해서 찾아보니 테이블에서 헤더 역활을 하는 td의 경우 th로 작성하고 합니다. (참고 : W3C HTML5 - th element) 일반적으로 테이블은 데이터를 나열하는 용도로 사용합니다. 그렇기 때문에 헤더는 거의 매번 필요하죠. 하지만 이전까지는 헤더를 구분하기위해서 따로 스타일을 적용해야 했습니다. 스타일 시트에서 th를 작성하면 따로 스타일을 적용할 필요가 없습니다. 2.이전 방식과 비교 이전에는 헤더로 사용할 td나 tr에 직접 스타일을 지정했습니다. 이렇게 하면 table와 tr에 스타일을 지정해주어야 한다는 단점이 잇습니다. 하지만 th를 이용하면 이렇게 테이블 테..

구버전 익스플로러(6,7,8)에서 HTML5를 표시해주는 크롬 프레임입니다. 참고 : 구글 - 크롬 프레임 제목을 이렇게 달아놨지만 사실 특정조건이 맞으면 익스플로러엔진을 크롬엔진으로 바꿔주는 역활을 합니다. 익스플로러의 속도 자체를 늘려주기 때문에 은근이 설치해두신 분들이 있긴 하더군요 ㅡ.-; 설치가 제대로 됬다면 HTML5 테스트 페이지(클릭)을 눌러 테스트 해보세요. (참고 : 미물님의 블로그 - Google Chrome Frame - Hidden Active-X) 페이지가 나온다면 정상적으로 설치가 된것입니다. 페이지가 뜨지 않는 다면 브라우저를 껐다 켜보거나 재부팅을 하시면 됩니다. 이 플러그인을 활성화 시키기 위해선 개발자가 직접 페이지에 다음과 같은 코드를 넣어야 합니다. 해드에 다음 메타..

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 이번 포스팅에선 정말 독특한 기능인 캔버스입니다. 캔버스 영역에 자바스크립을 이용하여 선이나 도형등을 그릴수 있습니다, 윈폼으로 치자면 드로우기능인데 태그로는 지원이 안되는듯 하네요. W3C의 규격을 보면 아직 진행중이라고 뜨는데......이게 표준이 진행중이라는건지 설명페이지가 진행중이라는건지 모르..

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 기존에 사용하던 컨트롤들(레이블(label), 인풋(input), 서브밋(submit) 등등)의 기능도 살짝쿵 업글되고 CSS3도 이쁘게 바꼈습니다. 1.기존 컨트롤들일단 기존 컨트롤들을 추가해 봅시다. Name: E-mail: Phone: Callback on: Priority: 여기서 잘 보아야 ..

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 HTML5에서 눈에 띄게 달라진것들중 하나가 비디오재생과 같은 멀티미디어 기능이 태그로 가능하다는 점입니다. 태그 한줄로 재생되는 동영상 1. 지원되는 브라우저기본적으로 HTML5를 지원하면 동영상 태그는 먹히지만 재생될지는 알수 없습니다. 왜냐하면 익스플로러와 사파리는 H.264표준만 지원하기 때문..

IBM에서 제공하는 강좌를 보고 정리한 내용입니다. IBM - HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 글순서 1.자주쓰는 태그 정리 [HTML5] 1-1. 문서에서 자주쓰이는 태그 정리 [HTML5] 1-2. 문서에서 자주쓰이는 스타일 정리(CSS) [HTML5] 2. 동영상 재생 [HTML5] 3. 기존 컨트롤들의 새기능과 새 스타일 적용 [HTML5] 4. 캔버스를 이용하여 이미지그리기 HTML코드는 이전글을 참고 하세요. 샘플코드를 실행하면 다음과 같이 표시 됩니다. 1.전체 선택자(Universal selector)문서의 전체를 나타네는 별(*)입니다. (참고 : W3C - 6.2. Universal selector) * { font-family: Lucida Sans, Aria..