JSX에서 인라인방식으로 style 속성 적용 방법

JSX에서 CSS를 Inline으로 주는 방법

기존의 html태그 명령어 라인내부의 스타일 정의

<div style= "backgroundColor : blue; color : red">
  배경을 검은색으로, 문자를 빨간색으로..
</div>

JSX에서는 style={}형식 안쪽에 다시 object형식의 중괄호{}를 사용하여 작성

function StyleTest(){
  return(
    <div style = {{background : "blue", color : "red"}}>
    	 배경을 검은색으로, 문자를 빨간색으로..
    </div>
  )
}

또는 object형식을 변수로 만들어서 관리 할 수 있음.

let styles = {
	background : "blue",
  	color : "red",
    	fontSize : "18px",
  	"border": "2px solid green"
}

function StyleTest(){
  return(
    <div style = {styles}>
    	 배경을 검은색으로, 문자를 빨간색으로..
    </div>
  )
}