웹 프런트 엔드는 단지 프레젠테이션 레이어인가요?

아니요. 웹 프런트 엔드는 세 가지 레이어로 나눌 수 있습니다. 1. 구조적 레이어는 HTML이나 XHTML과 같은 마크업 언어로 생성되며 고객이 읽고 보려는 모든 콘텐츠를 저장하는 데 사용되며, 텍스트, 이미지, 하이퍼링크 및 멀티미디어가 포함될 수 있습니다. 2. CSS로 생성된 프리젠테이션 레이어에는 웹 브라우저에서 웹 문서를 표시하는 방법에 대한 스타일 지침이 포함되어 있습니다. 3. 행동 계층은 웹 페이지의 행동을 말하며 JS 언어로 생성되며 웹 페이지의 내용을 실시간으로 업데이트하여 웹 사이트를 대화형으로 만들고 페이지가 사용자 작업에 응답하거나 변경하도록 할 수 있습니다. 조건 세트.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

W3C는 1994년 10월에 창립된 월드와이드웹 컨소시엄(World Wide Web Consortium)을 말합니다. W3C의 출현은 동일한 웹 페이지가 다른 브라우저에서 동일한 효과를 가질 수 있도록 웹 개발 표준을 사용자 정의하는 것입니다. 따라서 사용자 정의된 웹 페이지는 W3C 사양을 따라야 합니다.

웹 프론트 엔드 개발의 개념은 웹 페이지를 구조 계층, 프리젠테이션(스타일) 계층, 동작 계층의 세 가지 수준으로 나누는 것입니다.

HTML: 구조적 레이어

웹페이지의 구조적 또는 콘텐츠 레이어는 페이지의 기본 HTML 코드입니다. 집의 프레임워크가 집의 나머지 부분에 대한 견고한 기반을 구축하는 것처럼 HTML의 견고한 기반은 웹 사이트를 만들 수 있는 플랫폼을 만듭니다.

구조적 레이어는 고객이 읽거나 보고 싶어하는 모든 콘텐츠를 저장하는 데 사용됩니다. HTML 구조에는 텍스트와 이미지가 포함될 수 있으며 방문자가 웹 사이트를 탐색하는 데 사용하는 하이퍼링크가 포함됩니다. 이는 표준을 준수하는 HTML5로 인코딩되며 텍스트, 이미지 및 멀티미디어(비디오, 오디오 등)를 포함할 수 있습니다.

CSS: 스타일 레이어

이 레이어는 구조화된 HTML 문서가 웹 사이트 방문자에게 어떻게 보이는지 결정하고 CSS(Cascading Style Sheets)로 정의됩니다. 이러한 파일에는 웹 브라우저에 문서를 표시하는 방법에 대한 스타일 지정 지침이 포함되어 있습니다. 스타일 레이어에는 일반적으로 화면 크기와 장치에 따라 사이트의 디스플레이를 변경하는 미디어 쿼리가 포함됩니다.

웹사이트의 모든 시각적 스타일은 외부 스타일 시트에 있어야 합니다. 여러 스타일시트를 사용할 수 있지만 각 CSS 파일을 가져오려면 HTTP 요청이 필요하므로 사이트 성능에 영향을 미친다는 점을 명심하세요.

JavaScript: 동작 레이어

동작 레이어는 웹사이트를 대화형으로 만들어 페이지가 일련의 조건에 따라 사용자 작업이나 변경에 응답할 수 있도록 합니다. 행동 계층에서는 JavaScript가 가장 일반적으로 사용되는 언어이지만 CGI 및 PHP도 자주 사용됩니다.

개발자가 행동 레이어를 언급할 때 대부분은 웹 브라우저에서 직접 활성화되는 레이어를 의미합니다. 이 레이어를 사용하여 DOM(문서 개체 모델)과 직접 상호 작용할 수 있습니다. 콘텐츠 계층에 유효한 HTML을 작성하는 것은 행동 계층의 DOM 상호 작용에 매우 중요합니다. 동작 레이어를 구축할 때 외부 스크립트 파일을 CSS처럼 사용하여 속도와 성능을 최적화해야 합니다.

간단히 말하면 JavaScript, HTML 및 CSS가 함께 우리가 보는 웹 페이지를 구성합니다.

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

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

