프로젝트를 생성하셨다면 이제 정신 나간 사이트를 만들 차례입니다.

우선 배경으로 선택할 이미지를 골랐습니다. 이미지는 public에 assets라는 디렉토리를 만들고 해당 디렉토리에 이미지를 넣었습니다.

눈이 아플수 있으니 주의!

제가 사용한 배경입니다. (이미지 이름은 rainbow로 하였습니다.)

글자

반복되는 글씨

다음을 글자를 넣어보았습니다.
배열을 만들고...
글짜를 for문으로 10000번 때려박았습니다.

let names = []
for (let i = 0; i<10000; i++) {
  names.push("리액트 무료 강의!! 지금 신청하면 1+1")
  names.push("장소 : 태평양")
}

글씨 디자인

다음으로 글씨에 디자인을 넣어보았습니다. 하얀색 그림자를 찐하게 넣어주었습니다. 이제 입힌 디자인을 list라는 변수에 넣고...

const list = names.map(name => 
<h1 style={{textShadow: "-3px 0px white, 0px 3px white, 3px 0px white, 0px -3px white"}}>
  {name}
</h1>)

출력

이제 잘만들어진 배경화면과 글짜를 출력해봅시다.

return (
<div className="App" style={{backgroundImage: 'url(/assets/rainbow.gif)'}}>
  {list}
</div>
);

이제 웹에서 확인해봅시다.

잘 출력되는 것 같군요... 만족합니다.

전체 코드

import './App.css';

function App() {

  let names = []
  for (let i = 0; i<10000; i++) {
    names.push("리액트 무료 강의!! 지금 신청하면 1+1")
    names.push("장소 : 태평양")
  }
  const list = names.map(name =>
      <h1 style={{textShadow: "-3px 0px white, 0px 3px white, 3px 0px white, 0px -3px white"}}>
        {name}
      </h1>)
  return (
    <div className="App" style={{backgroundImage: 'url(/assets/rainbow.gif)'}}>
      {list}
    </div>
  );
}

export default App;

GitHub