부트스트랩

https://getbootstrap.com/

1. 사용하기위해 css link 복사

head 부분 title 밑에 링크 넣기

2. doc 문서에서 grid system 검색

    <section id="main" class="mx-auto my-5 py-5 px-3">
      <h1>십이간지로 알아보는 연애유형</h1>
      <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
        <img src="./img/main.png" alt="mainImage" class="img-fluid">
        <!-- class = "img-fluid" 는 화면사이즈에 맞게 그림표시 -->
 
      </div>
      <p>
        나만의 MBTI 사이트입니다! <br>
        아래 시작하기 버튼을 눌러 시작해 주십시오.
      </p>
      <button onclick="begin();" class="btn btn-outline-danger mt-3">시작하기</button>
      <!-- 버튼모양은 부트스트랩에서 가져옴  -->

    </section>

button 클릭하면 다음으로 넘어가게 설정해주기!
onclick="begin();"

3. default.css

구글 폰트

<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">

default.css 에서 구글폰트 사용 모든 태그에 적용

body{
  background-color: pink;
}

*{
  font-family: 'Nanum Pen Script', cursive;
}

4. main.css

#main {
  background-color: whitesmoke;
  width: 80%;
  text-align: center;
  border-radius: 20px;
}

p{
  font-size: 20px;
}

title 밑에 링크 넣기
index.html에 default.css를 링크 걸기

<link rel="stylesheet" href="css/default.css" />

index.html에 main.css를 링크 걸기

<link rel="stylesheet" href="css/main.css" />