반응형 라이브러리/부트스트랩5 [Bootstrap] Bootstrap 예제: 4. Sass를 이용한 커스터마이징 Bootstrap 예제: 4. Sass를 이용한 커스터마이징Bootstrap의 가장 강력한 커스터마이징 방법은 Sass(SCSS)를 사용하는 것입니다. 내장된 변수를 수정하여 프로젝트에 맞는 디자인 시스템을 구축할 수 있습니다.설정 방법Sass 컴파일러 준비: Node.js 환경이라면 sass 패키지를 설치합니다.npm install -g sass파일 구조: 일반적으로 다음과 같은 구조를 사용합니다.my-project/|-- scss/| |-- _custom.scss // 변수를 덮어쓰거나 커스텀 스타일을 추가하는 파일| `-- main.scss // Bootstrap과 custom 파일을 불러오는 메인 파일|-- css/| `-- main.css // 컴파일된 결과물`-- .. 2025. 9. 26. [Bootstrap] Bootstrap 예제: 3. 유틸리티 클래스 Bootstrap 예제: 3. 유틸리티 클래스Bootstrap 5는 CSS를 직접 작성하지 않고도 스타일을 빠르게 적용할 수 있는 수많은 유틸리티 클래스를 제공합니다. 이를 "Atomic CSS" 방식이라고도 합니다.Spacing (간격)m은 margin, p는 padding을 의미합니다.t(top), b(bottom), s(start, left), e(end, right), x(x-axis), y(y-axis)를 조합하여 방향을 지정합니다.0~5까지의 숫자로 크기를 지정합니다.Margin Top & Padding XPadding 5Colors (색상)bg-*로 배경색을, text-*로 텍스트 색상을 지정합니다..bg-primarySuccess SubtleFlexbox (플렉스박스)d-flex로 flex.. 2025. 9. 26. [Bootstrap] Bootstrap 예제: 2. 그리드 시스템 Bootstrap 예제: 2. 그리드 시스템Bootstrap의 그리드 시스템은 container, row, col 클래스를 사용하여 반응형 레이아웃을 구성합니다.기본 구조.container: 전체 콘텐츠를 감싸고 중앙에 정렬합니다..row: 컬럼(column)들을 담는 수평 그룹입니다..col-*: 실제 콘텐츠가 들어가는 컬럼입니다. 한 .row 안에 있는 컬럼들의 숫자 합은 12를 넘지 않도록 구성하는 것이 일반적입니다.반응형 레이아웃 예제화면 크기에 따라 컬럼의 배치가 달라지는 예제입니다.lg (Large, 992px 이상): 3개의 컬럼이 한 줄에 4칸씩 차지 (4+4+4 = 12)md (Medium, 768px 이상): 2개의 컬럼은 6칸씩, 1개는 12칸을 차지sm (Small, 576px 이상.. 2025. 9. 26. [Bootstrap] Bootstrap 예제: 1. 기본 컴포넌트 Bootstrap 예제: 1. 기본 컴포넌트Bootstrap은 HTML 클래스 기반으로 다양한 컴포넌트를 제공합니다.Buttonbtn 클래스와 함께 btn-* 형태의 클래스를 추가하여 스타일을 지정합니다.PrimarySecondarySuccessInfoDarkLarge buttonSmall buttonCard콘텐츠를 담는 유연한 컨테이너입니다. 이미지, 텍스트, 버튼 등을 조합할 수 있습니다. Card title Some quick example text to build on the card title and make up the bulk of the card's content. Go somewhere Alert사용자에게 특정 정보를 알릴 때 사용합니다. A simple war.. 2025. 9. 26. [Bootstrap] 부트스트랩 주요 기능 정리 Bootstrap 주요 기능 정리Bootstrap은 반응형, 모바일 우선 웹사이트를 빠르게 개발할 수 있도록 도와주는 세계에서 가장 인기 있는 프론트엔드 프레임워크입니다. HTML, CSS, JavaScript로 구성되어 있으며, 다양한 UI 컴포넌트와 강력한 그리드 시스템을 제공합니다.핵심 특징1. 반응형 그리드 시스템 (Grid System)Bootstrap의 가장 핵심적인 기능으로, 웹 페이지를 최대 12개의 컬럼으로 나누어 레이아웃을 구성합니다.클래스 기반: container, row, col-* 클래스를 조합하여 복잡한 레이아웃도 쉽게 만들 수 있습니다.반응형: 화면 크기(breakpoint)에 따라 레이아웃이 자동으로 변경되도록 col-sm-*, col-md-*, col-lg-* 등의 클래스를.. 2025. 9. 26. 이전 1 다음 반응형