728x90
반응형

HTML 폰트 적용하는 방법 :: 러아니푸의 공부방 (tistory.com)

 

HTML 폰트 적용하는 방법

https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1. 위 링크에서 원하는 폰트를 누릅니다. 2. '+ Select this..

fjdkslvn.tistory.com

HTML의 완성도를 높이는 부트스트랩 기초 사용법 :: 러아니푸의 공부방 (tistory.com)

 

HTML의 완성도를 높이는 부트스트랩 기초 사용법

https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com..

fjdkslvn.tistory.com

 

* 부트스트랩과 폰트를 적용하는 방법은 위의 글을 참고하시길 바랍니다*

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- 글꼴 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

    <title>판매화면</title>

    <style>
      *{
        font-family: 'Do Hyeon', sans-serif;
      }
      .main{
        width: 600px;
        margin: auto;
      }
      .center{
        width: 600px;
        height: 400px;
        margin: auto;
        display: block;
        background-size: cover;
        background-position: center;
      }
      .btn_center{
        margin: auto;
        display: block;
      }
    </style>
  </head>
  <body>
  <div class="main">
    <img class="center" src="강연.png">
    <h1>강연 한정판 블루레이 <span style="font-size: 20px">가격:30,000원/개</span></h1>
    <p>모든 것은 등가교환의 법칙으로 설명할 수 있습니다. 제가 이 블루레이를 드리는 대신 당신은 30,000원을 내놓으셔야겠습니다.</p>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="name">주문자 이름</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">수량</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>--수량을 선택하세요--</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="주소">주소</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">수량</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

    <button style="margin-bottom: 50px" type="button" class="btn btn-primary btn_center">주문</button>
  </div>

  </body>
</html>

솔직히 강연을 좋아하는 것도 맞지만.. 새로운 사진 찾기가 귀찮아서 자꾸 저걸 쓰게 됩니다. 누가 좀 평범한 사진 하나 주면 그거 넣어서 쓸텐데..ㅎㅎ

 

일단 html만 구성해보자고 생각해서 부트스트랩에서 끌어다 쓴거라 id값들은 무시하는게 좋습니다.

 

코드에서 이해가 안가는 부분이 있으면 질문하셔도 좋습니다!

728x90
반응형

'Frontend > HTML & CSS' 카테고리의 다른 글

[css] 이미지 드래그 막는 방법  (1) 2024.01.25
HTML 입력 요소 모음  (0) 2021.08.20
HTML의 완성도를 높이는 부트스트랩 기초 사용법  (1) 2021.07.21
HTML에서 style요소를 CSS파일로 분리하기  (0) 2021.07.21
HTML 주석 달기  (0) 2021.07.21

+ Recent posts

티스토리툴바