Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: translate-styling-and-css #223

Merged
merged 4 commits into from
Oct 31, 2020
Merged

docs: translate-styling-and-css #223

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff9df03
docs: translate-styling-and-css
sukjae Apr 19, 2020
ab629ca
Merge branch 'master' into translate-styling-and-css
hg-pyun May 24, 2020
42c292c
Merge branch 'master' into translate-styling-and-css
taehwanno Sep 8, 2020
91bfe51
Apply suggestions from code review
taehwanno Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions content/docs/faq-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
id: faq-styling
title: Styling and CSS
title: 스타일링과 CSS
permalink: docs/faq-styling.html
layout: docs
category: FAQ
---

### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components}
### CSS 클래스를 컴포넌트에 어떻게 추가하나요? {#how-do-i-add-css-classes-to-components}

Pass a string as the `className` prop:
`className` prop에 문자열을 넘깁니다.

```jsx
render() {
return <span className="menu navigation-menu">Menu</span>
}
```

It is common for CSS classes to depend on the component props or state:
컴포넌트의 props나 state에 CSS 클래스가 의존하는 것은 자주 사용되는 방식입니다.

```jsx
render() {
Expand All @@ -28,24 +28,24 @@ render() {
}
```

>Tip
>팁
>
>If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it.
>이러한 방식으로 코드를 자주 작성한다면, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) 패키지를 통해 이 작업을 간소화할 수 있습니다.

### Can I use inline styles? {#can-i-use-inline-styles}
### 인라인 스타일을 사용할 수 있나요? {#can-i-use-inline-styles}

Yes, see the docs on styling [here](/docs/dom-elements.html#style).
네, [여기](/docs/dom-elements.html#style)에서 스타일링에 관한 문서를 참고해 주세요.

### Are inline styles bad? {#are-inline-styles-bad}
### 인라인 스타일은 좋지 않은 방식인가요? {#are-inline-styles-bad}

CSS classes are generally better for performance than inline styles.
보통의 경우 CSS 클래스가 인라인 스타일보다 더 나은 성능을 보입니다.

### What is CSS-in-JS? {#what-is-css-in-js}
### CSS-in-JS가 무엇인가요? {#what-is-css-in-js}

"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files.
"CSS-in-JS"는 외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미합니다.

_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname).
_이러한 기능은 React에 포함된 기능이 아닌, 별도의 라이브러리로 제공되고 있는 것에 주의해주세요._ React는 어떻게 스타일이 정의되는지에 대한 의견이 없습니다. 의구심이 생긴다면, 평소처럼 별도의 `*.css` 파일에 정의한 뒤 [`className`](/docs/dom-elements.html#classname)을 통해 참조하는 것으로 시작해볼 수 있습니다.

### Can I do animations in React? {#can-i-do-animations-in-react}
### React에서 애니메이션을 할 수 있나요? {#can-i-do-animations-in-react}

React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example.
React는 애니메이션을 표현할 수 있습니다. 이에 대한 예시로 [React Transition Group](https://reactcommunity.org/react-transition-group/) 또는 [React Motion](https://github.com/chenglou/react-motion) 또는 [React Spring](https://github.com/react-spring/react-spring)를 확인해 보세요.