Skip to content

Commit fdba114

Browse files
sukjaehg-pyuntaehwanno
authored
docs: translate-styling-and-css (#223)
* docs: translate-styling-and-css * Apply suggestions from code review Co-authored-by: Haegul Pyun <[email protected]> Co-authored-by: Haegul Pyun <[email protected]> Co-authored-by: Taehwan Noh <[email protected]>
1 parent ce6adab commit fdba114

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

content/docs/faq-styling.md

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
---
22
id: faq-styling
3-
title: Styling and CSS
3+
title: 스타일링과 CSS
44
permalink: docs/faq-styling.html
55
layout: docs
66
category: FAQ
77
---
88

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

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

1313
```jsx
1414
render() {
1515
return <span className="menu navigation-menu">Menu</span>
1616
}
1717
```
1818

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

2121
```jsx
2222
render() {
@@ -28,24 +28,24 @@ render() {
2828
}
2929
```
3030

31-
>Tip
31+
>
3232
>
33-
>If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it.
33+
>이러한 방식으로 코드를 자주 작성한다면, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) 패키지를 통해 이 작업을 간소화할 수 있습니다.
3434
35-
### Can I use inline styles? {#can-i-use-inline-styles}
35+
### 인라인 스타일을 사용할 수 있나요? {#can-i-use-inline-styles}
3636

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

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

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

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

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

47-
_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).
47+
_이러한 기능은 React에 포함된 기능이 아닌, 별도의 라이브러리로 제공되고 있는 것에 주의해주세요._ React는 어떻게 스타일이 정의되는지에 대한 의견이 없습니다. 의구심이 생긴다면, 평소처럼 별도의 `*.css` 파일에 정의한 뒤 [`className`](/docs/dom-elements.html#classname)을 통해 참조하는 것으로 시작해볼 수 있습니다.
4848

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

51-
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.
51+
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)를 확인해 보세요.

0 commit comments

Comments
 (0)