React.js - JSX에서 스타일을 지정하는 방법 / inline Style 사용법

---

JSX에서 style 속성에 값을 주는 방법

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. JSX에서는 스타일 시트 즉 CSS를 Inline 형식으로 입력하는 방법을 알아보도록 하겠습니다. 흔히 HTML과 CSS를 배울 때 태그에 style이란 속성 값을 선언하고 안에 디자인할 내용을 채워 넣습니다. 

 

● 2. 예를 들면 이렇습니다. 많이 보던 방식입니다.

1번 라인 : 문자열을 빨간색으로 바꾸는 스타일을, 배경은 검은색을 적용합니다.

<h2 style="color: red; backgroundColor:black">
    Inline stylesheet
</h2>

 

● 3. 하지만 JSX에서는 인라인 방식의 CSS를 Object 형식으로 만들어서 직접 태그에 넣는 방식의 인라인 스타일 방식이 사용 가능합니다. 이렇게 하면 가독성도 좋고 개발하기도 매우 편리합니다. 그 방법을 알아보도록 하겠습니다.

 

1번 라인 : style이라는 변수에 Object 형식으로 속성을 추가합니다. 

10번 라인 : 지정한 스타일을 style 속성에 중괄호를 사용하여 입력합니다. 

let style = {
    display:"inline-block",
    width:"400px",
    height:"50px",
    background:"orange"
}

const element = (
  <div>
    <h1 style={style}> style 지정하기 </h1>    
  </div>
);

ReactDOM.render(
  element,document.getElementById('root')
);

 

● 4. 그럼 해당 태그에 지정된 스타일대로 화면에 노출이 됩니다. 스타일 줄 때는 이런 식으로 인라인 형식으로 주게 되면 편리하게 스타일을 사용할 수 있습니다. 

 

● 5. 코드펜에서 소스를 확인 해보세요.

https://codepen.io/gocoder-net/pen/QWKRjdj

See the Pen JSX에서 스타일 주기 by GoCoder (@gocoder-net) on CodePen.

 

 

 

 

 

 

---

마무리

---

 

스타일 주기도 쉬운 JSX