앞서 분리한 파일은 다시 원상복구 했다.
이번에는 앞글에 말했듯이 남이 만들어놓은 코드를 이용해서 예쁘게 꾸며보겠다.
예쁘게 만들기 쉽지않은 개발자를 위해 만들어놓은 것들이 있다.
부트스트랩을 이용해서 꾸며볼꺼다.
먼저 새로운 파일을 만들어준다.
부트스트랩 시작 템플릿 코드를 복사해서 새로만든 index.html 파일에 붙여넣어준다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
여기서 보면 알겠지만 이만큼이 남이 만들어놓은 css코드를 가지고 온 부분이다.
이것을 어떻게 사용하냐면 일단 open with live server을 먼저 열어준다.
아래 사이트에 들어가준다.
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
들어가면 아래 사진과 같이 나오는데 제일 위에 있는 버튼하나를 복사해준다.
<button type="button" class="btn btn-primary">Primary</button>body의 h1밑에 붙여넣어주고 저장한다.
이렇게 버튼이 붙은것을 볼 수 있다.
이 사이트에 들어가면 정말 많은것들이 있는데 원하는것을 찾아서 그대로 갖다 쓰면 원하는 모습을 볼 수 있다.
다음시간엔 이 부트스트랩을 활용해서 그럴싸한 웹페이지를 만들어보겠다.