HTML5 시작하기

HTML5 시작하기
이 가이드는 무료 PDF로 다운로드할 수 있습니다. 지금 이 파일을 다운로드하십시오 . 자유롭게 복사하여 친구 및 가족과 공유하십시오.

목차

§1. 소개





§2 – 시맨틱 마크업



§3–양식





§4 – 중간

§5–CSS3 변환 및 애니메이션



§6 – 자바스크립트로 충분하다

§7–크리에이티브 캔버스



§8–다음은?

1. 소개

HTML5에 대해 들어본 적이 있을 것입니다. 모두가 그것을 사용하고 있습니다. 사람들이 Flash와 Shockwave를 사용하지 않고도 풍부하고 매력적인 웹 페이지를 만들 수 있게 해주는 인터넷의 구세주로 알려지고 있습니다.



그러나 실제로 무엇입니까?

글쎄요, 대답하기 쉬운 질문은 아닙니다. 이 HTML5 자습서에서는 몇 가지 답변을 제공하려고 합니다. HTML5는 정말 다양한 그룹을 설명하는 데 사용됩니다. 웹페이지 작성 기준입니다. API 모음입니다. 웹 페이지에 상호 작용을 추가하는 새로운 방법입니다.

HTML5는 그 이상입니다. 그래서 이 책은 무엇에 관한 것입니까?

이 HTML5 튜토리얼에서는 HTML과 CSS를 어느 시점에서 다루었다고 가정하겠습니다. 아마도 당신은 자신만의 Wordpress 테마를 만들거나 예전에 MySpace 레이아웃을 편집했을 것입니다. 아마도 MakeUseOf의 XHTML 가이드를 읽었을 것입니다. 요점은, 나는 당신이 웹 페이지를 둘러보는 방법을 알고 있고 이 가이드에서 논의하는 내용이 당신에게 너무 생소하지 않을 것이라고 가정하고 있습니다.

이 가이드의 목적은 HTML5 전체를 가르치는 것이 아닙니다. 그것은 이 책의 범위를 완전히 벗어납니다. 목표는 이러한 놀라운 새로운 웹 기술에 대한 부드러운 소개를 제공하고 웹사이트에 이를 통합하는 몇 가지 멋진 방법을 보여주는 것입니다.

왜 HTML5를 배우고 싶습니까?

정당한 질문입니다. 스마트폰과 앱의 세계에서 웹 페이지를 프로그래밍하는 방법을 배우는 것이 정말 중요합니까?

믿거나 말거나 HTML5 기술을 사용하여 스마트폰 애플리케이션을 작성하는 것은 정말 일반적입니다. 최근까지 Android용 Facebook 앱은 HTML5, CSS 및 Javascript를 사용하여 작성되었습니다.

Blackberry는 HTML5에 열광하는 또 다른 주요 회사입니다. 이는 모바일 운영 체제인 Blackberry OS 10의 최신 버전에서 분명하게 나타납니다. Blackberry OS 10에서는 개발자가 웹 기술을 사용하여 휴대폰용 애플리케이션을 개발하도록 적극적으로 권장하고 있습니다.

새로운 Firefox OS 스마트폰은 HTML5 앱에서도 완전히 실행됩니다. HTML5에 대한 실무 지식은 오늘날의 스마트폰 환경에서 필수적입니다.

또한 HTML5를 배우는 것은 경력에 좋습니다. 날 믿지 않아? 인디드닷컴에 따르면 , HTML5 개발자의 평균 연봉은 89,000달러입니다. HTML5 기술을 사용하기 위해 웹사이트를 변경하는 회사가 점점 더 많아지면서 HTML5 스택을 아는 개발자가 그 어느 때보다 많이 필요합니다.

1.1 전제 조건

이 HTML5 튜토리얼은 몇 가지를 가정합니다. 첫째, 웹이 어떻게 작동하는지 알고 기본 웹 페이지를 만드는 방법을 알고 있다고 가정합니다. 일부 HTML 요소를 함께 엮을 수 있어야 하고 웹 브라우저에 일부 정보를 표시할 수 있어야 합니다. 보고

태그는 그다지 어렵지 않으며 일부 소스 코드에서 손이 더러워지는 것을 두려워하지 않습니다.

둘째, 이 가이드는 CSS가 무엇이며 어떻게 작동하는지 알고 있다고 가정합니다. 우리는 당신이 천재적인 디자인을 할 것이라고 기대하지 않으며, 당신의 손에서 전체 CSS 사양을 알 것으로 기대하지도 않습니다. 그러나 웹 페이지의 요소에 스타일을 적용하고 CSS 파일에 연결할 수 있어야 하며 ID와 클래스의 차이점과 각각에 스타일을 적용하는 방법을 알아야 합니다.

위에서 머리를 긁적 인 경우 걱정하지 마십시오. HTML과 CSS의 가장 좋은 점 중 하나는 그것이 정말, 정말 쉽다는 것입니다. 사실, MakeUseOf에는 정말 빠른 속도로 당신을 데려올 놀라운 XHTML 가이드가 있습니다.

해당 가이드를 읽은 후 다음 기사를 살펴보는 것도 좋습니다.

또한 최신 텍스트 편집기와 브라우저가 필요합니다. IE 9 이전 버전의 Internet Explorer와 일부 이전 버전의 Safari, Chrome 및 Firefox는 HTML5의 일부인 많은 기능에 어려움을 겪을 수 있으며 이 가이드를 따르지 못할 수 있습니다.

