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

1.1 우리가 만들 화면

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

</aside>

1.2 화면 나누기

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

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개로 구성됩니다.