CSS로 Google 이미지 검색 레이아웃을 재현합니다

키 테이크 아웃

Google의 이미지 검색 레이아웃을 재현하면 이미지를위한 기본 HTML 구조를 작성하고 CSS로 스타일링하고 JavaScript로 기능을 추가해야합니다. 이 프로세스에 사용 된 주요 CSS 속성에는 디스플레이, 그리드 테드 플레이트-컬럼, 그리드 갭 및 객체 적합이 포함됩니다. 이 속성은 그리드 레이아웃을 생성하고, 열의 수와 크기를 지정하고, 그리드 셀 사이의 간격을 설정하고, 컨테이너에 맞게 이미지를 크기로 조정 해야하는지 지시합니다.

. 레이아웃은 개별 요구에 맞게 사용자 정의 할 수 있습니다. 여기에는 그리드의 열의 수와 크기를 변경, 그리드 셀 간격 및 이미지 크기를 변경하는 것이 포함됩니다. 추가 사용자 정의를 위해 추가 CSS 속성을 추가 할 수도 있습니다.

기능은 JavaScript를 사용하여 이미지에 추가 할 수 있습니다. 이 예로는 클릭 할 때 더 큰 이미지의 이미지를 열어주는 이미지에 이벤트 리스너 추가 및 이미지 필터링 또는 정렬과 같은 기능 추가가 포함됩니다. CSS에서 미디어 쿼리를 사용하여 레이아웃을 반응 할 수 있습니다. 이를 통해 사용자 화면의 크기에 따라 다양한 스타일을 적용 할 수 있으므로 모든 장치에서 이미지가 올바르게 표시되도록합니다.

