[React] CSS 배경화면 가운데 글 넣기

리액트(react)에서 html과 css를 활용하여 image를 배경화면으로 두고 앞쪽 가운데 글을 넣는 방법에 대해 적어보겠다. 다른 react/nodejs에 대한 기초 지식은 아래의 url을 참고하자.

 

[Web/nodejs] - nodejs 기초 총 정리

 

 

 

기본적으로 css는 module을 사용했다. module을 사용하면, 중복 현상이 일어나지 않아서 좋다. 사용법은 이름을 만들 때 .module.css를 붙여서 만들어주면된다. 그리고 아래와 같이 jsx에서 import styles from '모듈 위치' 로 불러와서 className 부분에 추가를 해서 사용하면 된다.

import styles from './intro.module.css'
const INTRO_IMAGE = '/images/mission_vision/planet3.jpg'

const Intro = () => {
    return (
        <figure className={styles.figure}>
            <img src={INTRO_IMAGE} alt="intro picture" />
            <article className={styles.txt}>
                <h1>hanpy </h1>
                <h3>즐겁게 html을 수정해 봅시다</h3>
            </article>
        </figure>
    )
}

export default Intro;

 

 

.figure {
	width: 100%;
	height: 50vh;
	z-index: 1;
}

.figure img {
	width: 100%;
	height: 100%;
	object-fit: fill;

    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;
}

.figure article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

	left: 50vw;
	top: 25%;
    position: absolute;
    transform: translate(-50%, -50%);
}

 

위의 css 코드중 아래의 코드를 살펴보자

 

    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: crisp-edges;

위의 코드는 image가 축소/확대 됐을 때 이미지 깨지는 것을 막아주는 css이다. 그대로 복사해서 붙여넣기 해서 사용하면 된다.