폼 & 사용자 입력
6개 챌린지~55분폼을 만들고 사용자의 입력을 받아 처리하는 방법을 배웁니다.
이름 입력 인사
연보라색 그라데이션 배경 한가운데에 모서리가 둥글고 그림자가 은은한 흰색 카드가 놓여 있고, 카드 안에는 위에서부터 손 흔드는 이모지가 담긴 연보라색 원, 진한 보라색 제목 한 줄, 라벨 없이 안내 문구만 보이는 이름 입력칸, 입력칸과 같은 너비의 보라색 버튼이 가운데 정렬로 차례차례 놓여 있습니다. 버튼 아래에는 인사말이 나타날 자리를 알려 주는 흐린 연보라색 문구 한 줄이 있고, 입력칸은 클릭하면 테두리가 보라색으로 바뀌며 둘레에 옅은 보라색 테가 생기고, 버튼은 마우스를 올리면 더 진한 보라색이 되며 누르는 순간 살짝 아래로 내려갑니다. 이름을 적고 버튼을 누르거나 엔터를 치면 그 자리에 입력한 이름을 넣은 인사말이 굵고 진한 보라색으로 나타나고, 이름을 비운 채 누르면 대신 이름을 입력해 달라는 안내가 흐린 글씨로 표시됩니다.
로그인 폼
연보라색 그라데이션 배경 한가운데에 모서리가 둥글고 그림자가 은은한 흰색 카드가 놓여 있고, 카드 안에는 위에서부터 가운데 정렬된 보라색 제목 한 줄, 세로로 나란히 놓인 둥근 입력칸 두 개, 카드 폭을 꽉 채우는 보라색 버튼이 차례로 들어갑니다. 버튼은 마우스를 올리면 색이 더 진해지고, 카드 맨 아래 회색 안내 문구 옆에 있는 보라색 링크를 누르면 회원가입 모드로 바뀌면서 입력칸이 하나 더 늘어납니다.
이탈 설문
아주 옅은 보랏빛에서 흰빛으로 흐르는 대각선 그라데이션 배경 한가운데에, 모서리가 크게 둥글고 그림자가 넓게 깔린 흰색 카드 하나가 세로로 길게 놓여 있습니다. 카드 맨 위에는 왜 떠나는지 묻는 굵은 제목 한 줄과 그 바로 아래 회색 작은 글씨의 안내 한 줄이 모두 가운데 정렬로 들어가고, 그 아래에는 떠나는 이유 네 가지가 세로로 나란히 쌓입니다. 각 이유는 카드 폭을 꽉 채우는 둥근 사각형 테두리 안에 속이 빈 작은 원과 문구가 왼쪽부터 놓인 형태이고, 기본 라디오 버튼이 아니라 줄 전체를 눌러 고르며 한 번에 하나만 선택됩니다. 마우스를 올리면 테두리가 옅은 보라색으로 바뀌고, 선택된 줄은 테두리가 진한 보라색이 되면서 배경이 연보라색으로 물들고 원 안쪽도 보라색으로 채워집니다. 그 아래에는 의견을 직접 적는 칸이 있는데, 위에 작고 굵은 라벨 한 줄이 붙고 카드 폭을 채우는 여러 줄짜리 둥근 상자에 흐린 안내 문구가 미리 적혀 있으며, 클릭하면 테두리가 보라색으로 바뀝니다. 맨 아래에는 카드 폭을 꽉 채우는 진한 보라색 제출 버튼이 흰색 굵은 글씨로 놓이고, 마우스를 올리면 색이 더 진해집니다. 버튼을 누르면 그 바로 아래에 초록빛 배경과 초록색 테두리를 두른 감사 인사 상자가 가운데 정렬로 나타나 그대로 남습니다.
검색 필터 목록
옅은 회색빛 그라데이션 배경 한가운데에 모서리가 둥글고 그림자가 부드러운 흰색 카드가 놓여 있고, 카드 안에는 가운데 정렬된 굵은 제목 한 줄과 카드 폭을 꽉 채운 둥근 검색 입력창이 있습니다. 그 아래에는 이모지와 과일 이름이 나란히 적힌 둥그스름한 연한 회색 항목 여섯 개가 세로로 쌓여 있고, 항목에 마우스를 올리면 배경이 옅은 보랏빛으로 바뀝니다. 입력창을 클릭하면 테두리가 푸른 보라색으로 변하고, 글자를 입력하면 그 글자가 이름에 들어간 항목만 바로 남으며 하나도 남지 않으면 결과가 없다는 회색 안내 문구가 나타납니다.
단계별 가입 폼
연한 파란빛 그라데이션 배경 한가운데에 모서리가 둥글고 그림자가 은은한 흰색 카드가 하나 놓여 있어요. 카드 맨 위에는 가운데 정렬된 제목 한 줄이 있고, 그 아래에는 숫자가 적힌 동그라미 세 개가 가는 가로선으로 이어져 나란히 놓이며, 동그라미 아래에는 저마다 작은 글씨로 단계 이름이 붙어 있어요. 카드 본문에는 한 번에 한 단계만 보이는데, 세 단계 모두 작은 소제목으로 시작하고 앞의 두 단계에는 라벨이 붙은 둥근 입력칸이 두 개씩, 마지막 단계에는 큰 이모지와 짧은 문구 두 줄이 가운데 정렬로 들어가며, 맨 아래에는 폭을 채우는 버튼이 하나 있고 두 번째 단계부터는 그 왼쪽에 연한 회색 버튼이 하나 더 붙어요. 현재 단계의 동그라미와 이름표, 그리고 진행 버튼은 보라색이고 아직 오지 않은 단계는 회색이며, 버튼을 누르면 보이는 단계가 바뀌면서 지나온 단계의 동그라미는 체크 표시가 있는 초록색이 되고 연결선도 초록색으로 채워지며, 마지막 단계의 큰 버튼은 초록색이에요.