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