웹사이트를 개발을 위해 웹프레임워크를 많이 사용하게 됩니다. 그 중에서도 가장 쉽게 시작할 수 있는 프레임워크 중 하나인 부트스트랩을 소개해 드립니다.
부트스트랩 소개
소개
부트스트랩은 오픈 소스 프론트엔드 프레임워크로 트위터에서 시작되었습니다. 트위터에서 사용하는 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS, Javascript로 만들어 놓은 것이죠.
글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘, 드롭다운 메뉴, 내비게이션 바, 탭, 리스트, 이동 바, 알림 메시지, 진행 바등 웹 페이지에서 쓰이는 모든 HTML 요소가 내장되어 있습니다. 그렇기 때문에 웬만한 사이트들은 이 부트스트랩으로 개발 가능합니다.
장점
개발 진입장벽이 낮습니다. 부트스트랩의 CSS, JavaScript만 설치하고 함수만 불러오면 비슷한 디자인을 손쉽게 만들 수 있습니다. 이것은 웹프레임워크를 많이 다뤄보지 않은 개발자에게 굉장히 큰 장점이 될 수 있습니다.
단점
디자인을 가져다쓰다 보니 비슷한 디자인의 페이지가 많아질 수 있습니다. 이 단점은 오픈 소스이기 때문에 사용자가 임의로 변경할 수 있어서 자유롭게 수정하면 해결되지만 솔직히, 무언가를 건드려서 수정한다는 것이 쉽지만은 않습니다. 프레임워크 전반적인 구조와 흐름을 알아야하기 때문이죠.
부트스트랩 시작하기
index.html
프로젝트의 최상위 폴더에 index 파일을 생성합니다. 모바일에서의 적절한 반응형 동작을 위해 <meta name="viewport">태그를 입력합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
>> VIEWPORT
뷰포트의 기능을 간단하게 설명드리겠습니다. 웹페이지는 기기별로 보여지는 영역이 다르기 때문에 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보입니다. 쉽게 말씀 드리면 모바일에서 작은 화면에 웹페이지 전체를 표시하면 너무 작아져서 보기가 힘들게 됩니다. 그렇기 때문에 모바일 기기에서도 페이지의 너비나 화면 배율을 설정하는 기능이 바로 뷰포트입니다.
CSS / JS 포함
1) CDN 링크 - 다운로드 없이 컴파일된 CSS와 JS의 캐시 버전을 프로젝트에 포함시킵니다.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
2) 다운로드 링크 - 바로 사용할 수 있는 컴파일된 부트스트랩 코드를 프로젝트에 포함시킬 수 있습니다.
Download · Bootstrap v5.0 (getbootstrap.com)
3) Hello, World! - 이제 부트스트랩을 사용할 준비가 끝났습니다. 레이아웃을 만들고 컴포넌트를 추가해 웹 사이트를 만드시면 됩니다. 간단하쥬?
'웹 개발 > 웹사이트' 카테고리의 다른 글
| Lighthouse를 이용한 웹, 블로그 성능 측정하기 (69) | 2024.08.23 |
|---|---|
| 301 리다이렉트 설정하는 방법 (.htaccess) (35) | 2024.08.12 |
| FTP 폴더 권한 변경하는 방법 (파일질라, 명령프롬프트) (22) | 2024.08.07 |
| MVC 패턴 구조와 흐름 파악하기 (108) | 2024.08.05 |
| 웹프레임워크 | PHP 프레임워크 소개와 폴더 구조 (79) | 2024.08.02 |
| 도메인 | 내 도메인 이메일 주소로 사용하는 방법 (107) | 2024.07.05 |
| 도메인 | SSL 인증서 종류(DV, OV, EV)와 인증 브랜드 (95) | 2024.06.28 |
| 웹호스팅 | 아이네임즈 대표도메인 변경과 도메인 관리 (93) | 2024.06.26 |
댓글