2022. 10. 13. 13:59ㆍProgramming/CSS
부트스트랩 / 폰트 적용
부트스트랩과 폰트 적용에 대해 기록을 하고자 한다.
부트스트랩
우리가 웹 사이트를 만들 때 HTML로 해당 사이트의 골조를 만들었다면 css는 해당 사이트를 꾸미는 역할을 한다. 이때 프론트 개발자가 아니면 css에 사용에 거리감을 느끼는 경우가 있는데 바로 내 경우가 그런 경우였다. 그러던 와중에 발견했던 사이트가 바로 부트 스트랩이다. 부트스트랩은 웹 사이트를 쉽게 만들 수 있게 도와주는 css / js 프레임워크이다.
Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
해당 사이트에서 우리는 우리가 필요하고자 한 디자인을 살 수도 팔 수도 있으며 간단한 무료 디자인을 사용해서 임시로 웹을 만들 수 있다.
Introduction · Bootstrap v5.0 (getbootstrap.com)
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
사용방법
먼저 HTML 문서의 <head> </head> 부분에 해당 <link>부분을 넣어줘야 한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
java script로 구현하는 부분에서의 작동을 원활하게 하기 위해 해당 <script> 부분도 <head> </head> 사이에 넣어준다.
<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>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
--> </body> </html>
해당 파일을 열어보면 이런 식으로 나와있다.
그럼 이 해당 html 문서에 button을 하나 추가해보자. 코드는 아무런 기능이 없이 모양만 추가하는 것으로 간단하게 작성했다.
<button type="text">가나다</button>
다만 이런식으로 버튼을 추가하면 디자인은 너무 투박하게 적용이 된다. 이제 우리가 앞에서 봤던 부트 스트랩 홈페이지를 한번 들어가 보자. 이번에는 버튼의 다양한 종류를 찾아 적용을 하기 위해 필요한 것이므로 버튼의 간단한 디자인이 있는 부분을 링크로 걸어두었다.
Buttons · Bootstrap v5.0 (getbootstrap.com)
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>
아까와 다르게 해당 링크를 통해 코드만 입력했을 뿐인데 디자인이 적용이 된 버튼이 적용이 되었다. 부트스트랩의 경우 이런 식으로 활용이 가능하다. 페이지를 훑어보면 버튼뿐만이 아닌 다양한 컴포넌트와 폼 등 다양한 부분에 걸쳐 기본적인 이미지를 제공한다. 이를 우리가 맘에 드는 것에 맞춰서 사용하면 간단하게라도 디자인적으로 웹을 구성하고 표현할 수 있게 된다.
폰트
폰트의 경우 구글 폰트를 사용하였다. 해당 사이트에서 제공되는 폰트 중에서 맘에 드는 것을 선택하고 적용하는 방식이다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
해당 사이트에 들어가면 아래의 이미지처럼 페이지가 나타난다.
이런 페이지에서 본인이 맘에 드는 폰트를 찾고 해당 페이지를 들어간다. 해당 페이지에서 소개가 된 폰트를 사용하기 위해
우측 상단에 존재하는 사각형 버튼을 클릭한다. 해당 버튼을 누르면 selected family라는 창이 나타나게 되며 우리는 이 폰트를 <link>의 형식으로 가져와서 사용할 것이다. 내가 선택한 폰트는 'Noto Sans Koean'이라는 폰트이며 이를 대상으로 예시를 가져오겠다.
해당 링크 태그 중에서 아래에 있는 링크를 <Title></Title> 태그 아래에 붙여준다
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">그러고 나서 <style></style> 태그란에 해당 코드를 넣어주면 된다. 아래 코드는 전체 항목에 적용하기 위해 * 자를 써서 적용했다. css 입력 코드 / 전체 적용 코드
font-family: 'Noto Sans KR', sans-serif;<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
</style>
특정 페이지에 혹은 특정 블록에 적용하고 싶다면 해당 페이지 혹은 블록의 class 나 id값을 사용해서 적용하면 된다.