따라서 최신 브라우저를 다운로드하는 것이 좋습니다. 저는 구글 크롬을 추천하며, 저는 각각의 예에서 그것을 사용할 것입니다.

그 외에 필요한 것은 배우고자 하는 의지뿐입니다. 아, 그리고 텍스트 편집기.

1.2 웹 개발을 위한 텍스트 편집기

텍스트 편집기는 코드를 작성하는 데 사용할 것입니다. 텍스트 편집기가 무엇인지 궁금할 수 있습니다.

글쎄, 첫째로 그것은 워드 프로세서가 아닙니다. Microsoft Word 및 Apple's Pages와 같은 프로그램은 웹 개발에 전혀 적합하지 않습니다. 이는 HTML, CSS 및 Javascript 파일에 추가 정보를 첨부하여 웹 브라우저에서 읽기 어렵게 하기 때문입니다.

텍스트 편집기는 문자를 텍스트 파일로 쏘아 올립니다. 이렇게 하면 추가 형식이 없는 파일을 만들 수 있으며 선택한 확장자로 저장할 수 있습니다.

컴퓨터에는 이미 하나가 함께 제공됩니다. Windows PC를 사용하는 경우 메모장이 설치되었을 가능성이 있는 텍스트 편집기입니다.

Mac에서는 상황이 약간 다릅니다. OS X에는 네 가지 다른 텍스트 편집기가 함께 제공됩니다. 이들은 Vim, Emacs, Pico 및 Nano라고 합니다. 그러나 메모장과 달리 모두 터미널에서 작동합니다.

이것은 웹 개발을 처음 접하는 사람들에게 약간 위협적이며 소프트웨어 개발을 처음 접하는 사람들이 사용해서는 안 됩니다. 이 가이드에서는 사용하지 않습니다. 그러나 소프트웨어와 웹 개발에 좀 더 자신감을 갖게 되면 Vim과 Emacs를 살펴볼 가치가 있습니다. 둘 다 강력한 텍스트 편집기이며 마스터하면 엄청난 시간을 절약할 수 있습니다.

Linux에서 기본 텍스트 편집기는 배포판마다 다릅니다. Ubuntu에서는 메모장과 크게 다르지 않은 다소 즐거운 텍스트 편집기인 Gedit 입니다.

그러나 이 과정에서는 세 가지 다른 도구를 사용하여 코드를 작성합니다.

첫 번째는 Sublime Text 2입니다. 나는 솔직히 이것을 충분히 높게 추천할 수 없다. 초보 개발자의 삶을 더 쉽게 만들어주는 모든 것이 함께 제공됩니다. 첫째, 특정 부분에 색상을 지정하여 코드를 더 쉽게 읽을 수 있습니다. 둘째, 파일 간을 쉽게 전환하고 파일의 전체 프로젝트를 관리할 수 있습니다. 이것은 파일 간을 전환하고 여러 비트의 코드를 즉석에서 편집하는 데 이상적입니다.

세 번째는 구글 크롬에 내장된 자바스크립트 콘솔이다. 이를 통해 Javascript를 작성하고 즉시 실행되는 것을 볼 수 있으며 기본 프로그래밍 개념을 설명하는 데 사용됩니다.

두 번째는 Codepen.io라는 웹사이트입니다. 이 놀라운 웹사이트를 사용하면 브라우저에서 HTML, CSS 및 Javascript를 코딩할 수 있으며 무료로 사용할 수 있습니다. 또한 변경 사항을 즉시 확인할 수 있습니다.

2. 시맨틱 마크업

이 장에서는 시맨틱 마크업에 대해 배우고 내용을 기반으로 코드를 구성하는 방법을 배웁니다.

최근까지 HTML 코드는 일반적으로 태그로 구성되었습니다. 이를 통해 요소 그룹을 만든 다음 해당 요소에 스타일을 적용할 수 있습니다.

이것은 효과가 있었지만 개선의 여지가 있었습니다. 태그의 문제는 의미론적이지 않다는 것이었습니다. Div는 실제로 아무 의미가 없습니다.

시맨틱 마크업은 HTML5의 새로운 기능입니다. 'div' 태그와 같은 방식으로 작동하지만 페이지의 공통 부분에 태그를 지정하기 위한 새 태그를 가져옵니다.

어떻게 작동합니까? 다음 코드를 고려하십시오.

이 코드에는 탐색 모음, 제목 및 목록이 있습니다. 이것은 당신이 그것에 대해 생각할 때 당신이 방문할 가능성이 있는 대부분의 웹사이트와 크게 다르지 않습니다.

크롬에서 하드웨어 가속이란 무엇입니까

MakeUseOf에 대한 기사를 살펴보겠습니다. 다른 기사로 이동하기 위해 완전히 예약된 페이지의 일부가 있음을 알 수 있습니다. 또한 기사를 구성하는 단어가 포함된 페이지의 다른 부분이 있음을 알 수 있습니다. 페이지 상단에 MakeUseOf 로고와 기타 링크가 포함된 헤더가 표시됩니다.

생각해보면 많은 웹사이트가 이러한 규칙을 따릅니다. 대부분의 웹사이트에는 탐색용으로 예약된 부분이 있습니다. 일반적으로 콘텐츠 본문이 있습니다. 헤더가 있을 가능성이 큽니다.

시맨틱 태그는 대부분의 웹사이트에서 흔히 볼 수 있는 웹사이트의 일부를 정의할 수 있는 태그입니다. 페이지에 아무 것도 추가하지 않지만 콘텐츠를 기반으로 태그를 그룹화하고 해당 그룹에 스타일을 적용할 수 있습니다.