• JavaScript는 서버에서 데이터를 가져오고 업데이트하는 등 웹페이지의 콘텐츠를 실시간으로 업데이트하는 데 사용됩니다. 웹페이지에 일부 태그 스타일이나 콘텐츠 등을 수정하여 웹페이지를 더욱 생생하게 만들 수 있습니다.

HTML은 웹 페이지를 만드는 데 사용되는 표준 마크업 언어인 HyperText Markup Language입니다. HTML은 웹 페이지의 세 가지 구성 요소 구조를 담당합니다. HTML은 태그를 사용하여 웹 페이지의 다양한 구성 요소를 식별합니다. 소위 하이퍼텍스트는 한 페이지에서 다른 페이지로 이동할 수 있게 해주는 하이퍼링크를 말합니다.

CSS는 CSS(Cascading Style Sheet)를 의미하며 스타일은 HTML 요소를 표시하는 방법을 정의하고 웹 페이지의 모양을 제어하는 ​​데 사용됩니다. CSS는 웹 페이지의 세 가지 구성 요소의 성능을 담당하며 스타일은 일반적으로 외부 .css 파일에 저장됩니다. 모든 페이지의 레이아웃과 모양을 변경하려면 간단한 CSS 문서만 편집하면 됩니다.

JavaScript는 웹 페이지의 동작을 제어하는 ​​데 사용되는 경량 프로그래밍 언어인 스크립팅 언어(줄여서 "JS")입니다. JavaScript는 웹 페이지의 세 가지 구성 요소의 동작을 담당하며 HTML 페이지의 프로그래밍 코드에 삽입될 수 있습니다. JavaScript가 HTML 페이지에 삽입되면 모든 최신 브라우저에서 실행될 수 있습니다.

지식 확장: 레이어링의 이점

1. 공유 리소스:

외부 CSS 또는 JavaScript 파일을 작성하면 사이트의 모든 페이지에서 해당 파일을 사용할 수 있습니다. 사이트의 일부 타이포그래피 스타일을 업데이트하는 등 이 파일을 변경해야 하는 경우 해당 스타일 시트를 사용하는 모든 페이지에 변경 사항이 적용됩니다. 웹사이트의 각 페이지를 개별적으로 편집할 필요가 없습니다. 이는 대규모 웹사이트에서는 힘든 작업이 될 수 있습니다.

2. 더 빠른 다운로드 속도:

고객이 처음으로 스크립트나 스타일 시트를 다운로드한 후 웹 브라우저가 이를 캐시합니다. 이제 이러한 공유 리소스가 브라우저 캐시에 포함되므로 브라우저에서 요청한 다른 페이지가 더 빠르게 로드되어 전반적인 페이지 속도와 성능이 향상됩니다.

3. 여러 사람으로 구성된 팀:

여러 사람이 동시에 사이트에서 작업하는 경우 파일을 체크인 및 체크아웃할 수 있는 시스템을 사용하여 모든 사람이 최신 버전을 사용하고 있는지 확인할 수 있습니다. 스타일과 동작이 구조적 문서와 얽혀 있으면 더욱 어렵습니다.

4. 검색 엔진 최적화:

스타일과 구조가 명확하게 분리된 웹사이트는 시각적 스타일과 행동 정보에 얽매이지 않고 콘텐츠를 더 효과적으로 크롤링하고 페이지를 이해할 수 있기 때문에 검색 엔진에서 더 나은 성능을 발휘할 가능성이 높습니다.

5. 접근성:

사람과 브라우저는 외부 스타일 시트와 스크립트 파일에 더 쉽게 접근할 수 있습니다. 스크린 리더와 같은 소프트웨어는 어차피 사용할 수 없는 스타일을 처리할 필요 없이 구조적 레이어의 콘텐츠로 더 쉽게 작업할 수 있습니다.

6. 이전 버전과의 호환성:

특정 CSS 스타일을 사용할 수 없거나 JavaScript가 비활성화된 브라우저와 장치에서는 여전히 HTML을 볼 수 있으므로 별도의 개발 계층으로 설계된 사이트는 이전 버전과 호환될 가능성이 더 높습니다. 그런 다음 이를 지원하는 브라우저 기능을 사용하여 웹사이트를 점차적으로 향상시킬 수 있습니다.

(동영상 공유 학습: 웹 프론트엔드 시작하기)

위 내용은 웹 프런트 엔드는 단지 프레젠테이션 레이어인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!