Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

비바라기's

[CSS] 구글 폰트 / 부트스트랩 5.0 시작 템플릿(카피&페이스트) 본문

TIL/웹개발 종합반

[CSS] 구글 폰트 / 부트스트랩 5.0 시작 템플릿(카피&페이스트)

vivaragi 2022. 8. 17. 12:47
목차
1. 구글 폰트 적용하기
2. 부트스트랩 시작 템플릿 및 적용하기

구글 폰트 적용하기

1. 구글 웹폰트 페이지에 들어갑니다. 

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

 

Google Fonts

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

fonts.google.com

 

2. 원하는 폰트를 선택합니다.

 

3. 스크롤을 아래로 내리면, 원하는 굵기(Bold)의 폰트를 선택할 수 있습니다. 원하는 굵기의 폰트 옆, 붉은 테두리가 쳐진 네모 부분을 클릭합니다.

 

4. 붉은 테두리가 쳐진 네모 부분을 HTML 파일의 <head> 부분에 복사& 붙여넣기 합니다.

 

5. 아래의 붉은 테두리가 쳐진 네모 부분을, <style> 내부의 원하는 선택자의 속성으로 추가합니다.

6. 적용례는 다음과 같습니다.  

Before After

부트스트랩 시작 템플릿 및 적용하기

1. 기존의 HTML 템플릿을 지우고 아래 코드를 카피&페이스트 합니다. 

<!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>Title</title>
  </head>
  <body>
    <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>
  
  </body>
</html>

최신 버전인 부트스트랩 5.0을 사용하기 위해서는 jQuery와 Popper를 반드시 불러와 포함시켜야 합니다. 위의 코드는 Bootscrap Bundle, jQuery, & Popper를 별도로 다운로드 받지 않고도 웹에서 불러와 코드에서 기능하게 해 줍니다.

 

Popper 는 툴팁, 팝업을 쉽게 배치할 수 있게 도움을 주는 자바스크립트 코드입니다. 툴팁의 팝업 위치 변경, 스크롤 업/다운시 스크린 상에 팝업을 유지시키는 등의 기능을 사용할 수 있습니다. 사용법은 각주를 참고해주세요[각주:1]. 

 

2. 부트스트랩 홈페이지에 접속합니다. 

https://getbootstrap.com/docs/5.2/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

 

3. 웹 페이지 왼쪽의 사이드바를 스크롤하면서 원하는 디자인 옵션을 찾습니다. 저는 Buttons 카테고리에서 파란색 버튼을 선택해 넣어보겠습니다.

4. 원하는 디자인 옵션과 매칭되는 HTML 코드를 카피한 후, 내 HTML 파일의 <body> 태그 내부에 페이스트합니다. 파란색 버튼을 넣겠다고 했으므로, Primary라고 쓰여진 첫 번째 코드를 카피& 페이스트 하겠습니다.

5. bon appetit :)

 

  1. https://popper.js.org/ [본문으로]

'TIL > 웹개발 종합반' 카테고리의 다른 글

[JS] 스코프와 호이스팅  (0) 2022.08.17
자주 쓰이는 HTML & CSS 태그 사전 링크  (0) 2022.08.16
[HTML, CSS] 메타 태그란? & 선택자란?  (0) 2022.08.14
HTML, CSS란 ?  (0) 2022.08.14
'TIL/웹개발 종합반' Related Articles more