이전에 사용했던 코드를 기억하십니까? 시맨틱 마크업이 추가되어 살펴보겠습니다.

보시다시피 코드가 훨씬 읽기 쉽습니다. 어느 부분이 어느 부분인지 알고 있으며 모호함이 없습니다. 이것은 훌륭하고 깨끗한 코드를 더 쉽게 작성할 수 있도록 하기 때문에 중요합니다. 전문 웹 디자이너가 되기로 결정했다면 이것이 가장 중요합니다. 당신이 제작한 작품을 누가 읽을지 알 수 없습니다.

따라서 의미론적 마크업 태그를 좀 더 살펴보겠습니다.

2.1 섹션

섹션은 정말 유용한 태그입니다. 제목이나 제목이 표시된 방대한 양의 정보와 콘텐츠를 파악하는 데 사용됩니다. 이것을 책의 한 장이라고 생각하십시오. 장에는 제목이 있으며 그림, 도표, 그래프 및 단어도 포함될 수 있습니다. 섹션 태그는 이 모든 것을 포함하는 데 사용됩니다.

2.2 조항

기사 태그는 소리에 사용됩니다. 블로그 게시물 또는 뉴스 기사와 같은 콘텐츠를 포함합니다. 이 콘텐츠는 블로그의 나머지 부분과 분리될 수 있어야 하며 여전히 일관된 의미를 가질 수 있어야 합니다.

2.3 제쳐두고

이 태그는 웹 페이지의 필수적인 부분이 아닌 관련된 콘텐츠를 위해 예약되어 있습니다. 이것은 뉴스 기사 또는 블로그 사용자의 전기와 관련된 많은 사실일 수 있습니다.

2.4 헤더

많은 웹 페이지에는 페이지 상단에 로고, 사이트에 관한 일부 정보 및 일부 링크가 포함된 막대가 있습니다. 시맨틱 마크업에서 헤더 태그를 사용하여 이 모든 것을 포함합니다.

2.5 탐색

이 요소는 웹사이트의 탐색 부분을 위해 예약되어 있습니다. 여기에는 다른 웹사이트 또는 웹사이트의 다른 페이지에 대한 링크가 포함됩니다. MakeUseOf의 컨텍스트 내에서 헤더 아래에 있는 페이지의 일부일 수 있습니다.

이 태그는 페이지 하단에 예약되어 있습니다. 여기에 연락처 정보, 저작권 정보, 지도 또는 '내 소개' 페이지에 대한 링크를 넣을 수 있습니다.

2.7 스스로를 테스트하라

  • 시맨틱 마크업이란 무엇이며 무엇에 사용됩니까?
  • 나는 웹 페이지를 만들고 있고 나에 대한 전기를 포함하기 위해 시맨틱 태그를 사용하고 싶습니다. 어느 것을 사용합니까?

3. 양식

웹 디자인을 조금이라도 해 본 적이 있다면 HTML로 간단한 양식을 만드는 방법을 알고 있을 것입니다. 당신이 정말 영리하다면, 당신은 당신의 양식에서 얻은 정보를 어떻게 취하고 데이터베이스에 넣는 것과 같이 그것을 가지고 무엇인가를 하는 방법을 알고 있을 것입니다.

형식은 매우 중요합니다. 그것들은 우리가 인터넷에서 하는 대부분의 일의 기초입니다. 좋아하는 소셜 네트워크에서 상태 업데이트를 생성하거나 Amazon에서 물건을 구매하거나 이메일을 보낼 때마다 HTML 양식을 사용했을 것입니다.

HTML5에서 양식을 만드는 방법이 근본적으로 변경되었다는 사실을 몰랐을 것입니다. 또한 훨씬 더 좋습니다. 이 장에서는 평범한 오래된 마크업으로 지금 할 수 있는 몇 가지 멋진 작업을 살펴볼 것입니다.

그렇다면 HTML5에서 양식을 작성할 수 있는 새로운 방법의 멋진 점은 무엇입니까? 첫째, 양식 자체의 마크업을 변경하여 제출하려면 일부 필드를 채워야 합니다. 또한 이를 수행하기 위해 더 이상 JavaScript나 PHP를 작성할 필요가 없습니다. 그것은 사소하게 쉽습니다.

둘째, 사용자가 특정 유형의 정보만 양식에 제출할 수 있도록 할 수 있습니다. 메일링 리스트를 위한 웹사이트가 있고 사람들이 실제 이메일 주소만 제출할 수 있기를 원한다고 가정해 봅시다. HTML5를 사용하면 그렇게 할 수 있습니다. 정말 엄청나게 강력합니다.

셋째, 특정 필드에 자리 표시자를 지정하여 양식을 더 보기 좋게 만들 수 있습니다. 이렇게 하면 사용자에게 양식에 대해 기대하는 것의 예를 보여줄 수 있으므로 훨씬 더 직관적으로 만들 수 있습니다.

3.1 양식 개선

이제 양식을 살펴보고 개선할 수 있는 방법을 살펴보겠습니다.

이 양식은 매우 기본적입니다. 이름, 이메일 및 좋아하는 색상을 입력한 다음 사용자가 제출할 수 있습니다. 여기에는 어떤 정보가 배치되는지에 대한 유효성 검사가 포함되지 않으며 사용자가 일부 빈 필드가 있는 이 양식을 제출하는 것을 막을 수 없습니다. 모든 것을 바꾸자.

