1. 화면 레이아웃 구성하기

1.1 우리가 만들 화면

<aside> 💡 실제 테스트는 10개의 문항으로 설문지가 구성되어 있지만, 프론트엔드 강의에서는 3개의 문항으로 실습을 진행합니다. 이후에 진행될 백엔드 파트에서는 모든 문항을 불러오는 실습이 진행됩니다.

</aside>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/deb1b14d-2012-4ba7-9da8-43b1708193fb/1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5cef5d39-3144-49c0-aaab-804045268ece/2.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/96de832b-584c-4f03-8c88-b0dcbcc08a15/3.png

1.2 화면 나누기

화면은 아래와 같이 나누어집니다. 모든 문항들을 설문지페이지에 뿌려주고 실제 화면에는 한 문항만을 보여주기 위해 각 문항들은 전체화면으로 설정해 주어야 합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d771cb23-7582-40ea-9951-0564a8a5a717/MBIT___.png

2. HTML

2.1 기본 구조

설문지페이지를 만들기 위해 form.html 파일을 생성합니다. 기본 구조는 메인페이지의 index.html 과 동일합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 유형찾기</title>
</head>
<body>
    
</body>
</html>

2.2 태그 입력하기

section 과 콘텐츠들을 감쌀 div 하나, 사용자가 설문 데이터를 전송하기 위한 form , 그리고 그 안에 문항들을 넣을 div 3개로 구성됩니다.