부트스트랩에서 가져온 코드가 잘 되질 않네요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

부트스트랩에서 가져온 코드가 잘 되질 않네요

undefined주차

장*원

・

추천

・

조회수

답변 완료

<!--new.html-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Hanghae ChaChaCha</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style media="screen">
      * {margin: 0; padding: 0;}
      header {width: 100%; text-align: center; height: 50px; position: fixed;}
      b {display: inline-block; margin-left: 50px; margin-top: 20px; cursor: pointer;}
      div {width: 100vw; height: 100vh;}
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link href="https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;600&family=Shrikhand&display=swap" rel="stylesheet">
  </head>
  <body>

    <section>
      <div id="window1">
        <div id="intro">
          <h1>항해 23조 Toy Project🚗</h1>
          <h3>자세히 더 알고 싶으시다면, 스크롤을 내려보세요 :)</h3>
        </div>
      </div>

      <div id="window3">
        <h1>This is Our Project!🚘</h1>
        <h3>(위 페이지에 사진 3개가 들어갈 것) </h3>
        <div class="container">
          <div class="hobby">
            <img class="hobby_img" src="01.png" alt="">
            <p class="hobby_text">국내 및 수입 차 판매량 비교</p>
          </div>
          <div class="hobby">
            <img class="hobby_img" src="02.png" alt="">
            <p class="hobby_text">내가 선호하는 차 모의 견적 넣기</p>
          </div>
          <div class="hobby">
            <img class="hobby_img" src="03.png" alt="">
            <p class="hobby_text">한줄평 남기기</p>
          </div>
        </div>
      </div>

      <div id="window4">
        <h1> 항해 차차차 🚙 </h1>
        <div class="chacontainer">
          <div class="chalist">
            <p id="tmi1">버튼을 눌러</p>
            <button type="button" class="btn btn-light">Go!</button>
        </div>
      </div>

    </section>
  </body>
</html>

/* mystyle.css */
#bthome {
  color: #bbbbbb;
}
b {
  font-size: 20px;
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 600;
  color: white;
  padding: 5px;
}
b:hover {
  color:black;
}
/* 첫 페이지 글꼴 */
#intro {
  position: absolute;
  top: 50%;
  height: 240px;
  margin-top: -200px;
}

/*h1 언어세팅*/
#intro h1 {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 600;
  font-size: 72px;
  text-align: center;
}
/*h3 언어세팅*/
h3 {
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #555555;
  text-align: center;
}
#window1 {
  background: #FEAC5E;
  background: linear-gradient(to right, #33a1a9, #3bced8, #33a1a9);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
#mock {
  max-width: 900px;
  margin-left: 80px;
  -webkit-flex: 1;
  flex: 1
}
#myself {
  -webkit-flex: 1;
  flex: 1;
  vertical-align: middle;
}

#portfoliosite:hover {
  color: yellow;
}
/* Window 3 */
#window3 {
  background: #70e1f5;
  background: -webkit-linear-gradient(to right, #ffd194, #70e1f5);
  background: linear-gradient(to right, #ffd194, #70e1f5);
}
#window3 h1 {
  padding-top: 120px;
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.5;
  text-align: center;
}
.container {
  display: -webkit-flex;
  display: flex;
  margin-top: 150px;
}
.hobby {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.hobby_img {
  max-width: 300px;
  display : inline;
}
.hobby_text {
  margin-top: 30px;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}
/* Window 4 */
#window4 {
  background: #89b3b4;

}
#window4 h1 {
  padding-top: 120px;
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1.5;
  text-align: center;
}
#window4 h1 span {
  font-family: 'Palanquin Dark', sans-serif;
  font-weight: 400;
}
.chacontainer {
  display: -webkit-flex;
  display: flex;
  margin-top: 130px;
}
.chalist {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.chalist p {
  font-family: "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
  color: black;
  font-size: 25px;
  line-height: 5.5;
}
.chalist p:hover {
  font-size: 0;
}
.chalist p:hover::before {
  font-size: 25px;
  font-weight: bold;
  color: #7319F3;
}
.chalist #tmi1:hover:before {
  content: '가보시죠!';

}
.imglist {
  text-align: center;
}
.imglist img {
  width: 100px;
  margin-top: 140px;
  padding: 50px;
}
.imglist a {
  text-decoration: none;
}

여기서 맨 위 new.html에서 부트스트랩을 통해 버튼을 넣고 싶은데 깨지는 이유가 있을까요..?

      <div id="window4">
        <h1> 항해 차차차 🚙 </h1>
        <div class="chacontainer">
          <div class="chalist">
            <p id="tmi1">버튼을 눌러</p>
            <button type="button" class="btn btn-light">Go!</button>
        </div>
      </div>

댓글 알림