따라서 우리가 가장 먼저 할 일은 이메일 필드에 이메일만 사용하도록 하는 것입니다. 모든 종류의 난해한 Regex 코드를 생성해야 하기 때문에 이것은 실제로 꽤 어려운 작업이었습니다. 글쎄, 더 이상. 입력 유형을 '텍스트'에서 '이메일'로 변경하기만 하면 됩니다. 횡설수설하게 그 양식을 제출하려고 하면 불평하고 이메일을 제출하라고 주장할 것입니다.

3.2 입력 유형 및 패턴

필요한 다른 입력 유형이 있습니다. 여기에는 전화번호, 웹 주소, 검색 양식 및 색상 선택 도구가 포함됩니다! HTML5가 지속적으로 발전함에 따라 가까운 장래에 더 많은 입력 유형을 지정할 수 있게 될 것입니다.

또한 지역에 따라 달라지는 전화번호 등의 경우 입력 패턴을 지정할 수 있습니다. 이들은 '정규 표현식'이라는 것을 사용하여 생성되며 다소 복잡하지만 측정할 수 없을 정도로 강력합니다.

또한 사용자가 제출해야 하는 내용이 모호하지 않도록 해당 분야에 이메일의 예를 제공하고자 합니다. 정말 하기 쉽습니다. 예시 이메일 주소를 사용하여 'placeholder'의 새 속성을 생성하기만 하면 됩니다.

'Favorite Color' 필드가 필수 항목인지 확인합니다. 이메일 입력 태그의 마지막 꺾쇠 괄호(>)에 '필수'라고 쓰시면 됩니다. 그게 다야 이제 값 없이 양식을 제출하려고 하면 오류 메시지가 생성됩니다.

이러한 오류 메시지에 대한 정말 놀라운 점은 사용자가 오류 메시지를 작성하기 위해 작성하거나 코드를 작성할 필요가 없다는 것입니다. 필드를 필수 항목으로 변경하기만 하면 작동합니다. 즉, 원하는 경우 사용자 정의할 수 있습니다.

그것은 HTML5에서 폼의 힘에 대한 믿을 수 없을 정도로 간략한 소개였습니다. 더 많은 내용을 읽고 싶다면 이 링크를 방문하는 것이 좋습니다.

추가 읽기:

  • CSS Tricks – 시맨틱 마크업을 작성해 봅시다.
  • HTML5 Doctor – 의미론에 대해 이야기해 봅시다

3.3 자신을 테스트

다음주가 생일인데 얼마만큼의 케이크를 만들어야 하는지 알기 위해 등록 양식을 만들고 싶습니다. 텍스트 편집기를 열고 다음 필드가 있는 양식을 만듭니다.

  • 이름
  • 이메일 주소
  • 전화 번호
  • 알레르기

이름, 이메일 및 전화번호 필드는 필수이고 이메일 및 전화번호 필드는 '이메일' 및 '전화' 입력 유형으로 설정되어 있는지 확인하십시오. 값 '꽃가루, 계란, 키시'를 사용하여 알레르기 필드에 대한 자리 표시자를 만듭니다.

양식을 가지고 놀아보세요. 필수 필드를 비어 있는 상태로 제출하고 전화번호 필드에 숫자가 아닌 문자를 삽입해 보십시오. 이메일 필드에 이메일 주소가 아닌 것을 입력합니다. 무슨 일이야?

4. 평균

웹 페이지에 비디오나 오디오를 삽입할 수 있는 유일한 방법은 Flash, Shockwave 또는 SilverLight와 같은 것을 사용하는 것뿐이었습니다.

이것은 이상적이지 않았습니다. 첫째, 이러한 프레임워크 중 어느 것도 모바일 장치에서 제대로 작동하지 않았습니다. 그들은 스마트폰과 태블릿의 현대 세계에 적합하지 않았을 뿐입니다.

Windows 폴더에서 무엇을 삭제할 수 있습니까?

또한 독점 형식이었습니다. 결과적으로 Linux 및 OS X 사용자는 자신의 플랫폼에서 사용할 수 없는 미디어 서비스를 사용하거나 미디어 서비스를 사용하지 못하도록 막혔습니다.

마지막으로 느린 경향이 있었습니다. 전력이 부족하거나 오래된 컴퓨터를 사용하는 경우 이러한 프레임워크를 사용하여 비디오를 보는 경험이 좋지 않을 것입니다. Flash는 특히 이것으로 악명이 높았습니다.

4.1 HTML5가 비디오와 오디오를 멋지게 만드는 방법

HTML5는 웹 개발자가 몇 줄의 코드로 웹 페이지에 비디오와 오디오를 포함할 수 있도록 하여 이를 변경했습니다. 모바일 장치에서 작동하며 모든 최신 웹 브라우저에서 작동합니다.

그 결과 YouTube, Vimeo, Netflix와 같은 주요 기업이 HTML5 혁명을 활용하고 있습니다. 당신은 왜 그들과 함께하지?

4.2 코덱에 관한 모든 것

이 장에서는 HTML5의 강력한 기능을 사용하여 웹 페이지에 오디오와 비디오를 포함하는 방법을 배웁니다.

먼저 주의사항부터 시작하겠습니다. 모든 최신 웹 브라우저에서 HTML5 비디오를 사용할 수 있지만 각 웹 브라우저에서 동일하게 작동하지 않습니다. 브라우저마다 사용하는 코덱이 다릅니다. Internet Explorer에서는 MP4 비디오만 사용할 수 있습니다. Chrome은 좀 더 관대하며 WebM, MP4 및 Ogg Theora 비디오를 사용할 수 있습니다. Opera는 좀 더 제한적이며 Theora 및 WebM 비디오만 사용할 수 있습니다.

