6. Background Image

※배경화면 랜덤으로 나타내기, ChromeApp.jsx 추가

  - Math.floor(반올림), Math.random(랜덤 숫자)로 새로고침마다 랜덤 이미지 출력

 

componenet

  -Input.jsx

  -Button.jsx

module

  -Login.jsx

  -Clock.jsx

page

  -ChromeApp.jsx

css

  -List.css

img

  -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg

 

 

page  - <ChromeApp.jsx > : Math.floor(반올림), Math.random(랜덤 숫자)로 랜덤 이미지 출력

import React from 'react'
import '../css/List.css'
import Image1 from '../img/1.jpg'
import Image2 from '../img/2.jpg'
import Image3 from '../img/3.jpg'
import Image4 from '../img/4.jpg'
import Image5 from '../img/5.jpg'

const randomImage = [Image1, Image2, Image3, Image4, Image5]

function ChromeApp() {
  const bgImage = randomImage[Math.floor(Math.random() * randomImage.length)]

  return <div style={{backgroundImage: `url(${bgImage})`}} className="ChromeAppDiv"></div>
}

export default ChromeApp

 

List.css

body { //화면에 여백 없이 꽉 차게
  margin: 0; 
}

.ChromeAppDiv {
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

 

App.js

import React from 'react'
import ChromeApp from './page/ChromeApp'

function App() {
  return (
    <div>
      <ChromeApp />
    </div>
  )
}

export default App