>웹 프론트엔드 >CSS 튜토리얼 >실제 세계를위한 HTML5 & CSS3, 2 판

실제 세계를위한 HTML5 & CSS3, 2 판

Joseph Gordon-Levitt
Joseph Gordon-Levitt원래의
2025-02-19 10:27:09829검색

실제 세계를위한 HTML5 & CSS3, 2 판 키 테이크 아웃

HTML5 및 CSS3은 이전 브라우저와의 역 호환성을 보장하도록 설계되었습니다. 즉, 마크 업의 변경으로 인해 레이아웃 문제 나 오류가 발생하지 않습니다. 이전 브라우저가 새로운 기능을 완전히 지원하지 않더라도 페이지를 끊거나 눈에 띄는 문제를 일으키지 않습니다. HTML5 및 CSS3는 많은 모바일 웹 브라우저에 잘 지원되어 빠르게 성장하는 모바일 시장에 이상적입니다. 오프라인 웹 앱 및 웹 스토리지와 같은 HTML5 및 CSS3에 도입 된 일부 새로운 기술은 모바일 장치를 염두에두고 특별히 설계되었습니다. html5 및 css3를 사용하면 강력하고 유지하기 쉬운 미래를 방지하는 웹 페이지를 만들 수 있습니다. 구형 브라우저가 사용되지 않으면 개발자는 단순히 폴백과 폴리 플릴을 제거하면 현대식 브라우저를 대상으로 코드베이스를 남겨두면됩니다.