결과적으로 웹 페이지에 비디오를 삽입하는 방법에 대해 조금은 영리해져야 합니다. 어떻게 작동하는지 봅시다.

4.3 비디오로 시작하기

시작하려면 여는 태그와 닫는 태그를 만들어야 합니다. 여기에서 비디오 파일에 연결할 수 있습니다. 그러나 먼저 포스터를 설정하고 싶을 것입니다. 그게 무슨 뜻이야?

글쎄, 당신이 당신의 비디오가 로드되기를 기다리고 있을 때, 당신의 사이트를 방문하는 사람은 비디오와 관련된 사진을 볼 수 있습니다. 그렇게 하려면 비디오 태그에 링크하려는 이미지의 값과 함께 '포스터' 속성을 지정하기만 하면 됩니다. 다음과 같이 보여야 합니다.

다음으로 할 일은 대체를 만드는 것입니다. 이것은 무엇을 의미 하는가? 그래서, 당신이 더 오래되고 덜 멋진 브라우저 중 하나를 사용하고 있다고 가정합니다. 이러한 구형 브라우저 중 상당수는 HTML5 비디오를 지원하지 않으므로 HTML5 비디오를 재생할 수 없습니다. 브라우저를 업그레이드할 것이며 업그레이드할 때까지 비디오를 볼 수 없다는 메시지를 남기고 싶을 것입니다.

그렇게 하려면 비디오 태그 안에 메시지를 작성하기만 하면 됩니다. 다른 것은 필요하지 않습니다. 이 작업을 완료하면 다음과 같은 코드가 남게 됩니다.

이제 동영상을 추가해 보겠습니다. 저는 이것을 구글 크롬에서 테스트할 것이므로 MP4 필름에 연결하겠습니다. 그렇게 하려면 소스 태그를 만들고 포함하려는 비디오 값을 가진 src 속성을 지정합니다.

이제 내 페이지를 웹 브라우저에서 열 준비가 되었습니다. 나는 정말로, 정말로 큰 영화에 연결했고 결과적으로 개봉했을 때 포스터만 볼 수 있었습니다.

4.4 오디오 추가

페이지에 비디오를 삽입한 방식과 매우 유사한 방식으로 오디오를 웹 페이지에 삽입할 수 있습니다.

먼저 오디오 태그를 생성합니다. 이러한 오디오 태그에는 'controls' 속성이 포함되어 있습니다. 이를 통해 페이지를 방문하는 사용자는 재생 중인 오디오를 일시 중지, 되감기 및 빨리 감기할 수 있습니다.

그런 다음 링크하려는 MP3 파일에 소스 태그를 포함합니다. 코덱 호환성에 관해서는 그다지 걱정할 필요가 없습니다. 대부분의 최신 웹 브라우저에는 MP3 오디오를 재생할 수 있는 기능이 있지만 만일을 대비하여 '.ogg' 및 '.wav' 파일도 포함하는 것이 좋습니다.

마지막으로 이전 브라우저에 대한 대체를 만들 수 있습니다. 이는 비디오에 대한 대체를 생성한 것과 동일한 방식으로 수행됩니다.

최종 결과는 다음과 같습니다.

웹 브라우저에서 열면 다음과 같이 보일 것입니다.

4.5 스스로 테스트하기

  • 비디오 태그에 포스터를 넣는 목적은 무엇입니까?
  • Internet Explorer에서 사용할 수 없는 코덱은 무엇입니까?
  • 일부 오디오를 일시 중지하는 기능을 원하면 '오디오' 태그에 어떤 속성을 추가하시겠습니까?

추가 읽기:

5. CSS3 변환 및 애니메이션

CSS는 전통적으로 웹 페이지의 레이아웃과 디자인을 처리하는 데 사용되었습니다. 이것은 여전히 ​​사실이지만 최신 반복에서 애니메이션과 요소 및 이미지의 변형을 처리하는 기능을 얻었습니다.

사람들은 디지털 시계를 만드는 것부터 완전한 Pong 게임을 작성하는 것까지 CSS3로 몇 가지 놀라운 일을 해냈습니다. 누군가 Mad Men에 대한 소개 크레딧을 다시 만드는 데 사용했습니다. 그것은 진정으로 강력한 기술이며 마스터되면 웹 페이지에 놀라운 수준의 기능을 추가하는 데 사용할 수 있습니다.

이 장에서는 CSS3에 대한 간략한 소개를 제공하고 페이지에 몇 가지 놀라운 효과를 추가하는 방법을 보여줍니다.

먼저 codepen.io로 이동하여 새 펜을 만듭니다. 이 장의 기간 동안 이것을 작업 공간으로 사용할 것입니다.

간단하게 시작하여 마우스를 가져갔을 때 이미지를 3도 회전시키는 간단한 이미지 변환을 만들 것입니다. 먼저 div 태그를 생성하고 ID를 부여합니다. 아래 예에서는 ID를 'muo'로 지정했습니다.

5.1 CSS 호버 효과

해당 div에 원하는 이미지를 포함합니다. MakeUseOf의 로고 사본을 포함했습니다.

그런 다음 몇 가지 스타일시트 규칙을 작성해야 합니다. 아래 예에서는 이미지에 공간을 주기 위해 위쪽 및 왼쪽 여백을 만들었습니다. 또한 '#muo:hover'로 시작하는 흥미롭게 보이는 스타일시트 규칙도 포함했습니다. 저게 뭐에요?

스타일시트 규칙에 ':hover'를 첨부하면 요소, ID 또는 클래스에 관계없이 마우스가 요소를 제어할 때 이 스타일을 적용하도록 브라우저에 효과적으로 지시하는 것입니다. 꽤 멋지죠?

