■ 부트스트랩(Bootstrap)
: HTML, CSS, JavaScript 반응형 웹 사이트, 모바일 우선 웹 사이트를 쉽게 작성할 수 있도록 해주는 무료 프레임워크.
>> CSS, JS에 사용
■ 특징
1. 반응형 디자인 (Responsive Design)
□ PC, 태블릿, 스마트폰에서도 자동으로 화면 크기 조정
□ 미디어 쿼리를 직접 작성하지 않아도 된다.
2. 다양한 UI 컴포넌트 제공
□ 부트스트랩은 이미 디자인된 다양한 요소들을 제공
□ 버튼, 네비게이션 바, 모달 창, 카드, 폼 요소 등등을 바로 사용할 수 있음
3. 그리드 시스템(Grid System)
□ 12개의 컬럼을 활용해 레이아웃을 손쉽게 구성할 수 있음
4. 스타일이 깔끔하고 직관적
□ 추가적인 CSS 작업 없이도 예쁜 디자인 가능
1. 사용법
1) getbootstrap.com에서 부트스트랩 다운 받은 후 웹 애플리케이션 프로젝트에 추가
■ <link> 태그 : 부트스트랩 CSS 효과를 사용하기 위한 태그
■ <script> 태그 : 요소의 js 효과를 위한 태그
■ 반응형 meta 태그 : 부트스트랩이 올바르게 적용되기 위해서는 반응형 meta 태그를 <head>태그에 추가
2) 부트스트랩 CDN을 HTML 페이지에 추가하는 방법
■ Bootstrap 공식 사이트에서 가져다가 CDN을 추가한다.
■ CDN은 반드시 CSS 먼저 기술한 후, JS를 그 다음으로 기술한다.
2. 그리드 시스템
■ 부트스트랩의 그리드 시스템은 12개의 칼럼을 필요에 따라 합쳐서 모양을 구현함.
3. 이미지
: 부트스트랩에서는 이미지에 대한 CLASS 속성 값을 제공한다.
| rounded | 라운드 이미지 |
| rounded-circle | 원형 이미지 |
| img-thumbnail | 썸네일 이미지 |
| float-start, float-end | 이미지 배치 방향 |
| mx-auto(margin:auto) + d-block(display:black) | 이미지 가운데 정렬 |
| img-fluid | 반응형 이미지 |
4. 자바스크립트 기능 부트스트랩으로 구현하기
1) 캐러셀
: 특정 태그(엘리먼트)가 자동으로 슬라이딩 되면서 다음 이미지를 보여주는 것을 회전하면서 반복하는 기능.
주로 메인 화면에서 사이트의 주요내용(뉴스)을 슬라이딩하며 보여줄 때 사용된다.
2) 이미지 모달(modal)
: 이미지를 표시하는 일종의 대화상자. 이미지 모달은 스마트 기기와 같은 작은 화면에서 선택한 이미지에 대한 정보와 이미지를 좀 더 원본에 가까운 표시를 할 때 사용한다.
3) 팝오버
: 작은 툴팁을 마우스 버튼을 클릭하거나 마우스를 호버해서 팝업으로 제공함.
팝오버는 data-bs-toggle="popover" 속성으로 구현하며, 팝업으로 표시되는 메시지의 타이틀은 title 속성, 내용은 data-bs-content 속성을 사용한다.
팝오버 기능이 제대로 동작되려면 자바스크립트에 팝오버 트리거를 리스트에 등록하는 코드를 추가해야 한다.
추가로 찾아본 내용
1. CDN이란?
콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN)).
콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
'IT > Frontend' 카테고리의 다른 글
| [쉽게 배우는 H.C.J] Chapter 5 - 자바스크립트 제어문 (0) | 2025.03.06 |
|---|---|
| 자바스크립트 공부 (1) | 2025.03.06 |
| AJAX + JQuery (0) | 2025.03.01 |
| [쉽게 배우는 H.C.J] Chapter 4 - Advanced CSS 추가 기능 (0) | 2025.02.28 |
| [쉽게 배우는 H.C.J] Chapter 4 - 미디어 쿼리 (0) | 2025.02.28 |