HTML5 / CSS3 시작하기 : 팁, 쇼케이스 및 코딩 샘플

HTML5는 점점 더 인기를 얻고 있으며 전체 웹 인터페이스를 진화시키기 시작했습니다. 일부 웹 개발자조차도 HTM5 요소와 시각 효과가 Flash와 비슷하다고 인용했습니다. 새로운 스크립팅 스타일은 이해하기 쉽고 웹 인터페이스를 향상시키는 기능은 무한합니다. 어쨌든이 HTML5가 얼마나 흥미로운가요?


이 기사는 독자에게 HTML5에 대해 알아야 할 내용과 가장 중요한 팁에 대한 통찰력을 제공하기 위해 작성되었습니다. & 가볍고 매력적인 대화식 HTML5 페이지를 만드는 방법.

1. HTML5의 기본

HTML5

HTML5에서이 주제를 더 시작하기 전에 먼저 현재 브라우저를 확인하는 것이 좋습니다. 많은 브라우저가 여전히 개발 모드에 있으므로 (HTML5를 수용하도록 향상) 여기에 언급 된 일부 기능은 지원되지 않을 수 있습니다.

다음을 확인하는 간단한 팁이 있습니다. 브라우저 호환성.

특정 브라우저의 한계를 더 이해하려면 다음을 참조하십시오. 여기.

2. 텍스트 효과 – HTML5에서 그림자 및 고급 텍스트 효과 추가

HTML5의 텍스트 효과

텍스트의 기본 그림자 효과

이것은 일반적인 헤드 라인을 멋진 텍스트로 변환하는 가장 간단한 문자열 코드입니다. 그림자 효과를 과소 평가하지 마십시오. 이 비슷한 모양의 효과를 만들려면 웹 디자이너가 Photoshop에서 여러 단계의 이미지 편집 단계를 거쳐야합니다. 이제는 한 줄의 코드 만 있으면됩니다. 그림자 거리, 색상을 마음의 내용으로 바꿀 수 있습니다.

코딩 샘플

# 그림자 h1 {
텍스트 그림자 : 0px 1px 1px rgba (0,0,0, .2);
}

미리 불 같은 효과의 텍스트

다음 팁은 HTML5 코딩을 더 멋진 텍스트로 조정하는 방법을 보여줍니다. 충분히 실험하거나 다른 예를 찾으면 효과를 사용자 정의 할 수있는 가능성은 무한합니다. 참고 :이 예제는 이미지 편집 소프트웨어로 작성되지 않았습니다. HTML5의 단순한 코드.

코딩 샘플

#fire h1 {
텍스트 정렬 : 가운데;
여백 : 200px 자동;
글꼴 모음 : "리그-고딕", 택배원;
글꼴 크기 : 200px; 텍스트 변환 : 대문자;
색상 : #fff;
텍스트 그림자 : 00 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0-80px 70px # 973716, 10px -90px 80px # 451b0e;
}

다른 좋은 예 : http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5의 둥근 모서리

HTML5의 둥근 모서리

CSS를 도입 한 이후로 HTML5에서 웹 페이지 레이아웃을 스타일링하는 것은 결코 쉬운 일이 아닙니다. 이제 레이아웃 요소의 모서리를 둥글게 만들 수도 있습니다! 이것을 상상해보십시오. 더 이상 슬라이싱 배경 이미지, 더 이상 지저분한 그림 조각이 없습니다. 이것은 웹 디자이너에게 많은 응원을 가져다 줄 것입니다..

코딩 샘플

div {
경계 : 2px 단색 # 434343;
패딩 : 10px;
배경 : # e3e3e3;
-모즈 경계 반경 : 10px;
-웹킷 테두리 반경 : 10px;
너비 : 500px;
}

참고 : Moz는 Mozilla를 의미하며 웹킷은 Safari 및 Chrome 용입니다..

다른 좋은 예 : http://fjd1.com/roundcorner.html

4. HTML5의 SVG (Scalable Vector Graphic)

HTML 5 튜토리얼, 가이드 및 샘플

Scalable Vector Graphic 또는 일반적으로 (SVG)는 XML 텍스트 파일로 정의 된 2 차원 벡터 그래픽입니다. 즉, DNA는 XML 텍스트 파일을 기반으로하기 때문에 웹 플랫폼에서 작성하거나 편집 할 수 있습니다. 또한 쉽게 확장 할 수 있으며 검색 엔진은 이미지를 읽고 이해할 수 있습니다..

샘플 코드

다른 좋은 예 :

5. HTML5에 동영상 파일 포함

HTML5의 비디오

HTML5의 기능을 보여주는 또 다른 흥미로운 부분이 있습니다. 대부분의 온라인 비디오는 일반적으로 Flash 형태로 웹 사용자에게 제공됩니다. 최근까지 HTML5에 비디오를 포함하면 속도가 느려지고 (YouTube가 좋은 예) Flash의 매력이 서서히 떨어지고 있습니다. 왜 이렇게이다? 모바일 사용자. iPhone 및 Android 휴대폰에서 비디오를 재생할 수있게하려면 HTML5를 사용하는 것이 좋습니다..

