Bootstrap(https://getbootstrap.kr/)
부트스트랩(Bootstrap)은 웹 개발을 더 쉽고 빠르게 할 수 있도록 도와주는 오픈 소스 프론트엔드 프레임워크이다. 이 프레임워크는 HTML, CSS, JavaScript로 구성되어 있고, 웹 페이지를 구성하는 다양한 요소와 디자인이 미리 만들어져 있어 개발자는 이를 활용하여 웹 페이지를 보기 좋고 사용하기 편하게 만들 수 있다.
CDN을 사용하여 Bootstrap 적용
HTML 파일에 CDN 링크 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<!-- 부트스트랩 CSS CDN 링크 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<!-- 부트스트랩 JavaScript 및 관련 라이브러리 CDN 링크 -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
- CSS 파일은 HTML 문서가 렌더링되기 전에 스타일을 적용하므로 <head> 태그 안에 위치. 이렇게 하면 페이지가 로드되는 동안 사용자가 빈 화면을 보지 않고 바로 스타일이 적용된 내용을 볼 수 있다.
- JavaScript 및 관련 라이브러리는 페이지 로딩 시간이 길어질 수 있기 때문에 HTML 문서가 일단 렌더링되고 나서 스크립트를 로드하도록 하기 위해 <body> 태그의 가장 하단에 위치.이렇게 하면 페이지가 빠르게 표시되고, 스크립트 파일을 로딩하는 동안에도 텍스트나 이미지 등이 표시될 수 있다.
