CSS 벽돌 Catness

CSS는 다른 기술과 마찬가지로 항상 변화하고 발전합니다. 이 분야에서 진행 중인 개발은 CSS Masonry Layout이라고도 불리는 CSS Grid Layout Module Level 3입니다. Theo는 이 기술이 어떻게 발전하고 있는지, 그리고 Apple과 Google이 이 기술의 구현 방법에 대해 논의하고 있는 내용을 동영상으로 만들었습니다.

이 모든 것이 CSS 석조 작업을 시도해보고 싶은 마음을 갖게 했습니다! WebKit 사진 데모는 나에게 고양이 사진과 비슷한 시각을 갖도록 영감을 주었습니다! 고양이를 좋아하지 않는 사람이 있을까요?

전제 조건

우리가 빌드할 내용을 보려면 Safari 기술 미리보기가 필요하거나 Firefox에서 기능 플래그layout.css.grid-template-masonry-value.enabled를 true로 설정해야 합니다.

Firefox의 기능 플래그에 액세스하려면 주소 표시줄에 about:config를 입력하세요. Enter 키를 누르면 위에서 언급한 문자열이나 그리드를 검색할 수 있습니다. true로 전환하면 준비가 완료됩니다!

TypeScript/JavaScript, React 및 Next에 대한 기본 지식

새 프로젝트 설정

터미널에서 새로운 Next 프로젝트를 생성하세요.

다음 명령을 실행하세요: npx create-next-app@latest

그런 다음 다음 패키지를 설치해야 할 수도 있습니다.

create-next-app@15.0.1
Ok to proceed? (y) y

프로젝트 이름을 지정하세요. 저는 고양이-사진-폭포라고 부릅니다

터미널에서 계속해서 Next 프로젝트를 설정하세요(Tailwind를 사용하지 마세요).

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

프로젝트 설정이 완료되면:

• 터미널 CD your-project-name에서 이 명령을 실행하여 디렉터리를 프로젝트로 변경합니다.

• 이 명령 코드를 실행하여 VSCode에서 엽니다. (아직 설정하지 않았다면 이 명령을 설정하세요)

상용구 제거

app 폴더 안에는 page.tsx라는 파일이 있습니다. 여기에는 상용구에 렌더링된 모든 코드가 포함되어 있습니다.

해당 코드를 제거하고 지금은 div 또는 조각을 유지하세요. 예는 다음과 같습니다.

// app/page.tsx
export default function Home() {
  return <div></div>;
}

앱 폴더 내 페이지에 대한 스타일시트도 있습니다. page.module.css라는 파일을 열고 그 안의 모든 스타일을 선택한 다음 삭제할 수 있습니다.

메타데이터를 변경하여 앱이 수행하는 작업을 더 명확하게 만들어 보겠습니다. 다음과 같이 레이아웃.tsx를 업데이트하세요.

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Cat Pics",
  description: "Bringing cats your way with experimental CSS",
};

export default function RootLayout({
  children,
}: Readonly) {
  return (
    
      
        {children}
      
    
  );
}

원하시면 고양이 파비콘을 추가하세요(다음에 파비콘을 추가하는 방법)!

.env 파일 생성

프로젝트 루트에 .env 파일을 생성합니다. 여기에 Cat API의 API 키가 저장됩니다.

Cat API에 가입하세요

The Cat API에서 무료 API 키를 신청하세요. 최초 가입 후 API 키가 포함된 이메일을 받게 됩니다. 해당 API 키를 복사하고 .env에 새 변수를 만듭니다. 저는 키를 CAT_KEY라고 부릅니다.

로컬 .env는 CAT_KEY=your_api_key와 같아야 합니다. 이를 배포하는 경우 배포되는 위치마다 이를 추가해야 합니다.

고양이 사진을 올려주세요!

저는 앞서 언급한 WebKit 데모를 활용하여 고양이 사진을 위한 페이지와 스타일을 만듭니다. 여기서는 API를 호출하고, 결과를 매핑하고, 반환되는 사진을 렌더링합니다.

create-next-app@15.0.1
Ok to proceed? (y) y

사진 스타일 지정

이제 사진을 가져왔으니 CSS 벽돌이 실제로 작동하는 모습을 살펴보겠습니다! WebKit 책의 한 페이지를 발췌하면 다음과 같습니다. page.module.css:

Would you like to use TypeScript?  Yes
Would you like to use ESLint?  Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory?  No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No

파일을 저장하고 터미널에서 npm run dev를 실행하면 다음과 같은 페이지가 표시됩니다(이미지가 무작위로 선택됨).

이를 기반으로 구축할 수 있는 잠재력이 많습니다! 이미지는 품질을 유지하며 미디어 쿼리 없이 페이지가 반응하는 느낌을 줍니다. CSS에 추가된 내용을 다른 방식으로 사용할 수 있습니다. Theo는 자신의 비디오와 WebKit 및 Google의 데모에서도 이를 선보였습니다.

지금 개발자가 된다는 것은 좋은 일입니다. 수많은 놀라운 도구, 기능, 런타임 등이 구축되고 있습니다. 이것이 CSS에서 어떻게 구현되는지는 시간이 정확히 알려줄 것입니다. 어떻게 결정되든 CSS가 점점 더 멋져지고 있다는 사실을 기억하세요.

이 프로젝트를 위해 제가 만든 저장소를 살펴보세요. Vercel에도 배포했는데, 전제조건에 언급된 두 가지 브라우저 설정 중 하나를 사용한다면 여기서 확인하실 수 있습니다.

고양이 사진을 렌더링하는 페이지를 만들거나 직장에서 일을 처리할 수 있습니다. CSS에 추가되는 이러한 기능에 대해 어떻게 생각하시나요? 어떻게 활용하실 건가요?

위 내용은 CSS 벽돌 Catness의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!