CSS로 데이터를 주문하기 위해 그리드 셰퍼드 기술 사용

목자들은 양 떼를 돌보고 질서와 구조를 가져 오는 데 능숙합니다. 수백 마리의 양이 있더라도 목자들은 여전히 ​​하루가 끝날 때 농장으로 돌아갈 것입니다.

데이터를 처리 할 때 프로그래머는 종종 데이터가 올바르게 필터링되었는지 또는 정렬되는지 여부를 알지 못합니다. 각 요소가 수신되는 위치가 알려지지 않기 때문에 배열을 반복하고 페이지에 데이터를 표시 할 때 특히 고통 스럽습니다. Grid Shepherd는 JavaScript 대신 CSS 그리드를 사용하여 원하는 위치로 프로젝트를 찾아서 정렬하는 데 도움이되는 기술입니다.

이것이 우리 가이 기사에서 살펴볼 것입니다. 그리드 셰퍼드 기술은 우리가 처리하는 데이터에 순서와 구조를 가져올 수 있으며, 그 어느 때보 다 데이터가 어디서 사용되는지에 대한 명확한 이해를 제공합니다.

더 깊이 이해해 보자.

JavaScript를 사용하여 정렬합니다

우리는 정렬되지 않은 농장 동물을 반복하여 시작할 것입니다. 소와 양이 들판에서 행복하게 방목한다고 상상해보십시오. Array.prototype.sort 메소드를 사용하여 프로그래밍 방식으로 결합하고 페이지에 나열 될 수 있습니다.

 동물 = [
  {이름 : 'Edna', 동물 : 'cow'},
  {이름 : 'Liam', 동물 : '양'},
  {이름 : 'fink', 동물 : '양'},
  {이름 : 'Olga', 동물 : 'cow'},
];
SortedAnimals = Animals.sort ((a, b) => {let let let
  if (a.animal> b.animal) 반환 1;
  반환 0;
});
Console.log (SortedAnimals);
/* 반품:
  [{이름 : 'Elga', 동물 : 'cow'},
    {이름 : 'Olga', 동물 : 'cow'},
    {이름 : 'Liam', 동물 : '양'},
    {이름 : 'fink', 동물 : '양'}]
*/

그리드 셰퍼드에 대해 알아보십시오

그리드 셰퍼드 방법을 사용 하면 JavaScript를 사용하지 않고 데이터 정렬을 사용할 수 있습니다. 대신, 우리는 CSS 그리드에 의존하여 우리를 위해 일을합니다.

구조는 위의 JavaScript 객체 배열과 정확히 동일하지만 DOM 노드로 표시됩니다.

<main><div> 에드나</div>
  <div>리암</div>
  <div>젠</div>
  <div>Fink</div>
</main>

이 동물을 관리하려면 우리는 공용 영역에서 주변을 둘러싸고 있습니다. 이것이 우리가 사용하는 것입니다.<main></main> 요소의 이유. display: grid 설정함으로써 각 동물이 차지 해야하는 열 (또는 행)을 정의 할 수있는 그리드 서식 컨텍스트를 만듭니다.

 .Sheep {Grid-Column : 1; }
.cow {그리드-컬럼 : 2; }

grid-auto-flow: dense 사용하여 각 동물은 각 정의 된 영역에서 첫 번째 사용 가능한 위치로 자동 배열됩니다. 이것은 여러 가지 다른 정렬 옵션과 함께 사용할 수 있습니다. 다른 열을 정의하면 데이터가 마술처럼 정렬됩니다.

 기본 {
  디스플레이 : 그리드;
  그리드-아우토 플로우 : 밀도;
}

.Sheep {Grid-Column : 1; }
.cow {그리드-컬럼 : 2; }

고급 양

