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

1.1 우리가 만들 화면

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/802cb22b-ad0e-416e-89ee-3271dd66f578/Untitled.png

1.2 화면 나누기

화면 구성을 아래와 같이 나눕니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/541645a8-1c57-4ce5-b242-c8319715a007/MBIT__.png

2. HTML

2.1 기본 구조

결과페이지를 만들기 위해 result.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 하나, 그리고 실제 콘텐츠들을 넣을 div 4개로 구성됩니다.

<!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>
    <section>
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>
</body>
</html>

2.3 id, class 입력하기