HTML로 할 수 있다는 것을 몰랐던 5 가지

현실을 직시하자, 웹 개발은 쉽게 엉망이 될 수 있습니다. HTML, CSS 및 자바 스크립트 수년에 걸쳐 겸손한 기원에서 모두 진화 해 왔으며 어떻게 사용해야하는지 모호합니다. 결과적으로 유지 관리 할 수없는 혼란을 만들기가 너무 쉽습니다. 표준을 준수하고 사양의 최신 개선 사항을 활용한다고해서 좋은 코드가 보장되는 것은 아니지만 확실히 도움이 될 수 있습니다.

모든 유형의 소프트웨어 개발에서 유지 보수 가능한 코드를 작성하는 데있어 모듈화가 가장 중요합니다. 따라서 웹 구성 요소를 면밀히 주시해야합니다. 브라우저 지원은 좋지 않지만 폴리 필 , 사용자 지정 요소를 활용하여 코드를 즉시 구성 할 수 있습니다. 이 개발 스타일은 미래이므로 지금 익숙해 질 가치가 있습니다.



명확한 이해를 위해 코드를 간소화



명확한 이해를 위해 코드를 간소화

HTML5 자체는 좋은 코딩 관행을 장려하는 데 도움이되는 여러 가지 새로운 요소 (및 더 이상 사용되지 않는 요소)를 도입했습니다. 다음과 같은 HTML5의 설명 요소를 사용하는 의미 체계 마크 업에 대해 들어 보셨을 것입니다. 포함 된 콘텐츠 유형을 나타냅니다.

ipad air 2에 그림을 그릴 수 있습니까?

예를 들어, HTML 요소는 메뉴 표시 줄, 콘텐츠 섹션, 바닥 글 등을 나타내는 부분을 즉시 식별하므로 코드를 깔끔하게 정리하는 데 도움이 될 수 있습니다.



포토샵에서 스토리 보드를 만드는 방법

최신 JavaScript 표준을 활용하는 경우에도 도움이됩니다. JavaScript도 지저분해질 수 있지만 최근에는 작업하기가 훨씬 쉬워졌습니다. ES6 구문은 브라우저에서 광범위하게 지원되며 화살표 함수 및 클래스와 같은 기능을 사용하면 생활이 훨씬 쉬워 질 수 있습니다.하지만 많은 개발자들이 익숙하지 않거나 사용을 경계합니다.

모듈 식 개발이라는 주제를 이어가는 JavaScript는 이제 모듈로드를 지원하므로 종속성을 깔끔하게 관리 할 수 ​​있습니다.

01. 음성 인식 및 합성

다가올 것들의 소리



다가올 것들의 소리(이미지 출처 : Unsplash의 Jason Rosewell의 사진)

한때는 특수 소프트웨어가 필요한 복잡한 기능 이었지만 이제는 브라우저에 직접 구축되고 있습니다. Web Speech API에는 텍스트 음성 변환 및 음성 텍스트 변환을 지원하는 구성 요소가 있습니다. 후자는 온라인 서비스 (Chrome에서 Google Cloud Speech API 사용) 또는 기기의 기본 음성 인식 서비스를 사용합니다. 향후 모바일 장치에서 널리 사용될 것으로 예상됩니다.

02. 색상 선택기 표시

올바른 색상 선택

역대 가장 인기있는 포스터
올바른 색상 선택(이미지 출처 : 사진 : Unsplash의 Scott Webb)

사소하게 들릴지 모르지만 이것은 HTML5가 이전에 상당히 복잡한 UI 구성 요소의 사용자 지정 코딩이 필요했던 일반적인 작업을 단순화하는 방법을 보여주는 좋은 예입니다. 클릭하면 장치 고유의 색상 선택기를 사용하여 시각적 색상 선택기를 표시합니다. 이것은 HTML 캔버스에서 특히 유용 할 수 있습니다. 모바일 용 Safari를 제외하고 광범위하게 지원됩니다.

03. 브라우저 UI 색상 변경

브라우저 용 색상 테마

브라우저 용 색상 테마(이미지 출처 : Unsplash의 Marko Blažević의 사진)

이것은 모바일 플랫폼에서 멋진 미적 감각을 제공 할 수 있습니다. 사이트를 볼 때 도구 모음의 색상을 변경하도록 브라우저에 지시하도록 설계되었습니다. 안타깝게도 약간 표준화되지 않았기 때문에 '테마 색상' Chrome, Firefox 및 Opera와 호환되며 iOS에서는 다음이 필요합니다. 'apple-mobile-web-app-status-bar-style' (전체 화면 모드에서만 작동합니다).

04. 화면마다 다른 이미지

이미지 및 해상도 지정

이미지 및 해상도 지정(이미지 출처 : Unsplash의 Tran Mau Tri Tam 사진)

이미 반응 형 디자인을 구현하고 있기를 바랍니다.이 경우 이미지 크기가 뷰포트에 맞게 조정됩니다. 사용자가 가장 큰 버전의 이미지를 다운로드 한 다음 다운 샘플링하도록 강요 할 것이기 때문에 이것은 완벽하지 않습니다. HTML5 입력 요소를 사용하면 사이트를보고있는 화면 해상도에 따라 표시 할 다른 이미지를 지정할 수 있습니다.

초보자를위한 Adobe After Effects 자습서 pdf

05. 휴대 전화 진동

흔들림

온통 흔들어(이미지 출처 : Unsplash의 Gilles Lambert의 사진)

명확하게 이름이 지정된 Vibration API는 vibrate ()라는 단일 함수를 노출합니다.이 함수는이를 지원하는 장치에서 정확히 말하는대로 수행합니다. 이 함수는 진동 패턴을 설명하는 목록을 인수로받습니다. Chrome, Firefox 및 Opera에서 작동하지만 Edge 또는 Safari에서는 운이 좋지 않습니다. 일부 광고에서 사용자의 관심을 끌기 위해이 기능을 사용하는 것으로보고되었으므로 배심원 단은 이것이 실제로 좋은 아이디어인지 여부를 결정합니다.

이 기사는 원래 웹 디자이너 문제 266. 여기서 구입 .

관련 기사: