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

1.1 우리가 만들 화면

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e77dabf9-785c-4284-9840-e2f49cf7f4d6/Untitled.png

1.2 화면 나누기

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3fb4bb64-9b88-4bfd-8426-614078e8ad87/MBIT___2.png

1.1에서 확인한 우리가 만들 화면을 위의 이미지와 같이 나눕니다. 콘텐츠들을 넣을 하나의 큰 컨테이너(빨간 상자)와 그 안을 다섯 부분(파란 상자)으로 나누었습니다.

2. HTML

2.1 기본 구조

메인페이지를 만들기 위해 index.html 파일을 생성합니다. 우리가 실습할 Visual Studio Code에서 ! (느낌표)를 입력 후 Tab 을 누르면 기본 구조가 자동으로 생성됩니다. (Emmet이 설치되어 있어야 합니다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

여기서, <title></title> 에 '나의 개발 유형찾기'를 입력하여 제목을 설정합니다.

<title>나의 개발 유형찾기</title>

2.2 태그 입력하기

1.2에서 나누었던 화면을 태그를 사용하여 실제로 구성해 봅시다. 콘텐츠들을 넣을 section 과 콘텐츠들을 감쌀 div 하나, 그리고 실제 콘텐츠들을 넣을 div 5개로 구성됩니다.

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