반응형 라이브러리10 [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. [MUI] MUI 예제: 4. Theming MUI 예제: 4. ThemingcreateTheme과 ThemeProvider를 사용하면 애플리케이션 전체의 디자인을 일관되게 관리하고 변경할 수 있습니다.커스텀 테마 생성 및 적용createTheme으로 테마 객체를 만들고, ThemeProvider로 앱의 최상단을 감싸서 테마를 적용합니다.import * as React from 'react';import { createTheme, ThemeProvider } from '@mui/material/styles';import Button from '@mui/material/Button';import Stack from '@mui/material/Stack';// 새로운 테마 정의const theme = createTheme({ palette: { .. 2025. 9. 26. [MUI] MUI 예제: 3. `sx` Prop을 이용한 커스터마이징 MUI 예제: 3. sx Prop을 이용한 커스터마이징MUI v5부터 도입된 sx prop은 컴포넌트에 직접 CSS를 적용하는 매우 강력한 방법입니다. 테마의 값에 접근할 수 있어 일관성을 유지하기 좋습니다.기본 사용법CSS 속성을 객체 형태로 전달합니다.import * as React from 'react';import Box from '@mui/material/Box';export default function SxProp() { return ( );}반응형 스타일링sx prop 내에서 배열을 사용하여 breakpoint별로 다른 스타일을 적용할 수 있습니다.배열의 값은 xs, sm, md, lg, xl 순서에 해당합니다.import Button from '@mui/material/Butt.. 2025. 9. 26. 이전 1 2 다음 반응형