고정 헤더 영역
상세 컨텐츠
본문
반응형
normalize.css
- 브라우저 기본 스타일을 정리하여 모든 브라우저에서 일관된 스타일을 제공하는 css 파일 입니다.
- 기본적으로 HTML 요소의 스타일을 조정하여 브라우저 간 차이를 줄입니다.
- 예를 들어, <h1> 태그의 크기나 <button>의 기본 스타일을 통일하는 역할을 합니다.
- HTML5 요소 지원 ( <main>, <article> )
활용 방법
1. CDN을 사용하여 적용
HTML 의 <head> 태그 안에 다음 코드를 추가 하면, 별도의 다운로드없이 온라인으로 최신버전을 바로 사용할 수 있음
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">2. 프로젝트에 직접 다운로드하여 적용
공식 사이트에서 normalize.css 파일을 다운호드하여 프로젝트의 css 폴더에 저장한 후, HTML에서 불러옵니다.
<link rel="stylesheet" href="css/normalize.css">
MUI의 CssBaseline
- Material UI에서 제공하는 CSS 리셋 컴포넌트입니다.
- normalize.css와 유사하지만, Material UI 디자인 시스템에 맞춰 추가적인 스타일을 적용합니다.
- 모든 브라우저에서 <body>의 기본 마진 제거
- 폰트 스무딩 적용, 박스 모델 통일 (box-sizing: border-box;) 등 MUI 제공 컴포넌트 활용
활용 방법
1. CssBaseline 을 활용하려면 MUI 라이브러리를 가져와야 합니다.
import CssBaseline from '@mui/material/CssBaseline';
function MyApp() {
return (
<>
<CssBaseline />
{/* 나머지 애플리케이션 코드 */}
</>
);
}
2. 주로 Vite React 프로젝트에서는 main.jsx 에 설치하는 것을 추천합니다.
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import { CssBaseline } from '@mui/material'
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<CssBaseline />
<App />
</StrictMode>,
)'html + css' 카테고리의 다른 글
| ~ (틸트)선택자 , + 선택자 활용 (0) | 2025.05.13 |
|---|---|
| var(--clr) 전역사용, 개별사용 (0) | 2025.05.13 |
| 콜론 - 단일 콜론, 이중 콜론 (2) | 2025.01.28 |
| radialGradient (0) | 2025.01.07 |
| viewport, viewBox 비교 (0) | 2025.01.07 |
