스타일이란 HTML 문서에서 자주 사용되는 글꼴, 색상, 정렬 방식 등의 유형을 매번 반복해서 지정할 필요 없이 미리 정의하여 필요할 때마다 가져다 사용할 수 있도록 하는 것을 말합니다. 이러한 스타일을 제어할 수 있도록 웹 문서 한 부분 혹은 별도의 파일로 스타일의 정보만 모아 둔 것을 스타일 시트라고 합니다. 스타일 시트가 등장하기 전에는 HTML 문서의 여백이나 텍스트의 줄 간격 테두리의 장식등을 만들 수 없었으나 스타일 시트가 생기면서 텍스트 외에 이미지, 박스 등에 다양한 스타일을 적용할 수 있게 되었습니다.
클라우드형 애플리케이션 개발자는 게임기나 스마트폰, 울트라 모바일 PC, 넷북, 노트북 컴퓨터, 데스크톱 컴퓨터 같은 단말기는 물론, 앞으로 등장할 각종 단말기에 대응하는 서비스를 제공해야 할 것이다
교육문의 및 신청
2012.9.10(월) 2hr
장소 : 토즈 (스터디 모임 공간)
레슨 : 레슨올(1대1 레슨), 레슨비 3만원/1hr, 6만원/3hr)
최신동향
최신 버전
내 브라우저는 HTML5를 얼마나 지원할까 - THE HTML5 TEST
HTML5의 표준 규약이 완전히 정립되지 않은 상태지만 브라우저 업체에서는 되도록 HTML5를 지원하려고 하고
있습니다. 지금으로선 브라우저마다 HTML5를 지원하는 내용이나 정도가 다른데, 이 사이트에 접속해 보면
현재 브라우저가 HTML5를 얼마나 지원하는지 300점 만점 기준으로 점수를 매겨 보여줍니다.또한 HTML5 각
요소에 대해서도 지원하는지 안 하는지를 정확하게 알려줍니다.
HTML5의 전반적인 예제를 정리해 놓은 사이트 - HTML5 ROCKS
크롬 브라우저를 만든 구글에서 HTML5를 소개하고 개발자들에게 도움을 주기 위해 만든 사이트입니다.
Presentation 메뉴에서는 HTML5를 정리해 놓은 프리젠테이션을 볼 수 있고,
Playground에서는 HTML5의 주요 특징들을 각각 소스와 결과 화면으로 보여줍니다.
Studio 메뉴를 이용하면 HTML5를 이용해 이런 게 가능할까 싶은 멋진 예제들을 만날 수 있습니다.
HTML5를 공부하고 싶다는 생각을 갖게 해주는 곳입니다.
HTML5로 만든 사이트 모음
제작자가 밝힌 이 사이트의 제작 목적은 HTML5를 사용한 사이트를 보여줌으로서 많은 사람들이 사이트를 만들 때
HTML5 표준을 따르고 있는지 알리고, 더불어 어떤 방법을 사용하고 있는지 사람들이 살펴볼 수 있게 한다는 것.
HTML5로 만든 베스트 사이트 소개
HTML5로 만들어진 사이트를 모아서 보여주는 사이트. 사이트들을 카테고리별로 구분해 놓고 다시 주제별로
구분해 놓았기 때문에 자신이 관심 있는 분야의 사이트만 찾아서 볼 수도 있고, 오늘 등록된 사이트부터 최근
석 달 안에 등록된 사이트까지 등록된 시간대별로 구분해서 볼 수도 있습니다.
동영상 콘트롤러를 지원하는 HTML5를 체험할 수 있는 사이트
플레시플레이어 없이도 웹 페이지 안에서 자연스럽게 동영상이 재생되는 사이트. 필요할 경우 콘트롤러를
동영상에 함께 표시할 수 있어서 동영상을 자유롭게 제어할 수 있습니다.
HTML5를 이용해 사용자 움직임에 반응하는 동영상을 적용한 사이트
HTML5의 캔버스(Canvas)요소를 함께 사용할 경우 동영상에 사용자 동작을 추가해서 좀 더 재미있는 효과를
만들수도 있음. 본 사이트는 동영상 화면을 클릭할 때 마다 화면이 부서졌다가 다시 원래 화면으로 되돌아 갑니다.
인터넷 익스플로러 테스트 드라이브
마이크로소프트에서도 IE9 출시와 함께 HTML5를 지원하기 시작했습니다.IE9 이상에서 지원하는 다양한 HTML5 데모
애플리케이션과 웹 페이지를 만날 수 있습니다. 개발자를 위한 다양한 자료들도 함께 볼 수 있어 HTML5를 공부하는
사람들에게 유용한 사이트 입니다.
사파리에서 지원하는 HTML5 데모 사이트- Safari Technology Demos
애플에서 제공하는 HTML5 데모 사이트로, HTML5와 CSS3, 자바스크립트를 이용한 화려하고 멋진 예제들이 많습니다.
이곳의 예제들을 보면 HTML5의 매력에 빠져들지 않을 수 없을 것입니다. 다만, 다른 브라우저에서는 볼 수 없고
애플의 사파리 브라우저에서만 확인할 수 있습니다.
테두리 이미지 코드를 만들어주는 - border-image generator
테두리 이미지를 사용하면 화면을 좀더 멋스럽게 꾸밀 수 있습니다. 하지만 처음에 그 기능을 익히기가 쉽지 않습니다.
테두리에 이미지를 사용하고 싶지만 사용하기 어려워 망설이고 있었다면 border-image generator 사이트를 이용해
보세요. 이미지 주소를 지정한 후 슬라이드를 이용해 네 방향의 옵션만 지정하면 preview란에 자동으로 소스가
만들어집니다. 단, 테두리에 사용할 이미지는 웹에 올려진 이미지여야 합니다.
여러 브라우저에서 사용되는 CSS3 코드를 보여주는 - CSS 3.0 MAKER
CSS3 소스 코드를 만들 때 가장 신경 쓰이는 것이 각 브라우저별로 다르게 사용하는 속성들입니다. CSS 3.0 MAKER를
이용하면 크로스 브라우저 소스 코드를 손쉽게 만들 수 있습니다. CSS3 Style 목록에서 원하는 스타일과 각 옵션들을
선택하면 미리보기와 함께 원하는 소스 코드를 얻을 수 있습니다.