CSS 카운터를 사용하여 관리 사례를 더욱 향상시킬 수 있습니다. 이런 식으로, 우리는 각 열의 동물의 수를 계산하고 Lea Verou의 2011 년 연설에서 Heydon Pickering이 제안한 수량 쿼리를 조건부로 수량을 기준으로 스타일로 계산할 수 있습니다.

수량 쿼리는 클래스 계산을위한 일종의 선택기에 따라 다릅니다. 이것은 다음과 같습니다 :nth-child(An B [of S]?) 의사 클래스 표기법이지만 현재 Safari에서만 사용할 수 있음). 즉, 다음은 해결 방법으로 :nth-of-type() 을 사용해야합니다.

작동하려면 몇 가지 새로운 요소 유형이 필요합니다. 웹 구성 요소 또는 HTML 요소를 사용자 정의 이름으로 바꾸어 수행 할 수 있습니다. 브라우저는 HTMLUnknownElement 사용하여 정의되지 않은 태그를 나타내므로 div 와 매우 유사하게 작동하기 때문에 이러한 요소가 HTML 사양에 있지 않은 경우에도 적용됩니다. 문서는 이제 다음과 같습니다.

<fence><sheep> 리사</sheep><sheep> 보니</sheep><cow> 올라프</cow><sheep> 젠</sheep></fence>

이제 사용자 정의 요소 유형에 액세스 할 수 있습니다. 양이나 젖소의 수가 10 이하이면 빨간색 배경을 적용합시다.

 양 : nth-last-of-type (n 10),
양 : nth-last-of-type (n 10) ~ 양,
암소 : nth-last-of-type (n 10),
소 : nth-last-of-type (n 10) ~ cow, {
  배경색 : 빨간색;
}

또한 카운터는 counter-reset: countsheep countcow; before 선택기를 사용하여 각 요소를 찾아 위로 계산합니다.

 양 :: 이전 {
  카운터 증가 : Countsheep;  
  내용 : 카운터 (Countsheep); 
}

여기서는 VUE를 사용하여 VUE 전환과 두 가지 정렬 옵션을 사용하여 동물을 동적으로 추가 및 삭제합니다. 동물을 더 많이 추가하고 일부를 제거하더라도 동물이 자연스럽게 올바른 기둥을 차지하는 방법을보십시오.

그리드 셰퍼드는 지정되지 않은 데이터에도 사용될 수 있습니다.

• 여론 조사에서 유권자를 분리하고 계산하고 (아마도 두 부분과 해당 프로필 사진) 실시간으로 삽입하십시오.
• 직위, 연령, 높이에 기초한 그룹 직원/동료; 그리고
• 계층 구조를 만듭니다

관리 및 접근성

grid-auto-flow: dense 그리드의 DOM 구조를 변경하지 않습니다. 요소가 포함 된 시각적으로 다시 표시됩니다. 카운터 숫자가 함께 혼합되므로 알파벳순으로 분류 된 마지막 예제에서 부작용을 볼 수 있습니다. DOM 구조를 변경하면 스크린 리더를 사용하는 사람들뿐만 아니라 Traversal에도 영향을 줄 수 있습니다.

또한 평평한 문서 구조는 스크린 리더에게 해로울 수 있습니다. 대신, 나는이 데모 그리드를 그래픽으로 취급하고 더 긴 텍스트 대체 정보를 제공합니다.

종결!

기존 레이아웃 요구 사항 이외의 사용 사례에 Mesh와 같은 강력한 CSS 레이아웃 도구를 사용하고 과거에 다른 언어가 필요한 영역을 입력하는 것이 매우 영리합니다. 이 경우 CSS 그리드의 레이아웃 장점과 JavaScript의 동적 데이터 처리 기능이 어떻게 겹치는지 알 수 있으며, 이것이 원하는대로 렌더링 된 데이터를 구부리기 위해 더 많은 선택과 힘을 제공하는 방법을 알 수 있습니다.

위 내용은 CSS로 데이터를 주문하기 위해 그리드 셰퍼드 기술 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!