Vibe101
나만의 앱 만들기
모듈 1 / 4

첫걸음

6개 챌린지~40

버튼, 글자, 카드 — 웹을 이루는 가장 기본 요소부터 하나씩 만들어 봅니다.

0% 완료0 / 6
입문
#1

무지개 버튼

새하얀 화면 한가운데에 알약처럼 둥근 버튼을 하나 만들어 보세요. 버튼은 큼직하고, 색은 왼쪽 빨강에서 오른쪽 보라까지 무지개처럼 이어집니다. 가운데에는 크고 굵은 하얀 글씨가 적혀 있습니다. 마우스를 올리면 색이 계속 흐르면서 버튼이 살짝 떠오르고 조금 커지며, 누르면 눌리듯 작아집니다.

입문
#2

버튼 만들기

화면 한가운데에 '시작하기'라고 적힌 예쁜 버튼 하나를 만들어 보세요.

입문
#3

큰 제목과 소개 문구

가운데에 큰 제목 '나만의 첫 웹페이지'를 그라데이션 색으로 쓰고, 그 아래 회색 소개 문구 한 줄을 넣어 보세요. 제목의 색은 천천히 흘러갑니다.

입문
#4

프로필 카드

동그란 아바타와 이름, 직함, 한 줄 소개가 담긴 프로필 카드를 만들어 보세요. 카드에 마우스를 올리면 위로 떠오르며 그림자가 짙어져요.

입문
#5

기능 소개 카드

이모지 아이콘 ⚡, 제목 '빠른 속도', 설명 문구, 그리고 '자세히 보기' 링크를 담은 기능 소개 카드를 만들어 보세요.

입문
#6

알림 배너

위쪽에 '🎉 가입을 환영합니다!' 문구와 오른쪽 끝 닫기(×) 버튼이 있는 가로 알림 배너를 만들어 보세요. ×를 누르면 배너가 사라져요.