'#muo:hover' 규칙 안에 '-webkit-transform: rotate(3deg)'라는 줄이 있습니다. 짐작하셨겠지만, 이는 브라우저에 해당 div 요소를 3도 회전하도록 지시하는 것입니다.

그러나 이 태그는 Chrome 및 Safari에서만 작동합니다. 코드가 Firefox 또는 Internet Explorer 9 이상에서 작동하도록 하려면 다음 행을 포함하도록 CSS 파일을 변경해야 합니다.

이제 이미지 위로 마우스를 가져가면 다음과 같이 표시됩니다.

5.2 CSS3를 사용하여 이미지 크기 조정

그럼 왜 거기서 멈추나요? '변형' 방법을 사용하여 이미지를 확대하거나 축소할 수도 있다는 사실을 알고 계셨습니까? 다음 행을 포함하도록 CSS 파일을 변경해 보겠습니다.

보시다시피, 이제 새로운 변환 규칙이 포함되었지만 이번에는 '크기 조정'이라는 작업을 수행하도록 지시합니다. 이것은 이미지의 크기를 늘리는 정말 아름다운 방법입니다. 두 개의 매개변수(괄호 사이에 표시되는 숫자)가 필요하며 요소의 높이와 너비를 증가시키는 양을 나타냅니다.

코드에서 알 수 있듯이 MakeUseOf div 로고의 크기를 50% 늘립니다. 마우스를 가져가면 이 작업을 테스트할 수 있습니다. 이제 'MakeUseOf' 로고가 훨씬 더 늘어났음을 알 수 있습니다.

이것은 CSS3 변환에 대한 매우 부드러운 소개였습니다. CSS3는 실제로 매우 새롭지만 이제 CSS3로 매우 흥미로운 조작을 많이 할 수 있다는 것을 알 수 있습니다.

5.3 스스로 테스트하기

  • 호버링할 때 요소에 스타일을 적용하는 방법은 무엇입니까?
  • CSS3를 사용하여 이미지를 회전하는 방법은 무엇입니까?
  • CSS3를 사용하여 이미지의 크기를 조정하는 방법은 무엇입니까?
  • 변환 메서드 'translate(50px, 50px)'를 전달하면 어떻게 됩니까?

추가 읽기:

HTML5 Rocks - 프레젠테이션

6. 자바스크립트로 충분하다

웹 브라우저에서 스크립트를 사용하려면 Javascript를 사용해야 합니다. 슬프게도 그것에 대해 두 가지 방법이 없습니다. 그것은 많은 팬과 많은 비방자를 가진 언어입니다. 언어가 발전함에 따라 많은 사마귀가 있습니다. 언어에 관한 가장 유명한 책이 'Javascript: Good Parts'인 데는 이유가 있습니다.

한 장에서 Javascript 사용법을 가르치는 것은 불가능합니다. 그것이 여기의 목표가 아닙니다. 목표는 당신이 그림과 애니메이션을 만들기 위해 Canvas라는 기술을 사용하는 것에 관한 다음 장을 이해할 수 있도록 충분한 Javascript를 가르치는 것입니다.

6.1 콘솔 액세스

이를 위해 모든 Google Chrome 사본에 내장된 Javascript 콘솔을 사용할 것입니다. 이에 액세스하려면 웹 페이지를 마우스 오른쪽 버튼으로 클릭한 다음 '요소 검사'를 누를 수 있습니다. 그런 다음 '콘솔'을 클릭하십시오. 당신은 이것을보아야합니다.

모든 신진 개발자가 작성하는 첫 번째 프로그램은 'Hello World' 프로그램이라는 것이 전통적입니다. 이것은 'Hello World'라는 문구를 출력하는 간단한 프로그램입니다. 콘솔에 'console.log('Hello world!');를 입력합니다.

6.2 첫 번째 프로그램

그래서 우리는 정확히 무엇을 했습니까? 먼저 'console.log'라는 이름을 불렀습니다. 이것은 컴퓨터에 내장된 약간의 코드로 사용자가 지시한 내용을 간단히 인쇄합니다. 그런 다음 일부 괄호를 첨부하고 'Hello World'를 큰따옴표로 묶었습니다. 이것을 '인수 전달'이라고 하며 전달한 인수의 유형을 문자열이라고 합니다. 문자 및 특수 문자와 관련된 작업을 수행할 때마다 작은 따옴표를 사용해야 합니다. 그러나 숫자를 사용하여 작업을 수행하려는 경우 일반적으로 아래와 같이 따옴표를 사용할 필요가 없습니다.

6.3 자바스크립트의 변수

'console.log'에도 변수를 전달할 수 있습니다. 변수는 복잡하게 들리지만 실제로는 정보 덩어리를 넣을 공간입니다. 이들은 종종 숫자나 문자입니다. 그렇게 하려면 'var' 키워드를 사용하여 변수를 선언하고 이름을 지정한 다음 등호로 값을 지정합니다. 그래서 'hello'라는 변수를 만든 다음 'Hello World!'라는 값을 지정하겠습니다. 그런 다음 console.log에 전달하겠습니다.

따옴표를 사용하여 console.log에 'hello'를 전달하지 않은 방법에 유의하세요. 'hello' 자체가 아닌 'hello'의 내용을 콘솔에 출력하고 싶었기 때문입니다.

6.4 기능이 하는 일

