sm 기술 블로그

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

CSS & HTML

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

sm_hope 2022. 5. 26. 21:18

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.

'CSS & HTML' 카테고리의 다른 글

tailwind) 모달 프레임워크  (0) 2022.09.26
CSS 포지션 속성 : absolute , fixed, realtive  (0) 2022.09.25
[프론트엔드] 메인페이지  (0) 2022.07.15
기본값, 폰트 꾸미기  (0) 2022.05.31
[CSS] flex 명령어  (0) 2022.05.29
Comments