CSS 그리드로 카드 기반 Tumblr 레이아웃을 재 설계합니다

이 튜토리얼은 CSS 그리드를 사용하여 Tumblr 디자인에서 영감을 얻은 반응 형 그리드 기반 카드 레이아웃을 만드는 방법을 보여줍니다. 헤더 카드와 여러 개의 주제 카드가있는 레이아웃을 만들어 낼 것입니다. 각각 이미지와 제목이 포함되어 있습니다.

최종 디자인은 완전히 반응이 좋으며 다양한 화면 크기에 적응하면서 일관된 시각적 매력을 유지합니다. 주제를 선택하는 기능은이 자습서에서

가 구현되지 않습니다. 우리는 시각적 그리드 레이아웃에만 중점을 둡니다

주요 기능 :

CSS 그리드 :

응답 성과 유연성을위한 기본 레이아웃 엔진. 플로트 폴백 : CSS 그리드를 지원하지 않는 이전 브라우저와의 호환성을 보장합니다.

Sass :

변수와 믹스 인과의 효율적인 스타일링에 사용됩니다 대화식 요소 : 사용자 경험을위한 호버 및 초점 효과. 접근성 : 키보드 내비게이션이 고려됩니다 브라우저 호환성 :

및 와 같은 기능으로 잠재적 인 문제를 해결합니다.

마크 업 구조 :
• HTML은 개별 카드를 나타내는 목록 항목 ( )이 포함 된 클래스 "그리드"클래스가있는 순서대로 목록 (<code> )으로 구성됩니다. 각 주제 카드 ()에는 제목 ()과 image (<conuble img src="%EB%A7%81%ED%81%AC%EA%B0%80%20%ED%8F%AC%ED%95%A8%EB%90%98%EC%96%B4%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4%20(<conuble%20=" alt="alt =" all="all =" css></conuble> <strong> & lt;!-더 많은 주제 카드-& gt; >> </strong>
레이아웃 구현 (CSS Grid) :
• CSS 그리드 레이아웃은 유지 관리 및 응답 성을 위해 SASS 변수를 사용하여 정의됩니다. 카드 스타일 : CSS는 카드를 스타일로 만들어 이미지가 를 사용하여 전체 카드 영역을 덮고 대비를 향상시키기 위해 방사형 구배 오버레이를 추가합니다. 대화식 호버 및 포커스 효과는
및 CSS 전환을 사용하여 구현됩니다.
• 지원이없는 브라우저의 경우 폴백 개요가 제공됩니다. 플로트 폴백 : CSS 그리드 지원이없는 브라우저의 경우 플로트를 사용한 폴백 레이아웃이 구현됩니다. 이것은 비슷한 시각적 외관과 행동을 보장합니다. 플로트 레이아웃은 미디어 쿼리를 사용하여 화면 크기에 따라 열 수를 조정합니다.

  규칙은 CSS 그리드가 지원되지 않을 때만 플로트 레이아웃이 적용되도록합니다. 이 세부 개요는 튜토리얼의 접근 방식에 대한 포괄적 인 이해를 제공합니다. Sass Mixins 및 기능을 포함한 전체 코드는 여기에 포함하기에는 너무 광범위하지만 제공된 스 니펫은이 응답 형 카드 레이아웃을 구축하는 데 사용되는 핵심 개념과 기술을 보여줍니다. 원래 코드펜 예제를 참조하면 완전한 구현이 제공됩니다. @supports

위 내용은 CSS 그리드로 카드 기반 Tumblr 레이아웃을 재 설계합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!