🖼 Next.js의 랜딩 페이지는 어떻게 만들어졌을까?

- 눈길을 끄는 랜딩 페이지 속에 숨겨진 디테일한 요소들의 개발 과정을 공유합니다. --- Next.js를 당장 사용하고 있지는 않더라도 랜딩 페이지 정도는 한 번 쯤 들어가보셨을 것입니다. 요즘 트렌드에 맞춰 깔끔한 디자인을 갖고 있지만, 소소한 애니메이션들이 있어서 그런지 너무 심심하게 느껴지지도 않아요. 이런 디자인을 저도 개인적으로 선호하는데, 이를 직접 구현한 개발자의 후기가 공유되어 소개해드립니다. SVG, 가상 선택자와 HTML 데이터셋, CSS 변수 등 JavaScript 없이도 이러한 디자인을 직접 구현할 수 있다는 점이 흥미로워서 개인적으로 아주 재밌게 읽었습니다. - 선이 그어지듯이 움직이는 애니메이션 - 조명이 깜빡거리는 듯한 애니메이션 - 포커스 상태 - 인용구에서 따옴표 마크 - 명시적 접근성 라벨링 - HTML 데이터셋을 스타일링에 적극 활용하기 - 전류가 전선을 타고 CPU로 흐르는 듯한 애니메이션 - 카드 형태의 일러스트 https://rauno.me/craft/nextjs

Crafting the Next.js Website

rauno.me

Crafting the Next.js Website

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 4월 28일 오전 9:18

 • 

저장 43조회 3,006

댓글 0

    함께 읽은 게시물


    창업 후 성장이 필요하거나, 회사의 규모에 상관없이 성장이 정체되어 있는 회사들은 주먹구구식 경영에서 탈피하여 회사를 시스템화해야 합니다. 이는 회사의 생존은 물론이고, 한 단계 더 높은 도약과 지속적인 성장을 위해 반드시 필요한 과정입니다.

    ... 더 보기

    [주먹구구식 경영 탈피] 도대체 회사의 시스템(체계)이란 무엇일까요? - 모비인사이드 MOBIINSIDE

    모비인사이드 MOBIINSIDE

    [주먹구구식 경영 탈피] 도대체 회사의 시스템(체계)이란 무엇일까요? - 모비인사이드 MOBIINSIDE


    < 저는 책을 끝까지 읽지 않습니다 >

    1

    ... 더 보기

    📢 리트코드 스터디 5기 모집합니다!

    ... 더 보기

    리트코드 스터디 5기 모집 공지 · DaleStudy/leetcode-study · Discussion #1599

    GitHub

    리트코드 스터디 5기 모집 공지 · DaleStudy/leetcode-study · Discussion #1599

    조회 775


    DDD와 AI

    ... 더 보기