diff --git a/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx b/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
index a939612f4..65f820f1f 100644
--- a/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
+++ b/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
@@ -5,30 +5,37 @@ source: app/building-your-application/styling/css-in-js
---
예시
-
-- [Styled JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx)
-- [Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
-- [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
-- [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
-- [Tailwind CSS + Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)
-- [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
-- [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs)
-- [Aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
-- [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
-- [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
+ 예시
- [Styled
+ JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx) -
+ [Styled
+ Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
+ -
+ [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
+ -
+ [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
+ - [Tailwind CSS +
+ Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)
+ -
+ [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
+ - [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs) -
+ [Aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
+ -
+ [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
+ -
+ [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
hi there
} - + export default HiThere ``` -Next.js는 격리된 scope의 CSS를 지원하기 위해 [styled-jsx](https://github.com/vercel/styled-jsx)를 번들로 제공합니다. 목표는 [JS만을 지원하는](https://github.com/w3c/webcomponents/issues/71) Web 컴포넌트와 비슷한 "shadow CSS"를 지원하는 것입니다. + +Next.js는 격리된 scope의 CSS를 지원하기 위해 [styled-jsx](https://github.com/vercel/styled-jsx)를 번들로 제공합니다. 목표는 [JS만을 지원하는](https://github.com/w3c/webcomponents/issues/71) Web 컴포넌트와 비슷한 "shadow CSS"를 지원하는 것입니다. 다른 인기 있는 CSS-in-JS에 대해서는 위의 예시를 참고하세요 (예시: Styled Components). @@ -62,12 +69,12 @@ function HelloWorld() { ) } - + export default HelloWorld ``` 더 많은 예제는 [styled-jsx 문서](https://github.com/vercel/styled-jsx)를 참고하세요. -JavaScript 비활성화 -------------- -JavaScript를 비활성화하더라도 CSS는 프로덕션 빌드(`next start`)에 가져와집니다. 그러나 개발 중에는 빠른 새로고침으로 최고의 개발자 경험을 제공하기 위해 JavaScript를 활성화해야 합니다. \ No newline at end of file +## JavaScript 비활성화 + +JavaScript를 비활성화하더라도 CSS는 프로덕션 빌드(`next start`)에 가져와집니다. 그러나 개발 중에는 빠른 새로고침으로 최고의 개발자 경험을 제공하기 위해 JavaScript를 활성화해야 합니다.