프롬프트로 만드는 랜딩 페이지
첫 번째 히어로 섹션 만들기
히어로 섹션은 포트폴리오 랜딩 페이지에서 가장 중요한 부분입니다 — 방문자가 가장 먼저 보게 되는 영역이니까요. 이 레슨에서는 시선을 사로잡고 여러분에 대해 더 알고 싶게 만드는 전문적인 히어로 섹션을 만들어 봅니다.
기본 HTML로 시작해 Tailwind CSS로 스타일을 입혀, 매력적인 헤드라인과 서브타이틀, 콜투액션(CTA) 버튼을 갖춘 모던한 그라디언트 히어로를 완성합니다. 이것이 모든 훌륭한 포트폴리오 웹사이트의 기초입니다.
안내
min-h-screen, 그라디언트 배경(from-purple-900에서 gray-900으로), flex 중앙 정렬을 가진 히어로 컨테이너 div를 추가하세요
힌트: 이렇게 사용하세요: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — 그라디언트가 적용된 전체 높이 섹션이 만들어집니다
히어로 안에 이름을 담은 h1 헤드라인과 직함/역할을 담은 p 서브타이틀을 추가하세요
하는 일을 소개하는 태그라인 문단(p 태그)을 추가하세요 (최대 300자)
그라디언트 스타일과 호버 효과가 있는 CTA 버튼을 추가하세요
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: min-h-screen, 그라디언트 배경(from-purple-900에서 gray-900으로), flex 중앙 정렬을 가진 히어로 컨테이너 div를 추가하세요