최근에 참여한 프로젝트에서 아래에 표시된 스크린 샷과 유사하지만 강성 그리드 형식으로 Google의 이미지 검색 확장 기능을 재현하라는 요청을 받았습니다.
내 즉각적인 반응은 내가 항상 꺼려하고 마지막 수단으로 만 할 수있는 레이아웃 및 박스 모델 속성을 설정하기 위해 JavaScript를 사용해야한다는 것이 었습니다. 이미 완벽하게 작동하는 예가 있었기 때문에 Google이 어떻게 수행하는지 확인하기 위해 개발자 도구를 열기로 결정했습니다 (왜 바퀴를 재창조 하는가?)
• . 는 Google이 구조를 두 개의 div로 분류한다는 것이 밝혀졌으며, 하나의 div에는 모든 이미지 셀이 포함되어 있고 다른 div는 확장 영역을위한 것입니다. 이미지가 클릭 (및 확장)되면 JavaScript는 클릭 된 Div의 행에서 마지막 이미지 셀 후 스페이서 DIV를 삽입합니다. JavaScript는 확장 된 div와 동일하게 높이를 설정하고 확장 된 div를 스페이서 div가 차지하는 위치에 절대적으로 배치합니다. 이것은 영리하지만 JavaScript에 크게 의존하기 때문에 이상적이지 않습니다.
모든 레이아웃 및 박스 모델 속성에 대한 CSS를 사용하여 작업 데모로 개발할 수 있다는 기본 아이디어가있었습니다. 필요한 유일한 JavaScript는 확장 토글을 기반으로 클래스 이름을 변경하는 것입니다.
• 기본 마크 업 우선, 우리는 .image-grid 컨테이너를 각 .image__cell과 함께 구성해야합니다. HTML은 다음과 같습니다

  <span><span><span><section</span> class<span>="image-grid"</span>></span>
  </span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
  </span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
  </span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
  </span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
  </span></span><span>                 <span>class<span>="basic__img"</span>
  </span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
  </span>      <span><span><span></a</span>></span>
  </span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
  </span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
  </span>      <span><span><span><img</span> class<span>="image--large"</span> 
  </span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></div</span>></span>
  </span>  ...
  <span><span><span></section</span>></span></span>

  위의 마크 업에는 그리드의 각 이미지에 대해 복제 해야하는 한 예제 셀 요소가 포함되어 있습니다. #close-Jump-1 및 #Extand-Jump-1의 식별자에 유의하십시오. 후속 HREF 속성은 .image__cell에 고유해야합니다. 다음과 같은 해시 링크 : href = "#expand-jump-1"브라우저가 눌렀을 때 활성 이미지 셀로 점프 할 수 있습니다. CSS 먼저 상자 크기를 적용합니다 : Border-Box; 전과 : 범용 선택기를 사용하여 의사 요소를 포함한 후 모든 요소에. 이를 통해 비율을 고정 패딩 값과 혼합하는 요소를 쉽게 처리 할 수 ​​있습니다.

  .Image-grid 요소는 Clearfix 오버플로 : 숨겨진; 이미지 셀 플로트를 기반으로 레이아웃을 유지합니다

  이미지 셀에 주어진 너비는 100과 동일하며 행당 항목 수로 나뉘어져 있으며 백분율로 표시됩니다. 이 예에는 행당 5 개의 항목이있어 각 .Image__cell의 폭이 20%입니다.

  패딩에 유의하십시오 : 10px 5px 0; 패딩과 결합 된 .image-grid에 적용 : 0 5px; .Image-기본 및 높이 : 10px; on .Image__cell.is-collapsed .Arrow-up은 타일 이미지 주위에 동일한 창 프레임 효과를 제공합니다. 이 값을 변경하여 이미지 간의 간격을 높일 수 있습니다.

  마지막으로, .basic__img 이미지 요소가 표시됩니다 : 블록; 간격 문제를 방지합니다. themax width : 100%; 및 높이 : 자동; 선언을 통해 이미지는 자체 너비를 초과하지 않고 컨테이너 너비로 스케일링 할 수 있습니다. 아래 CSS는 확장 가능한 영역에 대한 레이아웃을 제공합니다.
  위의 코드에서 빼앗아 갈 몇 가지 메모가 있습니다.

  <span>/* apply a natural box layout model to all elements,
  </span><span>   but allowing components to change */
  </span>
  <span>html {
  </span>  <span>box-sizing: border-box;
  </span><span>}
  </span>
  <span>*<span>, *:before, *:after</span> {
  </span>  <span>box-sizing: inherit;
  </span><span>}</span>

  커서는 .Image를 가리킬 때 포인터로 변경됩니다. 이것은 이미지를 클릭하면 무언가를 할 수있는 시각적 표시기를 제공합니다.

  .Image-expand 요소의 최대 높이는 초기 상태에서 0으로 설정됩니다. .Image- 세포 요소에 .is-expanded 클래스가있을 때 Max-Height는 500px의 값이 주어집니다. 팽창 면적이 증가하려면 전체 영역이 표시 되려면 최대 높이 값을 증가시켜야합니다.

  . 최대 높이 및 마진 바닥에 적용되는 전환은 확장 된 영역이 전환 될 때 슬라이딩 효과를 허용합니다. 시각적으로, 우리는 확장 영역이 .image-grid와 정렬되기를 원합니다. 이렇게하려면 .Image-grid 요소의 수평 패딩을 부정해야합니다.
  <.> 첫째, .Image- expand는 상자 크기를 제공합니다 : content-box; 패딩 값을 너비에서 제외하기 위해 .Image- expand 요소의 폭은 5 배의 부모 요소 500%입니다. 이를 통해 확장 된 영역이 .Image-grid의 전체 너비를 차지할 수 있습니다. 나머지 공간을 차지하기 위해 .image-- expand 요소는 왼쪽과 오른쪽으로 5px 패딩이 제공됩니다. 위치 : 상대; 왼쪽 : -5px 선언은 확장 된 영역을 왼쪽으로 약간 왼쪽으로 이동하여 .Image-grid 패딩 왼쪽 값을 무효화합니다.
  영리한 비트 우리는 .image-expand 요소를 .Image-grid의 왼쪽과 정렬하여 맨 왼쪽으로 전환하려고합니다. 이렇게하기 위해 우리는 행의 위치에 따라 음수 마진을 설정합니다.
  2. 이것은 nth-of-type가 들어오는 곳입니다
  처음에, 나는 Nth-Child를 사용하여 같은 효과를 얻었지만 다른 프로젝트에서 iOS8 Safari가 이것에 상당히 버그가된다는 것을 발견했습니다. 그래서 나는 그것을 사용하지 않으려 고 노력했습니다. 대신, 나는 nth-of-type를 사용하여 대부분 동일한 목적을 제공합니다. 관심이 있으시면 여기에서 nth-of-type에 대한 간단한 설명을 찾을 수 있습니다. 위의 CSS에서는 각 행에서 두 번째, 세 번째 및 네 번째 .Image__cell 확장 가능한 영역을 목표로합니다. 마진 왼쪽 값은 행의 요소 위치에 따라 다릅니다. 각 행의 첫 번째 요소는 이미 원하는 위치에 있기 때문에 마진 왼쪽 값 세트가 필요하지 않습니다. 요소가 왼쪽에서 더 많이 표시 될수록 확장 가능한 영역을 왼쪽으로 다시 밀어야합니다 (-100%단위). 이렇게하지 않으면 확장 가능한 영역은 다음과 같이 부모와 정렬됩니다.
  우리는 또한 아래에 표시된 CSS를 삽입하여 첫 번째 행을 제외하고 모든 행에서 첫 번째 .image__cell이 이전 .Image__cell 요소가 확장 될 때 위치에 달라 붙는지 확인해야합니다.
  4. 기본 레이아웃이 제자리에 있으므로 사용자 경험을 향상시키기 위해 몇 가지 스타일을 추가 할 수 있습니다. 먼저, 확장 된 블록이 어떤 이미지에 속한지를 나타내는 상향 포인트 화살표 :
  > 화살표 스타일은 CSS 삼각형을 만들어 HTTP 요청을 저장함으로써 달성됩니다. 이 효과는 경계를 영리하게 사용하고 높이와 너비를 0으로 설정함으로써 쉽게 달성 할 수 있습니다. 우리는 또한 .image__cell 요소가 확장 될 때만 화살표가 나타나기를 원합니다. 이것은 .is-expanded 클래스를 추가하여 수행됩니다. 마지막으로, 우리는 화살표가 .image__cell 요소의 수평 중심에 남아 있기를 원합니다 : 0 Auto; 적용됩니다. 이제 우리는 사용자가 확장 된 영역을 닫을 수있는 "닫기"버튼을 스타일링 할 준비가되었습니다.

  <span><span><span><section</span> class<span>="image-grid"</span>></span>
  </span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
  </span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
  </span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
  </span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
  </span></span><span>                 <span>class<span>="basic__img"</span>
  </span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
  </span>      <span><span><span></a</span>></span>
  </span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
  </span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
  </span>      <span><span><span><img</span> class<span>="image--large"</span> 
  </span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span>  <span><span><span></div</span>></span>
  </span>  ...
  <span><span><span></section</span>></span></span>

  a : pseudo element 전에 a를 사용함으로써 DOM에 나타나지 않고 페이지에 '×'문자를 삽입 할 수 있으며, 다시 하나 이상의 HTTP 요청을 저장할 수 있습니다. 삽입 된 특수 문자는 부스트랩도 사용하는 곱셈 문자입니다. jQuery 마지막으로, 아래 jQuery는 단순히 각 이미지 셀과 닫기 버튼의 클릭시 .is-expanded와 .is-collapsed 클래스 사이를 기그로 만듭니다.

  물론`classlist ()`및 기타 기본 기술을 사용하여 jQuery를 쉽게 피할 수 있지만, PolyFill을 기꺼이하지 않으면 브라우저 지원을받지 못할 것입니다. 그리드 반응을 만드는 작은 장치에서 각 행에 5 개의 이미지 셀이있는 것은 이상적이지 않으므로 미디어 쿼리를 사용하여 행당 항목 수를 변경할 수 있습니다. 예를 들어, 아래 CSS는 행 당 2 개의 이미지로 줄입니다.

  행당 5 개 항목과 관련하여 CSS가 이전에 적용되는 것을 방지하려면이 값을 재설정하거나 속성을 추출하여 이전 코드와 함께 아래 코드 펜에서 수행되는 자체 미디어 쿼리에 배치해야합니다.

  Codepen에서 sitepoint (@sitepoint)에 의해 CSS에서 Google 이미지 검색 펜을 참조하십시오. 는 50 개의 이미지 셀을 뱉어내어 방해를 저장하는 세포 함수의 포함에 주목하십시오.

  . Sass Lovers의 경우 나는이 기사를 쓸 때 Sass를 사용하지 않는 독자들을 배제하고 싶지 않았지만 할인을 원하지 않았습니다. 이 프로젝트는 행당 항목의 수가 다양한 속성과 관련되어 있기 때문에 SASS를위한 훌륭한 사용 사례로 빌려줍니다.

  . 다음 대체 코드펜 데모를 참조하십시오. 이 데모에서는 CSS 상단에 SASS 변수를 사용하여 이미지, 최대 이미지 너비 및 행당 최소 및 최대 이미지 사이의 간격을 지정할 수 있습니다. 다양한 계산을 사용하여 SASS는 제공된 옵션에 따라 CSS로 컴파일됩니다. 행당 최대 항목 수를 기반으로 최적의 미디어 쿼리를 자동으로 계산하여 이미지를 최대 치수 내에 유지합니다. 이 SASS 버전은 실험적이지만 일반 버전 또는 SASS 버전에서 버그 또는 잠재적 코드 개선이 발견되면 알려주십시오. CSS를 사용하여 Google 이미지 검색 레이아웃 재창조에 대한 자주 묻는 질문 (FAQ) CSS를 사용하여 Google 이미지 검색 레이아웃을 재현 할 수있는 방법?
  CSS를 사용하여 Google 이미지 검색 레이아웃을 재현하려면 몇 단계가 필요합니다. 먼저 이미지의 기본 HTML 구조를 만들어야합니다. 여기에는 각 이미지에 대한 div를 만들고 클래스에 할당하는 것이 포함됩니다. 다음으로 Google 이미지의 레이아웃을 모방하려면 CSS를 사용 하여이 DIV를 스타일링해야합니다. 여기에는 DIV의 너비와 높이를 설정하고 페이지에서의 위치를 ​​설정하는 것이 포함됩니다. CSS를 사용하여 이미지에 호버 효과를 추가 할 수도 있습니다. 마지막으로, javaScript를 사용하여 클릭 할 때 더 큰 버전의 이미지를 여는 것과 같이 이미지에 기능을 추가 할 수 있습니다.
  Google 이미지 레이아웃을 재현하는 데 사용되는 주요 CSS 속성은 무엇입니까?

  . Google 이미지 레이아웃을 재현하는 데 사용되는 주요 CSS 속성에는 디스플레이, 그리드 테드 플레이트 컬럼, 그리드 갭 및 객체 적합이 포함됩니다. 디스플레이 속성은 그리드 레이아웃을 만들기 위해 그리드로 설정됩니다. 그리드 테드 플레이트 컬럼 속성은 그리드의 열의 수와 크기를 지정하는 데 사용됩니다. 그리드 갭 속성은 그리드 셀 사이의 간격을 설정하는 데 사용됩니다. 객체 피트 속성은 컨테이너에 맞게 이미지를 크기로 조정하는 방법을 지정하는 데 사용됩니다.

  내 자신의 요구에 맞게 레이아웃을 사용자 정의 할 수 있습니까?
  예, 레이아웃을 사용자 정의 할 수 있습니다. 자신의 필요에 맞는. 그리드의 열의 숫자와 크기, 그리드 셀 사이의 간격 및 이미지의 크기를 변경할 수 있습니다. 또한 이미지에 테두리 또는 그림자 추가와 같은 레이아웃을 추가로 사용자 정의하기 위해 CSS 속성을 추가 할 수 있습니다.
  이미지에 기능을 추가 할 수 있습니까?

  기능을 추가 할 수 있습니다. JavaScript를 사용한 이미지. 예를 들어, 클릭 할 때 더 큰 버전의 이미지를 열어주는 이미지에 이벤트 리스너를 추가 할 수 있습니다. 이미지를 필터링하거나 정렬하는 것과 같은 기능을 추가 할 수 있습니다.

  왜 내 레이아웃이 Google 이미지 레이아웃처럼 보이지 않는 이유는 무엇입니까?
  레이아웃이 Google 이미지 레이아웃처럼 보이지 않으면 할 수 있습니다. 몇 가지 이유가 되십시오. 먼저 CSS 속성을 올바르게 구현했는지 확인하십시오. 둘째, 이미지가 동일한 종횡비인지 확인하십시오. Google 이미지는 동일한 종횡비의 이미지를 사용하여 균일 한 레이아웃을 만듭니다. 이미지가 다른 종횡비 인 경우 레이아웃이 동일하게 보이지 않을 수 있습니다.
  레이아웃을 어떻게 반응 할 수 있습니까?

  CSS에서 미디어 쿼리를 사용하여 레이아웃을 반응 할 수 있습니다. . 미디어 쿼리를 사용하면 사용자 화면 크기에 따라 다양한 스타일을 적용 할 수 있습니다. 예를 들어, 작은 화면에서 그리드의 열 수를 변경하여 이미지가 여전히 제대로 표시되도록 할 수 있습니다. 이미지뿐만 아니라 다른 유형의 컨텐츠 에이 레이아웃을 사용할 수 있습니까? 예, 이미지뿐만 아니라 다른 유형의 컨텐츠 에이 레이아웃을 사용할 수 있습니다. 이를 사용하여 텍스트, 비디오 또는 기타 유형의 콘텐츠를 표시 할 수 있습니다. 표시중인 컨텐츠 유형에 맞게 CSS 속성을 조정하십시오.

  이미지에 호버 효과를 추가 할 수 있습니까?

  이미지를 사용하여 호버 효과를 추가 할 수 있습니다. The : CSS의 호버 의사 클래스. 예를 들어, 사용자가 그 위에 호버링 할 때 이미지의 테두리 색상을 변경하거나 이미지에 대한 추가 정보를 표시 할 수 있습니다.

  왜 그리드 셀에 내 이미지가 제대로 맞지 않는 이유는 무엇입니까? 그리드 셀에서 이미지가 제대로 맞지 않으면 이미지의 종횡비가 그리드 셀의 종횡비와 같지 않기 때문일 수 있습니다. CSS의 객체 적합 속성을 사용하여 컨테이너에 맞게 이미지 크기를 조정 해야하는 방법을 지정 하여이 문제를 해결할 수 있습니다.

  WordPress와 같은 CMS와 함께이 레이아웃을 사용할 수 있습니까?

  . 예, WordPress와 같은 CMS와 함께이 레이아웃을 사용할 수 있습니다. CSS를 테마의 Style.css 파일에 추가하고 HTML을 적절한 템플릿 파일에 추가해야합니다. WordPress 사이트 설정 방법에 따라 이미지의 HTML을 동적으로 생성하기 위해 일부 PHP 코드를 추가해야 할 수도 있습니다.

위 내용은 CSS로 Google 이미지 검색 레이아웃을 재현합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!