지금까지 나는 전체 하드코딩으로 홈페이지를 만들었었다.
(내가 다녔던 웹 에이전시 특성상 어쩔수없이,,,)
버튼 모양, 폼, 테이블 등 직관적으로 봤을 때 이쁜 비율을 참고하기 위해 부트스트랩 템플릿을 자주 봤었는데, 이번에는 이 BOOTSTRAP 직접 사용해서 홈페이지를 만드는 방법을 포스팅 하려고 한다.
매번 홈페이지 들어가서 사용하려면 꼭 하나씩 빼먹는 일이 발생하니
아래 코드를 참고하면 넘나좋은것.(내가 보려고 남기는 부분임)
<!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 을 가면 각종 다양한 소스들이 있으니, 원하는 디자인 찾아서 긁어다가 쓰면 초고속 페이지만들기 성공!