웹 프론트엔드의 3티어 구조는 무엇인가요?

웹 프론트엔드의 3계층 구조는 다음과 같습니다. 1. 구조계층은 HTML이나 XHTML과 같은 마크업 언어로 생성되며 고객이 읽고 싶어하는 모든 콘텐츠를 저장하는 데 사용됩니다. 보기에는 텍스트, 이미지, 하이퍼링크 및 멀티미디어(비디오, 오디오 등)가 포함될 수 있습니다. 2. CSS로 생성된 프리젠테이션 레이어에는 웹 브라우저에서 웹 문서를 표시하는 방법에 대한 스타일 지침이 포함되어 있습니다. 3. "콘텐츠가 이벤트에 어떻게 반응해야 하는지"에 대한 질문에 답하고 웹사이트를 대화형으로 만드는 역할을 담당하는 행동 계층. 페이지가 일련의 조건에 따라 사용자 작업이나 변경에 응답할 수 있도록 합니다.

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

웹 프론트엔드는 사용자에게 표시되는 웹페이지, 즉 웹사이트의 프론트엔드 부분입니다.

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

• 구조적 레이어(구조적 레이어)는 HTML 또는 XHTML과 같은 마크업 언어로 생성됩니다. 꺾쇠 괄호 안에 표시되는 단어인 태그는 웹 콘텐츠의 의미론적 의미를 설명하지만 이러한 태그에는 콘텐츠 표시 방법에 대한 정보가 포함되어 있지 않습니다. 예를 들어 P 태그는 "이것은 텍스트 단락입니다."라는 의미를 표현합니다. 프리젠테이션 레이어는 CSS로 생성됩니다. CSS는 관련 콘텐츠를 표시하는 방법에 대한 질문에 답합니다.

• 행동 계층은 "콘텐츠가 이벤트에 어떻게 반응해야 하는지"라는 질문에 답하는 역할을 담당합니다. 이는 Javascript 언어와 DOM이 지배하는 영역입니다.

• 웹 페이지의 프리젠테이션 레이어와 동작 레이어는 명시적으로 특정 지침을 제공하지 않더라도 항상 존재합니다. 이 시점에서 웹 브라우저는 웹 페이지의 구조적 계층에 기본 스타일과 기본 이벤트 핸들러를 적용합니다. 예를 들어, 브라우저는 "텍스트 세그먼트" 요소를 렌더링할 때 페이지 여백을 남깁니다. 일부 브라우저는 사용자가 요소 위에 마우스 포인터를 올리면 요소의 제목 속성 값을 표시하는 프롬프트 상자를 표시합니다.

HTML: 구조적 계층

웹페이지의 구조적 또는 콘텐츠 계층은 페이지의 기본 HTML 코드입니다. 집의 프레임워크가 집의 나머지 부분에 대한 견고한 기반을 구축하는 것처럼 HTML의 견고한 기반은 웹 사이트를 만들 수 있는 플랫폼을 만듭니다. 구조적 레이어는 고객이 읽거나 보고 싶어하는 모든 콘텐츠를 저장하는 데 사용됩니다. HTML 구조에는 텍스트와 이미지가 포함될 수 있으며 방문자가 웹 사이트를 탐색하는 데 사용하는 하이퍼링크가 포함됩니다. 이는 표준을 준수하는 HTML5로 인코딩되며 텍스트, 이미지 및 멀티미디어(비디오, 오디오 등)를 포함할 수 있습니다.

CSS: 스타일 레이어

이 레이어는 구조화된 HTML 문서가 웹 사이트 방문자에게 어떻게 보이는지 결정하고 CSS(Cascading Style Sheets)로 정의됩니다. 이러한 파일에는 웹 브라우저에 문서를 표시하는 방법에 대한 스타일 지정 지침이 포함되어 있습니다. 스타일 레이어에는 일반적으로 화면 크기와 장치에 따라 사이트의 디스플레이를 변경하는 미디어 쿼리가 포함됩니다. 웹사이트의 모든 시각적 스타일은 외부 스타일 시트에 있어야 합니다. 여러 스타일시트를 사용할 수 있지만 각 CSS 파일을 가져오려면 HTTP 요청이 필요하므로 사이트 성능에 영향을 미친다는 점을 명심하세요.

JavaScript: 동작 레이어

동작 레이어는 웹사이트를 대화형으로 만들어 페이지가 일련의 조건에 따라 사용자 작업이나 변경에 응답할 수 있도록 합니다. 행동 계층에서는 JavaScript가 가장 일반적으로 사용되는 언어이지만 CGI 및 PHP도 자주 사용됩니다. 개발자가 행동 레이어를 언급할 때 대부분은 웹 브라우저에서 직접 활성화되는 레이어를 의미합니다. 이 레이어를 사용하여 DOM(문서 개체 모델)과 직접 상호 작용할 수 있습니다. 콘텐츠 계층에 유효한 HTML을 작성하는 것은 행동 계층의 DOM 상호 작용에 매우 중요합니다. 동작 레이어를 구축할 때 외부 스크립트 파일을 CSS처럼 사용하여 속도와 성능을 최적화해야 합니다.

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

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

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

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

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

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

4. 검색 엔진 최적화:

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

5. 접근성:

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

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

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

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

위 내용은 웹 프론트엔드의 3티어 구조는 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!