안녕하세요 여러분. 프로젝트, 포트폴리오, 상업 웹사이트 또는 원하는 무엇이든 웹사이트를 구축하는 데 도움이 되는 52개의 반응형 스니펫을 만들었습니다. 모두 완벽하게 반응하고 사용자 정의할 수 있으므로 사용 방법을 빠르게 보여 드리고자 합니다.

콘텐츠 편집

각 조각에는 데이터를 제공하는 자체 개체 JSON 파일이 함께 제공됩니다. 따라서 사본을 변경하는 것은 매우 간단합니다. 많은 스니펫에는 객체 배열에서 콘텐츠를 가져오는 카드로 요소가 있습니다. 따라서 요소의 양을 제어하려면 배열에서 개체를 복사하여 붙여넣거나 삭제하기만 하면 됩니다. 아래 그림을 보십시오.

export default () => ({
  getTitle: () => 'Nunquam consumere boreas',
  getDescription: () => 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
  getImage: () => ({
    src: 'https://via.placeholder.com/350',
    alt: 'image'
  }),
  getCallToAction: () => ({
    text: 'Sectams prarere!',
    target: '_self',
    href: 'https://www.glue.codes'
  }),
  getCards: () => [
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    }
  ]
})

보시다시피 3개의 객체가 있는 배열을 반환하는 함수getCards가 있으므로 스니펫은 3개의 카드를 표시합니다. 이러한 개체 중 일부를 추가하거나 삭제하면 상당한 양의 카드를 얻을 수 있습니다.

스타일링

스니펫의 스타일을 지정하는 방법에는 2가지가 있습니다.

범위 CSS

각 스니펫에는 나머지 부분을 방해할 염려 없이 자유롭게 편집할 수 있는 전용 CSS 파일이 있습니다. 웹사이트에서 동일한 스니펫을 두 번 이상 사용하려는 경우에 특히 유용합니다. 범위가 지정된 CSS 파일을 사용하여 완전히 다르게 보이게 할 수 있습니다.

전역 스타일

또한 각 위젯은 프로젝트의 일관된 디자인과 관련하여 작업 속도를 높이기 위해 모든 스니펫을 한 번에 편집할 수 있는 전역 스타일 파일에 연결됩니다. 덕분에 가능합니다...

일관된 이름 지정

모든 스니펫은 CSS 클래스 또는 객체 JSON 파일과 관련하여 일관된 이름을 갖습니다. 이는 디자인을 변경하는 데 크게 도움이 되며 콘텐츠를 변경하는 방법을 쉽게 배울 수 있습니다.

무료 사용

처음에 말했듯이 빌드하는 모든 프로젝트에 무료로 사용할 수 있습니다. 심지어 상업. 액세스하려면 내 website를 방문하십시오.