<부트스트랩 적용>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />부트스트랩 CSS: 웹 페이지의 기본 스타일링과 레이아웃을 제공
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css">부트스트랩 아이콘 CSS: 아이콘을 웹 페이지에 추가할 때 사용
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pretendard:wght@400;700&display=swap">Pretendard 폰트: 웹 페이지에서 사용할 폰트를 정의
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>jQuery: DOM 조작 및 이벤트 처리에 유용한 라이브러리
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>Popper.js: UI 요소의 정확한 배치에 도움을 주는 라이브러리
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>부트스트랩 JavaScript: 부트스트랩 UI 컴포넌트의 기능을 지원
[head에 link, body끝에 script를 넣는 이유]
CSS (link): 에 위치 / 페이지가 로드될 때 스타일이 즉시 적용되어 스타일이 잘 적용된 상태로 페이지가 표시
JavaScript (script): 끝에 위치시키는 것이 권장 / 페이지 콘텐츠가 먼저 로드되고 렌더링된 후 스크립트가 로드되어 사용자에게 더 빠르게 페이지를 제공
또한, 페이지가 렌더링되는 동안 스크립트가 실행되지 않으므로 페이지의 초기 렌더링에 영향을 미치지 않아서
==========================================
<글꼴 적용>
여길 들어가서 원하는 폰트에 들어가서
원하는 사이즈 오른쪽에 +가 있으면 눌러서
html코드랑 css 코드를 복사해서
붙여넣으면 된다는데
나는 왜 +가 안뜨는걸까..? 하하
=====================================
<부트스트랩에서 아이콘과 함께 적용하기>
<a class="icon-link icon-link-hover" href="{{ url_for('index') }}">
돌아가기
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>SVG 아이콘 사용하기
-> 직접 정의하고 사용할 수 있음
==> 이 방법으로 적용하려고 했으나 적용이 안되서
밑에처럼 i태그로 바꿔서 사용함
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="{{ url_for('index') }}">
돌아가기
<i class="bi bi-arrow-right"></i>
</a>bi는 부트스트랩 아이콘의 기본 클래스
bi-arrow-right는 아이콘의 이름
===========================================
<색상변경>
style="background-color: black;"
을 추가하여 변경..
