코드

코드 (Code)

컴퓨터 코드의 짧은 조각임을 나타내기 위해 텍스트를 표시해 주는 컴포넌트예요. code 요소 기반으로 만들어졌어요.

출처: 문서

본문

컴퓨터 코드의 짧은 조각임을 나타내기 위해 텍스트를 표시해요.

<Code>console.log()</Code>

API Reference

이 컴포넌트는 code 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<enum> No default value
variant "solid" | "soft" | "outline" | "ghost" "soft"
weight Responsive<"light" | "regular" | "medium" | "bold"> No default value
color enum No default value
highContrast boolean No default value
truncate boolean No default value
wrap Responsive<"wrap" | "nowrap" | "pretty" | "balance"> No default value

예제 (Examples)

Size

size prop으로 텍스트 크기를 제어해요. 이 prop은 올바른 줄 높이와 보정된 자간도 함께 제공해요. 텍스트 크기가 커질수록 상대적 줄 높이와 자간은 줄어들어요.

<Flex direction="column" gap="3" align="start">
  <Code size="1">console.log()</Code>

  <Code size="2">console.log()</Code>

  <Code size="3">console.log()</Code>

  <Code size="4">console.log()</Code>

  <Code size="5">console.log()</Code>

  <Code size="6">console.log()</Code>

  <Code size="7">console.log()</Code>

  <Code size="8">console.log()</Code>

  <Code size="9">console.log()</Code>
</Flex>

Variant

variant prop으로 시각적 스타일을 제어해요.

<Flex direction="column" align="start" gap="2">
  <Code variant="solid">console.log()</Code>

  <Code variant="soft">console.log()</Code>

  <Code variant="outline">console.log()</Code>

  <Code variant="ghost">console.log()</Code>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex direction="column" align="start" gap="2">
  <Code color="indigo">console.log()</Code>

  <Code color="crimson">console.log()</Code>

  <Code color="cyan">console.log()</Code>

  <Code color="orange">console.log()</Code>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Flex gap="3">
  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid">
      console.log()
    </Code>

    <Code color="gray" variant="soft">
      console.log()
    </Code>

    <Code color="gray" variant="outline">
      console.log()
    </Code>

    <Code color="gray" variant="ghost">
      console.log()
    </Code>
  </Flex>

  <Flex direction="column" align="start" gap="2">
    <Code color="gray" variant="solid" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="soft" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="outline" highContrast>
      console.log()
    </Code>

    <Code color="gray" variant="ghost" highContrast>
      console.log()
    </Code>
  </Flex>
</Flex>

Weight

weight prop으로 텍스트 굵기를 설정해요.

<Flex direction="column" gap="2" align="start">
  <Code weight="regular">console.log()</Code>

  <Code weight="bold">console.log()</Code>
</Flex>

Truncate

truncate prop으로 텍스트가 컨테이너를 넘칠 때 생략 부호(...)로 잘라내요.

<Flex maxWidth="200px">
  <Code truncate>linear-gradient(red, orange, yellow, green, blue);</Code>
</Flex>

더 알아보기 (Learn more)