>웹 프론트엔드 >프런트엔드 Q&A >프런트엔드 페이지는 어떤 세 개의 레이어로 구성되어 있나요?

프런트엔드 페이지는 어떤 세 개의 레이어로 구성되어 있나요?

青灯夜游
青灯夜游원래의
2021-10-28 14:02:428904검색

프런트엔드 페이지는 "구조 레이어", "프리젠테이션 레이어", "행동 레이어"의 세 가지 레이어로 구성됩니다. 구조 레이어는 문서의 구조를 구축하는 데 사용되는 HTML로 생성된 페이지의 뼈대입니다. 프리젠테이션 레이어는 문서의 프리젠테이션 효과를 설정하는 데 사용되는 CSS로 생성된 페이지의 스타일입니다. 문서의 동작을 구현하는 데 사용되는 JavaScript로 생성된 페이지의 동작입니다.

프런트엔드 페이지는 어떤 세 개의 레이어로 구성되어 있나요?

이 튜토리얼의 운영 환경: windows7 시스템, CSS3&&HTML5&&javascript 버전 1.8.5, Dell G3 컴퓨터.

프런트 엔드 페이지의 세 가지 레이어는 구조 레이어, 프리젠테이션 레이어, 동작 레이어입니다.

  • 구조 레이어 는 HTML 또는 XHTML 마크업 언어로 생성되고 문서의 구조를 구축하는 데 사용되는 페이지의 뼈대입니다.

    HTML은 제목, 텍스트, 이미지 등과 같은 웹페이지의 콘텐츠를 정의하는 데 사용됩니다.

  • 프레젠테이션 레이어 는 CSS(Cascading Style)로 생성된 페이지 스타일입니다. 시트) 문서의 프리젠테이션 효과를 설정하는 데 사용됩니다.

    CSS는 색상, 글꼴, 배경 등과 같은 웹 페이지의 모양을 제어하는 ​​데 사용됩니다.

  • 동작 레이어는 JavaScript 언어로 생성된 페이지의 동작이며 사용됩니다. 문서의 동작을 구현합니다.

    JavaScript는 서버에서 데이터를 가져와 웹 페이지에 업데이트하거나 일부 태그의 스타일이나 콘텐츠를 수정하는 등 웹 페이지의 콘텐츠를 실시간으로 업데이트하는 데 사용됩니다. 웹페이지가 더욱 생생해졌습니다.

그러나 이 세 가지 기술 사이에는 다음과 같은 잠재적인 중복 영역이 있습니다. DOM 기술은 웹 페이지의 구조를 변경하는 데 사용될 수 있습니다. 중첩 기술의 예는 CSS에서도 찾을 수 있습니다. :hover 및 :focus와 같은 사전 정의된 기호(의사 클래스 속성)를 사용하면 사용자가 트리거한 이벤트를 기반으로 렌더링을 변경할 수 있습니다. 요소 표시를 변경하는 것은 물론 표시 계층의 "영향권"이지만 사용자가 트리거한 이벤트에 반응하는 것은 동작 계층의 영역입니다. 프리젠테이션 레이어와 동작 레이어가 겹쳐서 회색 영역이 생성됩니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 배우기를 방문하세요! !

위 내용은 프런트엔드 페이지는 어떤 세 개의 레이어로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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