리액트 버튼 여러개 만들기 css 적용하기

#1 버튼 여러개 만들고 스타일링 해보기 

 

버튼 여러개 만들기

<App.js>

import './App.css';

export default function Square() { //Square함수 정의

  return (

    <div className="button-group">

      <button>X</button>

      <button>O</button>

      <button>U</button>

    </div>

  )

}

 

• HTML 구조: Square 컴포넌트는 세 개의 버튼을 포함한 div 요소를 반환합니다.

 

button에 간단한 css적용하기

<App.css>

.button-group {

  display: flex;

  justify-content: space-around;

  padding: 10px;

  background-color: #f0f0f0;

}

 

 

 

.button-group button {

  padding: 10px;

  font-size: 16px;

}

 

 

• CSS 스타일링:
  • button-group 클래스는 display: flex를 사용하여 버튼들을 가로로 나열하고, justify-content: space-around를 사용하여 버튼들 사이에 공간을 균등하게 배치합니다.
  • padding과 background-color를 통해 그룹의 여백과 배경색을 설정합니다.
  • 각 버튼에 대해 padding과 font-size를 설정하여 버튼의 크기와 텍스트 크기를 조정합니다.

이렇게 div를 사용하여 버튼들을 감싸면 레이아웃과 스타일링을 효과적으로 관리할 수 있습니다.

 

 

 

button을 세로로 배치하는 css 적용하기

<App.css>

.button-group {

  display:flex;

  flex-direction:column;

  gap: 10px;

}