⭐CSS를 잘하는것과 별개로 미적인 영역으로 들어가야 할때는
남이 만들어 놓은 CSS를 활용하는것이 좋다.
그 중에서도 유명한 게 "부트스트랩"
frontend>html file>(index.html)file생성
🎈부트스트랩 시작 템플릿 붙여넣기.
<!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>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>https://getbootstrap.com/docs/4.0/components/alerts/
여기서 필요한 코드를 복붙해서 사용한다.
버튼을 가져와봤다.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary">뽀롱 주둥이</button>
시작 템플릿에 부트스트랩 CSS와 JS 갖고와져있는데
가져온 버튼을 보면 버튼에 마우스를 가져다 댔을때 모션이 생기기도 한다.
JS이 필요한 이유다. 그래서
🎈항상 부트스트랩을 이용할 때는 코드스니펫에서 기본 시작 템플릿을 가지고 와야한다.
🐾만약 부트스트랩에 있는걸로는 부족하다 싶으면
내가 만든 CSS를 부트스트랩에서 가져온거에다가 중첩을 한다든지,
div를 묶어서 이용을 하든지.
내 커스텀 CSS와 부트스트랩 CSS를 함께 이용한다.
아 스파르타 복습해야한다..