본문 바로가기
반응형

분류 전체보기166

[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.
[MUI] MUI 예제: 2. 레이아웃 MUI 예제: 2. 레이아웃MUI는 강력한 레이아웃 시스템을 제공합니다.Grid반응형 레이아웃을 위한 12컬럼 그리드 시스템입니다. xs, sm, md, lg, xl prop을 사용하여 breakpoint에 따른 컬럼 수를 지정할 수 있습니다.import * as React from 'react';import { styled } from '@mui/material/styles';import Box from '@mui/material/Box';import Paper from '@mui/material/Paper';import Grid from '@mui/material/Grid';const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.pa.. 2025. 9. 26.
[MUI] MUI 예제: 1. 기본 컴포넌트 MUI 예제: 1. 기본 컴포넌트MUI는 다양한 기본 UI 컴포넌트를 제공합니다.Buttonvariant prop으로 버튼의 스타일을 지정할 수 있습니다. (contained, outlined, text)import * as React from 'react';import Stack from '@mui/material/Stack';import Button from '@mui/material/Button';export default function BasicButtons() { return ( Text Contained Outlined );}TextField표준 입력 필드입니다. label과 variant를 지정할 수 있습니다.import * as React fr.. 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.
반응형

티스토리툴바