동일한 코드 덩어리를 계속해서 다시 작성하는 것은 다소 지루할 수 있으므로 우리가 함수를 작성하는 이유입니다. 기능은 생각보다 쉽습니다. 그것들은 모두 같은 코드를 다시 작성하지 않고 재사용할 수 있는 코드 덩어리입니다. 아래에서 'sup'이라는 함수를 만들고 괄호를 사용하여 인수를 전달한 다음 화면에 기록합니다. 콘솔에 'sup('Hello world!');'를 전송하여 'sup'을 호출합니다.

6.5 'For' 루프로 동작 반복하기

정해진 횟수만큼 같은 동작을 하고 싶다고 가정해 봅시다. 이것이 우리가 'for' 루프를 사용하는 이유입니다. 처음에는 무섭게 생겼지만 이해하고 나면 매우 쉽게 할 수 있습니다. 'for()'를 작성하는 것으로 시작합니다.

이 괄호 안에 우리가 작업을 수행한 횟수를 계산하는 변수를 생성하려고 합니다. 그래서 우리는 'for(var i = 0;)'과 같은 것을 얻습니다.

그런 다음 조건을 충족하지 않았는지 확인하고 싶습니다. 따라서 이 경우에는 10보다 작은지 확인하고 싶습니다. 따라서 세미콜론 뒤에 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

i가 10보다 작으면 1을 더한 다음 무언가를 하고 싶습니다. 그래서 우리는 'i = i + 1'을 넣습니다. 루프가 거의 완료되었습니다. 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

그 후에 우리는 행동을 하기를 원할 것입니다. 따라서 마지막 괄호 뒤에 중괄호를 작성하고 그 사이에 i 값을 console.log에 기록할 것입니다. 이렇게 하면 최대 9까지 셀 수 있는 카운터가 생성됩니다.

우리가 살펴볼 마지막 두 프로그래밍 구조는 'if' 문과 'while' 루프입니다.

6.6 If 문

'if' 문은 특정 기준이 충족되면 작업을 수행합니다. 구성에서 'for' 루프와 유사하며 다음과 같이 작동합니다. 'cheeseburgers'라는 변수가 있고 'tasty' 값이 있는지 확인하려고 한다고 가정합니다. 그렇다면 '냠냠 치즈버거'를 화면에 기록하고 싶을 것입니다. 그렇게 하려면 다음과 같이 작성합니다.

내가 'if(cheeseburgers == 'tasty')'를 어떻게 썼는지 주목하세요. 이중 또는 삼중 등호를 사용하여 같음을 확인하고 단일 등호를 사용하여 값을 할당합니다.

6.7 while 루프

마지막으로 'while' 루프는 기준이 충족되는 동안 작업을 실행합니다. 따라서 치즈버거가 동일한 맛을 내는 동안 '얌, 치즈버거'를 기록하고 싶다고 상상해 보십시오. 그렇게 하려면 다음을 작성합니다.

이것은 무한 루프에 들어갈 것이고 변경될 가능성이 없는 값에 대해 작업을 수행하는 것을 피해야 합니다. 이로 인해 브라우저가 잠기거나 코드가 작동하지 않을 수 있습니다.

전에 언급했듯이 이것은 Javascript의 프로그래밍 구성에 대한 매우 간단한 소개였습니다. 이 매혹적이지만 거대한 주제에 대해 더 많이 읽으십시오.

6.8 자신을 시험하라

  • 30부터 카운트다운하고 싶습니다. 그렇게 하는 'for' 루프를 작성하세요.
  • 'makeuseof'라는 변수를 만들고 'awesome' 값을 주고 싶습니다. 어떻게 이루어지나요?
  • 호출 시 'MakeUseOf Is Awesome'을 출력하는 함수를 만들고 싶습니다. 해당 기능을 작성합니다.

추가 읽기:

7. 크리에이티브 캔버스

Canvas는 Flash나 Silverlight를 사용하지 않고도 이미지를 그리고 애니메이션을 만들 수 있는 멋진 기술입니다. 사람들은 헤어 드라이어 시뮬레이터 및 다양한 비디오 게임을 포함하여 기이하고 멋진 것을 만드는 데 사용했습니다. 이것은 훌륭하고 측량할 수 없을 정도로 큰 기술입니다. 이 튜토리얼에서는 이에 대한 간략한 소개를 드리겠습니다.

Canvas는 최신 웹 브라우저에서만 작동합니다. 이전 버전의 IE, Chrome 또는 Firefox를 사용하는 경우 이 장을 따르지 못할 수 있습니다. 그렇다면 이 튜토리얼을 만들 때 사용한 웹 브라우저인 Chrome의 최신 버전을 다운로드하는 것이 좋습니다.

7.1 캔버스 시작하기

우선 웹 브라우저를 열고 codepen.io로 이동해야 합니다. 새 펜을 만듭니다.

이제 캔버스 요소를 선언해야 합니다. 두 개의 열기 및 닫기 Canvas 태그를 만듭니다. 그 안에는 세 가지 속성을 전달해야 합니다. 이것은 당신이 제공하는 ID와 함께 Canvas 요소의 너비와 높이입니다. 이전에 비디오를 삽입했을 때와 마찬가지로 대체 메시지를 포함해야 합니다.

이제 화면에 무언가를 그릴 Javascript 코드를 작성하려고 합니다. 우리는 기본을 시작하고 간단한 빨간색 사각형을 만들 것입니다.

변수(저는 '데모'라고 함)를 만든 다음 캔버스 요소를 선택하고 해당 변수에 할당합니다. 그렇게 하려면 document.getElementByID()를 사용하고 선택하려는 요소의 ID를 전달합니다.

