[CSS] 화면 꾸미기 (+리액트)

CSS에 정의

자바스크립트에서 함수를 정의하고 호출하듯 CSS에서도 스타일을 클래스화 해서 호출할 수 있다.
예를 들어

html > body content {
  color: white;
  font-size: 8rem;
  background-color: pink;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
}

자바 스크립트에서 를 사용하면 위에 내용에 적합하게 꾸며준다.

 display: flex;
  justify-content: center;
  align-items: center;

가운데 정렬할 수 있도록 한다.

<><> 를 사용하여 정의된 것을 호출하는 방법뿐만 아니라 className 으로 정의하는 방법도 있다.

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

위 는 flex 라는 형식을 정의한 것으로 자바스크립트에서는 className 으로, HTML은 class 로 호출할 수 있다.

다시 정의하면,

• css 부분

html > body content {
  color: white;
  font-size: 8rem;
  background-color: pink;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

• 자바스크립트 리액트 (jsx)

 return (
    <>
      <content>안녕하세요</content>
      <br />
      <span className="flex">
        <button className="border rounded p-2" onClick={firework}>
          메롱
        </button>
      </span>
    </>
  );
}

다음과 같이 사용이 가능하다.

See the Pen 리액트 꾸미기 (여러가지) by 소망 (@denist2322) on CodePen.