마크업, 섹션, 블록 및 자동 차단

개발자는 웹 사이트를 디자인하고 기능을 만들기 위해 콘텐츠에서 동적으로 렌더링되는 마크업과 DOM을 사용합니다. 마크업과 DOM은 유연하게 조작하고 스타일링할 수 있는 방식으로 구성됩니다. 동시에 바로 사용 가능한 기능을 제공하므로 개발자는 최신 웹 사이트의 측면에 대해 걱정할 필요가 없습니다.

문서 구조

문서를 구조화할 때 가장 중요한 한 가지 측면은 콘텐츠를 제공할 작성자가 문서를 간단하고 직관적으로 만들 수 있도록 하는 것입니다.

이는 작성자를 프로세스 초기에 참여시키는 것이 강력하게 권장됨을 의미합니다. 대부분의 경우 작성자가 블록과 섹션에 대한 개념 없이 페이지로 이동해야 하는 콘텐츠를 Google 문서 또는 Word 문서에 넣은 다음 필요한 경우에만 섹션과 블록을 소개하고 구조를 약간 변경하는 것이 좋습니다.

문서는 요약에서 다음 구조를 따릅니다.

Word 또는 Google Doc 문서에서 작성된 페이지는 제목, 본문 텍스트, 목록, 이미지, 링크 등과 같은 잘 알려진 의미 체계 모델을 사용합니다. HTML, Markdown 및 Google Doc / Word 간에 공유됩니다. 우리는 이것을 부른다 기본 컨텐츠. 작성자가 문서를 처리하는 자연스러운 방법이므로 이상적인 상황에서는 기본 컨텐츠로 작성된 컨텐츠 중 많은 컨텐츠를 가능한 한 많이 남겨둡니다.

기본 컨텐츠 외에도 페이지 개념이 있습니다 섹션, 가로 규칙으로 구분되거나 --- 를 클릭하여 페이지의 특정 요소를 함께 그룹화합니다. 콘텐츠를 함께 그룹화하는 것은 의미론적 이유와 디자인적 이유가 모두 있을 수 있다. 페이지의 섹션에 다른 배경색이 있는 간단한 경우가 있을 수 있습니다.

이외에도 다음과 같은 개념이 있습니다. 블록 블록 유형을 식별하는 첫 번째 행으로 머리글이 있는 표로 작성됩니다. 이 개념은 코드를 구성 요소로 사용하는 가장 쉬운 방법입니다.

섹션에는 여러 블록이 포함될 수 있습니다. 블록은 작성자가 사용하기 매우 어렵게 하므로 중첩되면 안 됩니다.

DOM과 마크업 비교

AEM은 제공된 콘텐츠에서 깔끔하고 읽기 쉬운 의미 체계 마크업을 생성합니다. 를 사용하여 쉽게 액세스할 수 있습니다. 소스 보기 현재 읽고 있는 페이지의 마크업을 확인합니다.

에서 사용되는 JavaScript 라이브러리 scripts.js 는 마크업을 가져와 DOM으로 향상시켜 대부분의 개발 작업, 특히 블록 작성에 사용합니다. 사용자 지정 프로젝트 코드에 대해 사용하기 쉬운 DOM을 만들려면 2단계 프로세스로 보는 것이 가장 좋습니다.

첫 번째 단계에서는 다음과 유사한 섹션, 블록 및 기본 콘텐츠로 마크업을 만듭니다.

두 번째 단계에서는 위의 마크업이 다음 예제 DOM으로 확장되어 스타일링 및 기능 추가에 사용할 수 있습니다. 서버에서 제공되는 마크업과 대부분의 개발 작업에 사용되는 증강된 DOM의 차이점은 아래에 강조 표시되어 있습니다.

주로 래퍼 소개로 구성됩니다 <div> 블록 및 기본 콘텐츠의 경우 및 AEM 블록 로더에서 사용하는 유용한 CSS 클래스 및 데이터 속성을 동적으로 더 추가합니다.

섹션

섹션은 작성자별로 기본 컨텐츠와 블록을 그룹화하는 방법입니다. 대부분의 시간 섹션 구분은 페이지 부분에 대한 다른 배경색과 같은 섹션 간의 시각적 차이점을 기반으로 도입됩니다.