스크립트의 두 번째 줄은 'context'라는 또 다른 변수를 만든 다음 'demo.getContext('2d')'를 호출합니다. 이것은 우리가 2D 이미지로 작업할 것이라고 브라우저에 말한 다음 화면에 그리는 데 필요한 필요한 기능을 전달했습니다.

세 번째와 네 번째 라인은 실제로 화면에 그림을 그리는 라인입니다. 세 번째 줄은 직사각형을 빨간색으로 채우고 네 번째 줄은 위치를 지정하고 길이와 너비를 정의하는 fillRect를 호출합니다.

그것은 인상적이지 않습니다. 좀 더 발전된 작업을 수행하고 Javascript와 Canvas의 마법을 사용하여 MakeUseOf의 새로운 로고를 만들어 보겠습니다.

7.2 모양과 텍스트

네 번째 줄을 삭제하고 왼쪽 상단 모서리에 사각형을 배치하고 캔버스 길이만큼 확장하는 줄로 교체하겠습니다.

처음 두 인수는 모양의 x 및 y 축을 배치할 위치를 정의합니다. 지금은 이 두 개를 '0'으로 설정해 보겠습니다. 세 번째 인수는 모양의 너비를 나타냅니다. 이를 '200'으로 설정한 다음 네 번째 인수를 '50'으로 둡니다. 이제 이렇게 생긴 것이 있어야 합니다.

이것은 훌륭한 시작이지만 MakeUseOf에 대해 전혀 언급하지 않습니다. 그래서, 우리는 약간의 텍스트를 추가할 것입니다. 'makeuseof'를 포함하는 변수를 만들고 그 변수를 'MakeUseOf'라고 합시다.

그런 다음 다른 컨텍스트 변수를 생성하려고 합니다. 이것을 'context2'라고 부르고 2d인지 확인하십시오. 이것이 우리가 텍스트를 작성하는 데 사용할 것입니다.

우리는 텍스트가 파란색으로 표시되고 빨간색 사각형을 오버레이하기를 원할 것입니다. 따라서 이전과 마찬가지로 '파란색'의 fillStyle을 지정하려고 합니다. 이제 텍스트의 특성을 선택하겠습니다. 우리는 20px 크기의 굵은 글꼴로 Arial 글꼴을 사용하기를 원합니다. context2에서 font를 호출하고 'bold 20px arial' 값을 할당합니다.

이 텍스트가 이전 빨간색 상자를 오버레이하기를 원하기 때문에 context2에서 'textBaseLine'을 호출하고 값을 top으로 지정해야 합니다. 완료되면 context2에서 'fillText'를 호출하고 텍스트와 텍스트를 배치할 x 및 y 좌표가 포함된 변수를 전달합니다. 우리 코드의 최종 결과는 다음과 같습니다.

코드에 의해 생성된 이미지는 다음과 같습니다.

7.3 캔버스 위의 단어

이것은 Canvas에 대한 믿을 수 없을 정도로 기본적인 소개였지만, 이것은 또한 엄청나게 큰 기술이며 부팅하기에 매우 강력한 기술이라는 것을 이해해야 합니다. 이 가이드는 단순히 이 새로운 기술을 사용하여 그래픽을 만드는 방법을 소개한 것입니다.

내 페이스북 계정 어떻게 복구해

7.4 스스로 테스트하기

  • 생성한 이미지에 다음 슬로건을 추가하십시오. '최고의 기술 사이트!'
  • 10회 반복하는 'for' 루프를 만듭니다. 한 번에 한 픽셀씩 캔버스 아래로 그림을 이동할 수 있는지 확인합니다.
  • 그림을 함수로 래핑합니다. 부르지 않으면 어떻게 됩니까?

추가 읽기:

8. 다음은?

HTML5 내에서 발견된 새로운 기술에 대한 믿을 수 없을 정도로 간단한 가이드를 읽어주셔서 감사합니다. HTML5가 미래의 기술이라는 것은 부인할 수 없습니다. 쓰기 쉽고 측정할 수 없을 정도로 강력하기 때문에 대부분의 기술에서 채택하고 있습니다. 사람들은 항상 그것으로 놀라운 일을 하고 있고, 나는 미래에 당신도 그런 사람들 중 하나가 될 것이라고 믿어 의심치 않습니다. 나는 당신이 HTML5의 거칠고 멋진 세계로 가는 여정의 일부가 된 것을 영광으로 생각합니다.

계속 배우시기 바랍니다. 코딩을 계속하십시오. 계속해서 레벨을 올리고 개선하면 이 짧은 안내서에 소개된 기술을 사용하여 멋진 제품을 만들 수 있습니다.

공유하다 공유하다 트위터 이메일 Windows 11로 업그레이드할 가치가 있습니까?

Windows가 새롭게 디자인되었습니다. 그러나 Windows 10에서 Windows 11로 전환하도록 설득하기에 충분합니까?

다음 읽기 관련 항목
  • 워드프레스 및 웹 개발
  • HTML5
  • 장형
  • 롱폼 가이드
저자 소개 매튜 휴즈(386건의 기사 게재)

Matthew Hughes는 영국 리버풀 출신의 소프트웨어 개발자이자 작가입니다. 그는 손에 진한 블랙 커피 한 잔 없이는 거의 발견되지 않으며 그의 Macbook Pro와 카메라를 절대적으로 좋아합니다. http://www.matthewhughes.co.uk에서 그의 블로그를 읽고 트위터 @matthewhughes에서 그를 팔로우할 수 있습니다.

매튜 휴즈가 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.