[HTML] Button 에 Bootstrap 적용해보기

1. HTML

HTML (Hypertext Markup Language) 은 웹페이지를 만드는데 사용하는 언어이다.

문서를 작성할 때 <!DOCTYPE html> 태그로 시작이 되고 <html> 태그로 전체 틀을 구성, 그 안에 <head> 와 <body> 영역으로 나뉘어진다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. CSS

CSS (Cascading Style Sheets) 는 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있는 Style Sheet 언어이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.mybtn {
	color: blue;
}
</style>
<body>
    <button class="mybtn">CSS</button>
</body>
</html>

html 요소에 id 또는 class 를 지정해주고

Document

3. 구글 웹폰트 사용하기

https://fonts.google.com/?subset=korean

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

위 사이트에 접속하여 사용하고자 하는 폰트를 고른 후 Styles 에서 원하는 스타일을 골라 Select 를 눌러준다.

그리고 우측 메뉴를 보면 use on the web 이라는 항목이 있는데 @import 를 선택해준다.

두 개의 링크가 뜨는데 Style 태그 안에 복사/붙여넣기를 해주면 된다.

<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbit&display=swap');
  
  * {
  	font-family: 'Orbit', sans-serif;
  }
</style>

* "*" 기호의 의미는 전체에 적용한다는 뜻이다.

4. 부트스트랩 사용하기

부트스트랩 (Bootstrap) 이란 누군가 미리 만들어놓은 CSS 클래스나 JavaScript 함수들을 모아둔 프레임워크이다.

원하는 버튼, 입력폼, 표 등등의 디자인을 고른 후 코드를 복사/붙여넣기만 하면 꽤 괜찮아보이는 웹페이지를 손쉽게 만들 수 있다.

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

먼저 내 HTML 코드 <head> 태그 부분에

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

이 링크들을 삽입하고

이런 식으로 원하는 디자인을 고르면 아래 각각의 코드가 뜨는데

이를 내 코드에 복사/불여넣기만 하면 그대로 적용이 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
    <button>Bootstrap 적용 전</button>
    <button type="button" class="btn btn-outline-warning">Bootstrap 적용 후</button>
</body>
</html>

Document

티스토리툴바