부트스트랩

https://getbootstrap.com/

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

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">
      </div>
      <p>
        나만의 MBTI 사이트입니다! <br>
        아래 시작하기 버튼을 눌러 시작해 주십시오.
      </p>
      <button type="button" class="btn btn-outline-danger mt-3">시작하기</button>
    </section>

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;
}