본문 바로가기

HTML5+CSS3

국내 반응형웹사이트 모음 삼성전기http://samsungsem.co.kr/index.jsp 현대자동차 기업문화홍보http://pr.hyundai.com/#/pages/main.aspx 네이버 뉴스http://m.sports.naver.com/ 웹액츄얼리http://www.webactually.co.kr/ http://transfinancieel.nl/ 신현석 개인사이트http://hyeonseok.com/ 제일제당http://www.cj.co.kr/#M1341377772867/ 널리http://html.nhncorp.com/ 더보기
CSS3 animation 속성 ㅇ CSS3의 애니메이션 관련 속성 애니메이션 속성 키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다 -webkit-animation-name 애니메이션의 이름.키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다 -webkit-animation-duration 애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다 (기본 값: 0),애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정 -webkit-animation-iteration-coun.. 더보기
HTML5 사라진태그 / 변경된 태그 HTML5 사라진태그 태그 속성 NATO, NASA, GUI등 영문 축약형 임베디드 애플릿 글꼴의 형태 글꼴의 크기 텍스트 가운데 정렬 디렉토리 리스트 글꼴 프레임 프레임부속태그 프레임부속태그 글꼴 취소 효과 글꼴 타자기 효과 글꼴 언더라인 효과 pre 태그와 동일 *frame 태그는 사라졌지만 iframe 태그는 여전히 사용할 수 있습니다. 변경된 태그 A변경 전변경 후href=”#”, href=”javascript:;”로 널링크 사용가능href 속성없이 사용하면 널링크로 사용address변경 전변경 후이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보 표시실제 우편물 주소를 표시b변경 전변경 후텍스트를 진하게텍스트를 진하게 표시할 뿐 아니라, 제품 소개서안의 제품명, 요약 문서 안의 키워드처럼 특.. 더보기
[HTML5 #2] HTML5 Markup (마크업) 태그설명 앞 포스팅에서는 전체적인 HTML5의 대해서 알아 보았다면 이제 좀더 디테일하게 과연 무엇들이 바뀌엇고 새롭게 생겨났는지 알아봅시다. 앞시간에 했어야 했는데.ㅎㅎ^^; 내가 지금 사용하고 있는 브라우저가 과연! html5를 얼마나 지원하는지 점수로 알아봅니다. html5test.com (당시300점만점) 이 자료를 조사할때가 2010년 경이 었는데요..형편없는 IE의 점수를 확인하 실 수 잇습니다.(버전은 몇인지 모르겠네요.) 요즘 다시 테스트를 해보면 굉장히 많이 향상되었다는것을 알 수 있습니다. 그만큼 서로 앞다투어서 html5를 지원하려고하고있고 그에따른 브라우저 업그레이드도 지속적으로 하고 있죵 좋은 도구를 사용하는 사람에게는 향상된 기능을 제공합니다. 여러분들도 좋은도구(좋은브라우저)를 사용하셔.. 더보기
[HTML5 #1] HTML5 소개 및 배경 그동안 수집했던 자료들을 정리하여 블로깅을 할 예정입니다. 총 30 개 정도의 포스트가 예상됩니다. 중단하지않고 끈기있게 할수 있기를..아잣^^ html5란? “웹을 둘러싼 난무한 비표준을 지양하고 지능적이고 실행가능한 웹 구현을 위해 탄생한 차세대 웹표준 기술이다.” 웹이 더 이상 문서공유나 문서 표현만을 위한것이 아니라 하나의 응용프로그램으로 진화하고 있다. HTML5는 HTML4.01 XHTML1.0에 대한 차세대 표준안이며, 현재 W3C를 주축으로 애플,모질라,구글,오페라,MS등 웹브라우저 벤더가 참여하고있는 산업표준이다. html5의목적 기존의 html 표준의 한계(기존의 시멘틱하지 못한 마크업)를 극복하는 차세대 웹표준이며, 리치웹 응용을 가능하게 한다. =>엑티브엑스,플래시등의 플러그인의 문.. 더보기
2011 여름캠핑을 위한 웹앱 2011 여름날 캠핑을 가기위해 3시간만에 만들 웹앱 일정 공유와 멤버 소개를 위한 웹앱 페이지를 3시간만에 만들어봤다. 전화가 바로 걸려서 서로 잘 모르는 멤버들끼리 비상연락망이 잘 되어서 유용했던 webapp. 바로가기(모바일에서 보면 더 좋음) http://carrot.abydos.kr/jqm/camping.html 더보기
[SVG 테스트]도라에몽 그리기 rect, circle, ellipse, line, path 를 최대한 사용해서 SVG 테스트하기위해 그려본 도라에몽이다. 하드코딩으로 그림을 그리다니.....물론 손쉬운 SVG editor가 있지만 .. 왜 도라에몽을 그려볼까 라고 생각했는지 모르지만 정말 잘선택한것 같다. 모든 shape를 다 적절히 써 볼 수 있는 캐릭터 였다.( 추가적으로 blur 속성도 적용해보았다. ) V 만약 브라우저가 SVG를 잘 지원한다면 아래 캡쳐 이미지처럼 보일것이다. IE9에서는 블러처리 부분이 아쉽다. 다음엔 Canvas로 그려볼까??.. 더보기
HTML5 예제30선 http://www.onextrapixel.com/2010/12/10/31-modern-html5-demos-that-can-beat-flash/ 플래쉬 없이도 더 우월한 HTML5 감상하세요 더보기
[아비도스_세미나] 2010 HTML5세미나_ 웹의 진화, 상상이상의 마력! Web tred html5 View more presentations from Yoojin Chung. ■ 세미나 내용 [1강] 현 웹트렌드에 맞춘 웹모바일 - 현시장의 웹모바일 성공사례 - 아이폰 VS 스마트폰 - 모바일 앱 VS 모바일 웹 - 앱, 트위터, 블로그, UCC를 통합하라 - 스마트폰, 트위터 중독의 즐거움 - 기업블로그, 기업트위터 사례 [2강] HTML5란 무엇인가 - 새로운 웹표준 HTML5의 새로운 요소 - 소셜 시대에 맞춘 web form 2.0 - web form 2.0에 맞춘 새로운 멀티미디어 - 새로운 멀티미디어에 맞춘 새로운 CSS3 [3강] 변화하는 CSS3의 요소 - 디자이너가 꼭 알아야 하는 CSS3 요소 - 새로운 웹폰트를 넘어선 SVG - 변화하는 CSS3 [마무리.. 더보기