개발 관점에서 CSS 스타일링을 넘어서는 섹션과의 상호 작용이 보통 많지 않다.
섹션에는 라는 특수 블록이 포함될 수 있습니다. Section Metadata: 섹션에 데이터 속성이 생깁니다. 데이터 속성의 이름은 작성자가 선택할 수 있으며, 알려진 섹션 메타데이터 속성만 해당됩니다. Style 포함 섹션 요소에 추가된 추가 CSS 클래스로 변환됩니다.

블록 및 기본 콘텐츠는 작성자가 섹션 구분을 특별히 도입하지 않더라도 항상 섹션에 래핑됩니다.

기본 컨텐츠

Word 문서, Google 문서, Markdown 및 HTML 간에 공유되는 광범위한 의미 체계가 있습니다. 예를 들어 서로 다른 수준의 머리글이 있습니다(예: <h1> - <h6>), 이미지, 링크, 목록(<ul>, <ol>), 강조(<em>, <strong>) 등

작성자가 익숙한 도구에서 이러한 의미 체계를 사용하는 방법에 대한 직관적인 이해를 활용합니다(예: Word/Google 문서)를 만들고 이를 Markdown에 매핑한 다음 HTML 마크업에서 렌더링합니다.

개발자가 모든 매핑을 비교적 간단하고 직관적으로 사용해야 합니다. 우리가 가능한 가장 단순한 번역보다 조금 더 나아가는 한 영역은 이미지를 다루는 것이다. 단순 대신 <img> 태그, 전체 <picture> 태그는 webp를 지원하는 최신 브라우저와 지원하지 않는 이전 브라우저를 위한 다양한 포맷과 함께 데스크탑 및 모바일 디바이스에서 표시하는 데 필요한 다양한 해상도로 렌더링됩니다.

블록

대부분의 프로젝트별 CSS와 JavaScript는 블록에 있습니다. 작성자는 문서에서 블록을 만들고 개발자는 해당 코드를 작성하여 블록을 CSS로 스타일링하거나 DOM을 장식하여 블록의 마크업을 가져와 원하는 스타일 및 기능에 필요하거나 편리한 구조로 변환합니다.

블록 이름은 블록의 폴더 이름뿐만 아니라 페이지에서 블록을 사용할 때 블록 로더에 의해 로드되는 CSS 및 JavaScript 파일의 파일 이름으로 사용됩니다. 블록 이름은 직관적인 스타일을 위해 블록의 CSS 클래스 이름으로도 사용됩니다.

JavaScript는 모듈(ESM)로 로드되고 블록 로딩의 일부로 실행되는 기본 함수를 내보냅니다.

모든 블록 수준 CSS는 프로젝트의 다른 부분에 대한 부작용이 없는지 확인하기 위해 블록에 범위 지정되어야 합니다. 즉, 블록의 모든 선택기에 해당 블록 클래스 접두사가 추가되어야 합니다. 경우에 따라 선택기에도 블록의 래퍼 또는 포함 섹션을 사용하는 것이 적절합니다.

JavaScript에는 DOM 조작과 CSS 선택기의 복잡성이 균형을 이루고 있습니다. 복잡한 취약성 CSS 선택기는 권장되지 않으며 동시에 모든 요소에 클래스를 추가하면 코드가 더 복잡해지고 요소의 의미 체계는 무시됩니다.

프로젝트의 가장 중요한 개념 중 하나는 작성자가 작업을 단순하고 직관적으로 유지하는 것입니다. 복잡한 블록은 콘텐츠를 작성하기 어렵게 하므로 개발자는 직관적인 작성 경험을 레이아웃 또는 애플리케이션 논리에 필요한 DOM으로 변환하는 복잡성을 감수하는 것이 중요합니다. 종종 복잡성을 작성자에게 위임하고 싶은 유혹을 느낀다. 대신 개발자는 블록이 작성자에게 작성하기 위해 까다롭지 않은지 확인해야 합니다. 작성자는 항상 블록을 단순히 복사/붙여넣기하고 그것이 무엇에 관한 것인지 직관적으로 이해할 수 있어야 한다.

간단한 예는 다음과 같습니다. 열 블록. 작성자가 만든 각 인스턴스에 있는 열 수에 따라 JavaScript에 추가 클래스를 추가합니다. 이를 통해 두 열과 세 열에 있는 콘텐츠의 유연한 스타일을 사용할 수 있습니다.

블록은 매우 간단하거나 전체 애플리케이션 구성 요소 또는 위젯을 포함할 수 있으며 개발자가 코드베이스를 쉽게 관리할 수 있고 필요에 따라 웹 페이지에 로드할 수 있는 작은 코드 청크로 구성하는 방법을 제공합니다.

