React에서 배경을 깔쌈하게 넣어보자
2021. 7. 12. 18:00ㆍ프론트엔드/React.js
728x90
아 솔직히 말하면 글 쓸 컨텐츠가 없다.
요새 좀 공부에 흥미가 잘 안생기기도 하고...
그래도 나는 익숙하지만 다른 사람들에게는 도움이 될만하겠다 싶어서
한번 써보았다
결론부터
// BackgroundBox.tsx
import { makeStyles } from '@material-ui/core/styles';
import background from "./img/bg.png";
const useStyles = makeStyles({
backgroundStyles: {
position: "fixed" as const,
width: "100%",
height: "100%",
filter: "blur(5px)",
backgroundSize: "cover",
backgroundPosition: "center",
zIndex: 0,
}
});
export default function BackgroundBox() {
const classes = useStyles();
return (
<div className={classes.backgroundStyles} style={{ backgroundImage: `url(${background})` }} />
)
}
// App.tsx
import BackgroundBox from '파일경로';
function App () {
return (
<div>
<BackgroundBox />
{... 기존 코드}
</div>
)
}
만약 material-ui를 사용하지 않는다면, 일반 css파일을 만들어서 똑같이 클래스를 만들면 된다.
// BackgroundBox.css
.backgroundStyles {
position: "fixed",
width: "100%",
height: "100%",
filter: "blur(5px)",
backgroundSize: "cover",
backgroundPosition: "center",
}
// BackgroundBox.tsx
import './BackgroundBox.css';
import background from './background.png';
function BackgroundBox() {
return (
<div className="backgroundStyles" style={{ backgroundImage: `url(${background})` }} />
)
}
끝!
css 요소를 살펴보자.
position: fixed => 부모의 위치로부터 독립적
width: 100%, height: 100% => 전체 화면
filter: "blur(5px) => 블러처리
backgroundSize: "cover" => 화면에 꽉 차도록 자동으로 늘림 (비율 유지. 사진이 안 찌그러지고 잘림)
backgroundPosition: "center" => 배경이 중앙에 오도록 함
'프론트엔드 > React.js' 카테고리의 다른 글
Material-UI 사용 중에 findDOMNode is deprecated 에러가 뜬다면? (0) | 2021.07.14 |
---|---|
React Router URL에 따라 Mount 시키기 (0) | 2021.07.13 |
Javascript for 반복문 정리 (0) | 2021.07.09 |
React - HOC 대신 useContext를 사용해보자. (0) | 2021.07.07 |
React Router 배워보기 (0) | 2021.07.04 |