목차
html5와 css3는 모두 웹 개발을위한 필수 도구이지만 다른 목적을 수행합니다. HTML5는 웹에서 컨텐츠를 구성하고 제시하는 데 사용되는 마크 업 언어입니다. 현대 웹 사이트의 일반적인 사용을 반영하는 새로운 요소와 속성을 소개합니다. 반면, CSS3은 HTML로 작성된 문서의 모양과 형식을 설명하는 데 사용되는 스타일 시트 언어입니다. 둥근 모서리, 그림자, 그라데이션, 전환, 애니메이션 등과 같은 새로운 기능을 소개합니다.
HTML5와 CSS3 코드가 유효하고 오류가 없도록하는 방법은 무엇입니까? 온라인 도구를 사용할 수 있습니다. W3C 마크 업 검증 서비스와 마찬가지로 HTML5 코드를 확인하고 CSS3 코드의 CSS 유효성 검사 서비스와 마찬가지로. 이 도구는 코드의 오류 또는 문제를 식별합니다.
예, HTML5 및 CSS3는 다른 프로그래밍 언어와 함께 사용할 수 있습니다. JavaScript, PHP 및 Ruby처럼. 다른 언어는 웹 사이트의 기능과 동작을 처리하는 반면,
웹 프론트엔드 CSS 튜토리얼 실제 세계를위한 HTML5 & CSS3, 2 판

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

Feb 19, 2025 am 10:27 AM

실제 세계를위한 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으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue 3 vue 3 Apr 02, 2025 pm 06:32 PM

그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.

브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까? 브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까? Apr 02, 2025 pm 06:17 PM

나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.

끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드 끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드 Apr 03, 2025 am 10:30 AM

다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

CI/CD에 약간 CI/CD에 약간 Apr 02, 2025 pm 06:21 PM

"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.

WordPress 블록 편집기에서 Markdown 및 현지화 사용 WordPress 블록 편집기에서 Markdown 및 현지화 사용 Apr 02, 2025 am 04:27 AM

WordPress 편집기에서 사용자에게 직접 문서를 표시 해야하는 경우 가장 좋은 방법은 무엇입니까?

반응 형 디자인을위한 브라우저 비교 반응 형 디자인을위한 브라우저 비교 Apr 02, 2025 pm 06:25 PM

목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다

플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까? 플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까? Apr 05, 2025 pm 05:51 PM

플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.

CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? Apr 05, 2025 pm 11:24 PM

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

See all articles