블록의 컨텐츠는 마크업에 중첩 항목으로 렌더링됩니다 <div> 작성자가 입력한 행 및 열에 대한 태그입니다. 가장 간단한 경우, 한 블록에 하나의 셀만 있습니다.

<div class=”blockname”>
  <div>
     <div>
      <p>Hello, World.</p>
     </div>
  </div>
</div>

작성자는 첫 번째 행 또는 테이블 머리글에 블록 이름이 있는 테이블을 추가하는 것만으로 임시 방식으로 페이지에 블록을 추가할 수 있습니다. 일부 블록도 자동으로 로드됩니다. header 및 footer 사이트의 모든 페이지에 표시되어야 하는 블록이 그러한 예입니다.

블록 옵션

특정 상황에 따라 블록이 약간 다르게 보이거나 동작해야 하지만 그 자체로 새 블록이 될 정도는 다르지 않다면 작성자가 추가하도록 할 수 있습니다 블록 옵션 괄호로 묶인 블록을 클릭합니다. 이러한 옵션은 수정된 클래스를 블록에 추가합니다. 예 Columns (wide) 테이블 머리글에서 다음 마크업을 생성합니다.

<div class=”columns wide”>

블록 옵션에는 여러 단어가 포함될 수도 있습니다. 예 Columns (super wide) 하이픈을 사용하여 연결됩니다.

<div class=”columns super-wide”>

블록 옵션이 다음과 같이 쉼표로 구분된 경우 Columns (dark, wide), 개별 클래스로 추가됩니다.

<div class=”columns dark wide”>

자동 차단

이상적인 시나리오에서는 문서에 표를 도입하면 읽기 및 편집이 어려워지므로 대부분의 콘텐츠가 블록 외부에서 작성됩니다. 반대로 블록은 개발자가 코드를 체계적으로 구성할 수 있는 훌륭한 메커니즘을 제공합니다.

두 세계의 장점을 모두 활용하기 위해 자주 사용되는 메커니즘은 다음과 같습니다 자동 차단. 자동 차단은 작성자가 실제로 컨텐츠를 만들지 않아도 기본 컨텐츠와 메타데이터를 블록으로 바꿉니다. 자동 차단은 블록이 로드되기 전에 페이지 데코레이션 프로세스 초기에 발생하며, 서버에서 마크업으로 가져오는 것처럼 프로그래밍 방식으로 블록의 DOM 구조를 만드는 방법입니다.

자동 차단은 메타데이터와 함께 사용되는 경우가 많으며, 특히 template 속성. 페이지에 공통 템플릿이 있는 경우, 즉 특정 페이지 디자인이나 기능을 공유하는 경우 일반적으로 자동 차단에 좋은 기회입니다.

블로그 게시물의 기사 머리글이 좋은 예입니다. 여기에는 작성자, 블로그 게시물의 제목, 영웅 이미지 및 게시 날짜에 대한 정보가 포함될 수 있습니다. 작성자가 이러한 모든 정보가 포함된 블록을 작성하게 하는 대신 자동 블록(예: article-header 블록)이 \를 기반으로 페이지에 프로그래밍 방식으로 추가됩니다.<h1>, 첫 번째 이미지, 블로그 작성자 및 게시 날짜 메타데이터.

이렇게 하면 콘텐츠 작성자는 정보를 블록 외부에 있는 문서 구조인 원래 위치에 유지할 수 있습니다. 동시에, 개발자는 모든 레이아웃 및 스타일링 정보를 블록에 유지할 수 있다.

또 다른 매우 일반적인 사용 사례는 문서의 링크 주위에 블록을 래핑하는 것입니다. 개발자가 비디오의 모든 코드를 인라인 임베드에 임베드하려는 경우에 링크를 포함하여 YouTube 비디오에 연결하는 것이 좋은 예입니다. embed 차단합니다.

이 메커니즘은 외부 애플리케이션과 비디오, 콘텐츠 조각, 모달, 양식 및 기타 애플리케이션 요소에 대한 내부 참조를 모두 포함하는 유연한 방법으로도 사용할 수 있습니다.

의 라이프를 자동으로 차단하는 프로젝트 코드 buildAutoBlocks() (으)로 scripts.js.

다음 자동 차단의 예를 참조하십시오.