웹 디자인 업계에서 일하는 사람들은 프론트 엔드 웹 사이트 개발을 3 발 의자에 비유합니다. 이 3 가지 다리 - 웹 개발의 세 가지 레이어 -는 구조, 스타일 및 동작을 구성합니다.
왜 레이어를 분리해야합니까?
웹 페이지를 만들 때 HTML의 구조, CSS의 시각적 스타일 및 스크립트에 대한 동작을 강등해야합니다. 레이어를 분리하면 얻을 수있는 이점 중 일부는 다음과 같습니다.
- 공유 리소스 : 외부 CSS 또는 JavaScript 파일을 작성할 때 사이트의 모든 페이지에서 해당 파일을 사용할 수 있습니다. 해당 파일을 변경해야 할 경우 웹 사이트에서 일부 인쇄 스타일을 업데이트하려면 해당 스타일 시트를 사용하는 모든 페이지에서 변경 사항이 적용됩니다. 웹 사이트의 모든 페이지를 개별적으로 편집 할 필요가 없습니다. 이는 대형 웹 사이트의 힘든 작업 일 수 있습니다.
- 빠른 다운로드 : 처음으로 고객이 스크립트 또는 스타일 시트를 다운로드하면 웹 브라우저에서 해당 스크립트 또는 스타일 시트를 캐시합니다. 이러한 공유 리소스가 이제 브라우저의 캐시에 포함되므로 브라우저에서 요청한 다른 페이지가 더 빨리로드되므로 전체 페이지 속도와 성능이 향상됩니다.
- 여러 사람 팀 : 한 번에 두 명 이상의 사람이 웹 사이트에서 작업하는 경우 파일을 체크 인 및 체크 아웃 할 수있는 시스템을 사용하여 모든 사람이 최신 버전으로 작업하고 있는지 확인할 수 있습니다. 스타일과 비헤이비어가 구조 문서와 얽혀 있다면이 작업을 훨씬 더 어렵게 만듭니다.
- SEO : 스타일과 구조가 명확하게 구분 된 사이트는 검색 엔진에서 더 효과적으로 수행 할 수 있는데, 그 이유는 비주얼 스타일과 행동 정보에서 더 이상 효과적으로 콘텐츠를 크롤링하고 페이지를 이해할 수 없기 때문입니다.
- 접근성 : 외부 스타일 시트 및 스크립트 파일은 사람과 브라우저에서보다 쉽게 액세스 할 수 있습니다. 화면 판독기와 같은 소프트웨어는 어쨌든 사용할 수없는 스타일을 다룰 필요없이 구조 계층의 컨텐츠를보다 쉽게 처리 할 수 있습니다.
- 하위 호환성: 별도의 개발 레이어로 설계된 사이트는 특정 CSS 스타일을 사용할 수 없거나 JavaScript가 비활성화 된 브라우저 및 장치가 HTML을 계속 볼 수 있기 때문에 이전 버전과의 호환성이 높습니다. 그런 다음이를 지원하는 브라우저의 기능을 사용하여 웹 사이트를 점차적으로 향상시킬 수 있습니다.
HTML : 구조 레이어
웹 페이지의 구조 또는 내용 계층은 해당 페이지의 기본 HTML 코드입니다. 집의 프레임이 집안의 나머지 부분을 구축하는 강력한 기반을 만드는 것처럼 HTML의 견고한 기반은 웹 사이트를 만들 수있는 플랫폼을 만듭니다.
구조 계층은 고객이 읽고 싶은 모든 컨텐츠를 저장하는 곳입니다. HTML 구조는 텍스트와 이미지로 구성 될 수 있으며 방문자가 웹 사이트를 탐색하는 데 사용할 하이퍼 링크를 포함합니다. 이것은 표준을 준수하는 HTML5로 코딩되며 텍스트, 이미지 및 멀티미디어 (비디오, 오디오 등)를 포함 할 수 있습니다.
사이트 콘텐츠의 모든 측면은 구조 계층에 표현되어야합니다. 이렇게하면 JavaScript가 꺼져 있거나 CSS의 기능을 전부는 아니더라도 웹 사이트 전체에 대한 CSS 액세스를 볼 수없는 고객이있을 수 있습니다.
CSS : 스타일 레이어
이 계층은 구조화 된 HTML 문서가 사이트의 방문자에게 어떻게 보이는지를 지정하며 CSS (Cascading Style Sheets)로 정의됩니다. 이 파일에는 문서를 웹 브라우저에 표시하는 방법에 대한 문체 지침이 들어 있습니다. 스타일 레이어에는 일반적으로 화면 크기 및 장치에 따라 사이트의 표시를 변경하는 미디어 쿼리가 포함됩니다.
웹 사이트의 모든 비주얼 스타일은 외부 스타일 시트에 있어야합니다. 여러 스타일 시트를 사용할 수 있지만 모든 CSS 파일에서 HTTP 요청을 가져와 사이트 성능에 영향을 미친다는 점을 기억하십시오.
JavaScript : 행동 레이어
비헤이비어 레이어는 웹 사이트를 대화 형으로 만들어 페이지가 사용자 동작에 응답하거나 조건 집합을 기반으로 변경되도록합니다. JavaScript는 비헤이비어 레이어에서 가장 많이 사용되는 언어이지만 CGI와 PHP도 매우 자주 사용됩니다.
개발자가 비헤이비어 레이어를 참조 할 때 대부분의 레이어는 웹 브라우저에서 직접 활성화되는 레이어를 의미합니다. 이 계층을 사용하여 DOM (Document Object Model)과 직접 상호 작용할 수 있습니다. 콘텐츠 레이어에 유효한 HTML을 쓰는 것은 비헤이비어 레이어의 DOM 상호 작용에 중요합니다. 비헤이비어 레이어를 빌드 할 때 CSS와 마찬가지로 외부 스크립트 파일을 사용하여 속도와 성능을 최적화해야합니다.
