react.dev/tips/02-inline-styles.ko-KR.md

---
id: inline-styles-ko-KR
title: 인라인 스타일
layout: tips
permalink: tips/inline-styles-ko-KR.html
next: if-else-in-JSX-ko-KR.html
prev: introduction-ko-KR.html
---

React에서는 인라인 스타일을 문자열로 지정하지 않습니다. 대신 스타일 이름을 camelCased 형식으로 바꾼 키와 스타일의 값(주로 문자열입니다 - [자세히 알아보기](/react/tips/style-props-value-px-ko-KR.html))을 가진 객체로 지정됩니다.

```js
var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // 'W'가 대문자임에 주의하세요
  msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);
```

스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다.
Translate tips 01..04 (based on 157d7770c99be26a9e0557d00978f15f6d9db794) 10 years ago			`---`
			`id: inline-styles-ko-KR`
			`title: 인라인 스타일`
			`layout: tips`
Upgrade to Jekyll 3 Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is: - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/` - `post` and `page` types were renamed to `posts` and `pages` respectively - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments. - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page` Tested the following pages and confirmed that they all work: - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html - Downloads: http://127.0.0.1:4000/react/downloads.html - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html - A few pages under the "docs" subdirectory, to confirm they're working properly: - http://127.0.0.1:4000/react/docs/addons.html - http://127.0.0.1:4000/react/docs/why-react.html - http://127.0.0.1:4000/react/docs/create-fragment.html - A few tips: - http://127.0.0.1:4000/react/tips/false-in-jsx.html - http://127.0.0.1:4000/react/tips/style-props-value-px.html - Non-English versions of the page: - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html 9 years ago			`permalink: tips/inline-styles-ko-KR.html`
Translate tips 01..04 (based on 157d7770c99be26a9e0557d00978f15f6d9db794) 10 years ago			`next: if-else-in-JSX-ko-KR.html`
			`prev: introduction-ko-KR.html`
			`---`

			`React에서는 인라인 스타일을 문자열로 지정하지 않습니다. 대신 스타일 이름을 camelCased 형식으로 바꾼 키와 스타일의 값(주로 문자열입니다 - [자세히 알아보기](/react/tips/style-props-value-px-ko-KR.html))을 가진 객체로 지정됩니다.`

			```js
			`var divStyle = {`
			`color: 'white',`
			`backgroundImage: 'url(' + imgUrl + ')',`
			`WebkitTransition: 'all', // 'W'가 대문자임에 주의하세요`
			`msTransition: 'all' // 'ms'는 유일한 소문자 벤더 프리픽스(vendor prefix)입니다`
			`};`

React -> ReactDOM for render() and findDOMNode() 9 years ago			`ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode);`
Translate tips 01..04 (based on 157d7770c99be26a9e0557d00978f15f6d9db794) 10 years ago			```

			스타일 키는 JS에서 DOM 노드의 프로퍼티에 접근하는 것과 일관성있도록 camelCased 형식입니다. (예를 들어 `node.style.backgroundImage`) [`ms`를 제외한](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) 벤더 프리픽스는 대문자로 시작해야 합니다. 따라서 `WebkitTransition`은 대문자 "W"를 사용합니다.