비디오를 임베드하려면 현재 다른 브라우저에서 지원되는 3 가지 형식이 있어야합니다. .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

샘플 코드

다른 좋은 예 : https://www.html5rocks.com/en/tutorials/video/basics/

6. HTML5에서 슬라이드 프리젠 테이션

HTML 5 튜토리얼, 가이드 및 샘플

Powerpoint는 슬라이드 프레젠테이션과 관련된 동의어 이름입니다. 그러나 웹 사용자를위한 슬라이드를 만들 수있는 오프라인 프레젠테이션으로 자신을 제한해야하는 이유는 무엇입니까? HTML5는 전환 및 탐색 메뉴가 포함 된 훨씬 강력한 프레젠테이션 슬라이드를 만드는 데 도움이되었습니다. 가장 좋은 점은 프레젠테이션에 3D 변형을 적용 할 수도 있다는 것입니다.

샘플 코드

사전 {
전이 : 모두 1 명 완화;
}

프리 : 호버 {
배경색 : # F2F5FE;
경계색 : 검은 색;
}

div {
변환 : rotate3d (1,1,0, 45deg);
}

다른 좋은 예 :

7. HTML5에서 편집 가능한 내용

HTML 5 튜토리얼, 가이드 및 샘플

정적 텍스트는 유연성과 역 동성이 세계를 지배하는 시대에 너무 구식입니다. HTML5에서는 텍스트 편집기없이 웹 사용자가 편집 할 수있는 텍스트 영역을 정의 할 수 있습니다..

샘플 코드

이 컨텐츠는 편집 가능합니다!

다른 좋은 예 : http://html5demos.com/contenteditable

8. HTML5의 대화식 웹 캔버스

HTML 5 튜토리얼, 가이드 및 샘플

HTML5의 SVG 외에도 캔버스는 웹에서 다음으로 일어난 최고의 일입니다. Canvas를 사용하면 Flash의 도움없이 상호 작용을 전체 수준으로 끌어 올릴 수있는 2 차원 모양 렌더링.

그럼에도 불구하고 놀라운 애니메이션 상호 작용을 만드는 HTML5의 간단한 코딩은 여기에서 언급 할 가치가 있습니다..

다른 좋은 예 : http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. HTML5에서 드래그 앤 드롭

HTML 5 튜토리얼, 가이드 및 샘플

끌어서 놓기 (DnD라고도 함)는 HTML5에서 사용할 수있는 또 다른 멋진 기능입니다. Google의 Gmail에서 구현하는 것이 좋은 예입니다. HTML5 지원 브라우저를 사용하는 경우 컴퓨터에서 파일을 끌어서 작성 메시지 창에 놓기 만하면됩니다. 첨부 파일로 자동 추가됩니다. 얼마나 멋진가요?

샘플 코드 (네이티브 DnD)

document.addEventListener ( ‘dragstart’, 함수 (event) {
event.dataTransfer.setData ( ‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘복사’;
}, 거짓);

다른 좋은 예 : http://www.html5rocks.com/en/tutorials/dnd/basics/

10. HTML5의 순수 CSS 데이터 차트

HTML 5 튜토리얼, 가이드 및 샘플

HTML5 이전에는 HTML 코딩 만 사용하여 프레젠테이션 가능한 차트를 만드는 것도 불가능합니다. 또한 데이터 값을 변경하고 차트에 반영하는 것은 간단한 작업이 아닙니다. 다시 한 번 HTML5를 구출했습니다. CSS와 함께 Microsoft Excel을 수치스럽게 만드는 매우 아름다운 차트를 만들 수 있습니다. 코드는 간단하며 차트에 완벽한 색상과 효과를 사용자 정의하는 데 시간을 소비하기 만하면됩니다..

다른 좋은 예 : http://cssglobe.com/pure-css-data-chart/

HTML 5를 충분히 얻을 수 없습니다?

우리도 그래! 주제에 대한 자세한 내용은 확인하십시오..

* HTML 5 웹 사이트의 30 가지 멋진 예
* HTML 5 시작하기
* 2012 년 HTML 5 자습서를 읽어야합니다.
* HTML 5 배우기 : 10 교훈을 읽어야합니다

또한 확인하십시오  Robin Nixon의 HTML 5 충돌 과정. Robin Nixon은 PHP, MySQL 및 JavaScript 학습의 저자입니다. 이 과정은 기본 HTML 코딩, 드로잉을위한 HTML5 캔버스, 지리적 위치, 로컬 스토리지 및 HTML5 오디오 및 비디오를 포함하여 초보자가 HTML5에서 알아야 할 거의 모든 것을 다룹니다..

원본 기사는 처음에 게시됩니다. WHSR 블로그; 이제 BuildThis.io 직원이 관리하고 업데이트합니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map