다음은 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 저술 한 Real World, 2nd Edition의 책에서 발췌 한 것입니다. 사본은 전 세계 상점에서 판매되거나 여기에서 eBook 양식으로 구입할 수 있습니다. html5는 콘텐츠가 표시되는 방식에 상당한 변화를 나타내지 만 이러한 변경 사항은 구형 브라우저가 질식시키지 않거나 레이아웃 문제 나 페이지 오류를 초래하지 않는다는 점에 주목할 가치가 있습니다.
    . 이것이 의미하는 바는 유효한 HTML4 또는 XHTML 마크 업이 포함 된 오래된 프로젝트를 수행하고 DocType을 HTML5 (2 장에서 다루는)로 변경하면 페이지가 브라우저와 동일하게 나타납니다. 전에. HTML5의 변경 및 추가 사항은 구형 브라우저와의 역 호환성, 심지어 구형 버전의 Internet Explorer와의 역 호환성을 보장하는 방식으로 언어로 구현되었습니다! 물론 이것은 새로운 기능이 작동한다는 것을 보장하지 않으며 단순히 페이지를 끊거나 눈에 띄는 문제를 일으키지 않는다는 것을 의미합니다.
  • . 보다 복잡한 새로운 기능 (예 : API)과 관련하여 개발자는 HTML5 및 CSS3가 제공하는 흥미로운 새로운 가능성을 수용하면서 비 지원 브라우저와 동등한 경험을 제공하기 위해 다양한 솔루션을 제공했습니다. . 때로는 이는 기본 비디오 지원이없는 브라우저에 플래시 비디오 플레이어와 같은 폴백 컨텐츠를 제공하는 것만 큼 간단합니다. 그러나 다른 경우에는 스크립팅을 사용하여 새로운 기능에 대한 지원을 모방해야했습니다. 이러한 "갭 필링"기술을 폴리 플릴이라고합니다. 고성능 웹 앱을 구축 할 때 기본 기능을 모방하기 위해 스크립트에 의존하는 것이 항상 최선의 접근 방식은 아니지만,이 책에서 논의 할 새로운 개선 사항과 기능을 포함하도록 진화 할 때 필요한 고통이 필요합니다. . 다행스럽게도 글을 쓰는 시점에서 HTML5 및 CSS3의 많은 새로운 기능을 지원하지 못하는 Internet Explorer 6 ~ 9와 같은 오래된 브라우저는 오늘날 웹 방문자의 10% 미만에서 사용됩니다. 점점 더 많은 사람들이 상록수 브라우저라고 불리는 것을 사용하고 있습니다. 즉, 자동으로 업데이트되는 브라우저. 이는 오래된 브라우저 공유가 쇠약 해지면서 새로운 기능이 더 많은 청중에게, 그리고 결국 모든 사람에게 기능적이라는 것을 의미합니다.

    이 책에서는 브라우저 비 호환성의 간격을 막기 위해 폴백 옵션 또는 폴리 플릴을 권장 할 수 있습니다. 또한 이러한 옵션 사용과 관련된 잠재적 인 단점과 함정에 대해 경고하기 위해 최선을 다할 것입니다. 물론, 때로는 폴백이나 폴리 플릴이 전혀 필요하지 않다는 점에 주목할 가치가 있습니다. 예를 들어, CSS3을 사용하여 디자인의 상자에 둥근 모서리를 만들 때 정사각형 상자를 보는 오래된 브라우저 사용자에게는 종종 사각형 상자를 보는 경우가 종종 있습니다. 사이트의 기능에는 저하가 없으며 해당 사용자는 누락 된 것에 대한 현명한 사람이 아닙니다.

    . 우리가 수업을 진행하고 새로운 주제를 소개함에 따라, 프로젝트에서 이들 중 하나를 사용할 계획이라면 앞서 언급 한 것과 같은 브라우저 지원 참조를 참조하는 것이 좋습니다. 폴백 또는 폴리 플릴을 제공 할 방법과 여부를 아십시오. 필요한 경우, 우리는 때때로 비 지원 브라우저가 수용 가능한 경험을 가지고 있는지 확인할 수있는 방법에 대해 논의 할 것입니다. 그러나 좋은 소식은 시간이 지남에 따라 점점 점점 줄어들고 있다는 것입니다.

    . 성장하는 모바일 시장 오늘날 HTML5 및 CSS3 학습을 시작하는 또 다른 강력한 이유는 폭발 모바일 시장입니다. 한 소스에 따르면 2009 년에 모든 웹 사용량의 1% 미만이 모바일 장치 및 태블릿에있었습니다. 2014 년 중반까지 그 숫자는 35%이상 상승했습니다! 그것은 5 년 이내에 놀라운 성장률입니다. 그래서 이것은 HTML5와 CSS3를 배우는 사람들에게 무엇을 의미합니까?

    HTML5, CSS3 및 관련 커팅 엔지도 기술은 많은 모바일 웹 브라우저에서 잘 지원됩니다. 예를 들어, iPhone 및 iPad, Opera Mobile, Android Browser 및 UC 브라우저와 같은 iOS 장치의 Mobile Safari는 모두 HTML5 및 CSS3 지원 수준을 강력하게 제공합니다. 이러한 브라우저 중 일부에서 지원하는 새로운 기능 및 기술에는 CSS3 애니메이션, CSS Flexbox, Canvas API, 웹 스토리지, SVG, 오프라인 웹 앱 등이 있습니다.실제로이 책에서 우리가 소개 할 새로운 기술 중 일부는 모바일 장치를 염두에두고 특별히 설계되었습니다. 오프라인 웹 앱 및 웹 스토리지와 같은 기술은 부분적으로 모바일 장치가있는 웹 페이지에 액세스하는 사람들이 점점 더 많기 때문에 설계되었습니다. 이러한 장치는 종종 온라인 데이터 사용에 제한이있을 수 있으므로 오프라인으로 웹 응용 프로그램에 액세스 할 수있는 기능으로 큰 이점을 얻을 수 있습니다. 우리는 11 장의 주제와 책 과정에서 다른 주제를 다룰 것입니다. 다양한 장치 및 플랫폼 용 웹 페이지를 만들기 위해 필요한 도구를 제공합니다.

    . 진짜 물건에

    새로운 기술에 앞서 나가고 한 수준의 브라우저에 대한 페이지와 앱을 작성하는 것은 비현실적입니다. 현실 세계와 우리가 HTML5와 CSS3가 더 많은 내용을 만들기 위해 원하는 세상에서 다양한 환경에서 작동하는 페이지를 개발할 준비가되어 있어야합니다. 이 조경에는 최신 브라우저, 나머지 이전 버전의 Internet Explorer 및 폭발적인 모바일 장치 시장이 포함됩니다. 예, 어떤면에서, 다른 사용자 에이전트에 대한 다른 지침 세트를 제공하는 것은 지저분한 브라우저 스니핑 및 코드 포킹으로 웹의 초기와 비슷합니다. 그러나 이번에는 새로운 코드가 훨씬 더 미래를 막을 수 있습니다. 구형 브라우저가 일반적으로 사용되지 않으면 폴백과 폴리 플릴을 제거하기 만하면 현대식 브라우저를 목표로하는 코드베이스 만 남기기 만하면됩니다.

    . html5와 CSS3는 훨씬 더 흥미로운 웹 페이지 저자 세계를 안내 한 주요 기술입니다. 모든 현대식 브라우저는 다수의 HTML5 및 CSS3 기능에 대한 탁월한 수준의 지원을 제공하기 때문에 강력하고 간단한 미래를 방지하는 웹 페이지를 생성합니다. 그래서“왜”에 대해 충분히,“어떻게”를 파기 시작합시다! html5 및 css3 에 대한 질문이 자주 묻습니다 html5와 css3의 주요 차이점은 무엇입니까?

    html5와 css3는 모두 웹 개발을위한 필수 도구이지만 다른 목적을 수행합니다. HTML5는 웹에서 컨텐츠를 구성하고 제시하는 데 사용되는 마크 업 언어입니다. 현대 웹 사이트의 일반적인 사용을 반영하는 새로운 요소와 속성을 소개합니다. 반면, CSS3은 HTML로 작성된 문서의 모양과 형식을 설명하는 데 사용되는 스타일 시트 언어입니다. 둥근 모서리, 그림자, 그라데이션, 전환, 애니메이션 등과 같은 새로운 기능을 소개합니다.

    HTML5 및 CSS3 학습을 시작하는 방법은 무엇입니까?

    학습을 시작하기 위해 온라인으로 사용할 수있는 몇 가지 리소스가 있습니다. HTML5 및 CSS3. Codecademy, Udemy 및 Khan Academy와 같은 웹 사이트는 대화식 과정을 제공합니다. 온라인 문서 및 튜토리얼을 참조 할 수도 있습니다. 연습은 이러한 언어를 마스터하는 데 핵심이므로 자신의 언어를 구축하거나 기존 웹 사이트를 개선하십시오. html5 및 css3를 사용하면 어떤 이점이 있습니까?

    html5 및 css3에는 몇 가지 이점이 있습니다. 그들은 더 깨끗하고 효율적인 코딩, 개선 된 성능 및 더 나은 접근성을 허용합니다. 또한 웹 사이트를 디자인하고 사용자 정의 할 때 더욱 고급 기능과 유연성이 더 높습니다. 또한 모든 현대식 브라우저에서 지원됩니다.

    모바일 웹 개발에 html5 및 css3를 사용할 수 있습니까?

    예, HTML5 및 CSS3는 모바일 웹 개발을위한 훌륭한 도구입니다. 뷰포트 메타 태그와 같은 기능을 제공하여 뷰포트의 크기 및 스케일을 제어 할 수 있으며 미디어 쿼리를 제어 할 수 있으므로 컨텐츠 렌더링이 화면 해상도와 같은 조건에 적응할 수 있습니다. 또한 모바일 인터페이스에 필수적인 터치 이벤트를 지원합니다.

    HTML5 및 CSS3로 작업 할 때 일반적인 과제는 무엇입니까?

    일부 일반적인 과제에는 모든 브라우저가 지원하는 것은 아니기 때문에 브라우저 호환성 문제가 포함됩니다. 모든 HTML5 및 CSS3 기능. 또한 이들은 여전히 ​​진화하는 기술이므로 최신 변경 사항을 유지하는 것은 어려울 수 있습니다. 또한 원하는 레이아웃과 디자인을 달성하는 것은 때때로 복잡하고 시간이 소요될 수 있습니다.

    HTML5와 CSS3 코드가 유효하고 오류가 없도록하는 방법은 무엇입니까? 온라인 도구를 사용할 수 있습니다. W3C 마크 업 검증 서비스와 마찬가지로 HTML5 코드를 확인하고 CSS3 코드의 CSS 유효성 검사 서비스와 마찬가지로. 이 도구는 코드의 오류 또는 문제를 식별합니다.

    HTML5 및 CSS3 코드를 작성하는 데 가장 모범 사례는 무엇입니까?

    일부 모범 사례에는 HTML5에서 시맨틱 요소를 사용하여 더 나은 접근성 및 SEO를 사용하는 것이 포함됩니다. , CSS3 코드를 건조하게 유지하고 (반복하지 마십시오) 읽기 및 유지 관리가 쉬운 방식으로 코드를 구성하십시오. 또한 코드가 항상 유효하고 오류가 없도록하십시오.

    다른 프로그래밍 언어와 함께 html5 및 css3를 사용할 수 있습니까?

    예, HTML5 및 CSS3는 다른 프로그래밍 언어와 함께 사용할 수 있습니다. JavaScript, PHP 및 Ruby처럼. 다른 언어는 웹 사이트의 기능과 동작을 처리하는 반면,

    HTML5 및 CSS3를 사용하여 내 웹 사이트를 반응하게 만드는 방법은 무엇입니까? 당신은 만들 수 있습니다. CSS3의 미디어 쿼리를 사용하여 웹 사이트를 반응합니다. 이를 통해 장치의 화면 크기에 따라 다양한 스타일을 적용 할 수 있습니다. 유연한 레이아웃과 유연한 이미지를 사용하여 콘텐츠 스케일을 보장하고 올바르게 크기를 조정할 수 있습니다.

    HTML5 및 CSS3의 일부 고급 기능은 무엇입니까?

    HTML5는 비디오 및 오디오 요소와 같은 고급 기능을 소개합니다. 멀티미디어, 그림을위한 캔버스 요소 및 날짜 선택기, 컬러 피커 및 슬라이더와 같은 컨트롤을 형성합니다. CSS3은 전환 및 애니메이션, 그라디언트 및 2D/3D 변환과 같은 기능을 소개합니다.

위 내용은 실제 세계를위한 HTML5 & CSS3, 2 판의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.