손쉽게 홈페이지 만들기 Bootstrap

지금까지 나는 전체 하드코딩으로 홈페이지를 만들었었다.
(내가 다녔던 웹 에이전시 특성상 어쩔수없이,,,)
버튼 모양, 폼, 테이블 등 직관적으로 봤을 때 이쁜 비율을 참고하기 위해 부트스트랩 템플릿을 자주 봤었는데, 이번에는 이 BOOTSTRAP 직접 사용해서 홈페이지를 만드는 방법을 포스팅 하려고 한다.

Bootstrap CDN링크 바로가기>

매번 홈페이지 들어가서 사용하려면 꼭 하나씩 빼먹는 일이 발생하니
아래 코드를 참고하면 넘나좋은것.(내가 보려고 남기는 부분임)

<!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://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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>

      <title>부트스트랩 연습하기</title>
  </head>
</html>

아래 Documentation 을 가면 각종 다양한 소스들이 있으니, 원하는 디자인 찾아서 긁어다가 쓰면 초고속 페이지만들기 성공!

Bootstrap Documentation 바로가기

profile
Do what I want for no regret

0개의 댓글