리스트

리스트 (List)

리스트 스타일을 커스터마이징하는 JSX 스타일 prop을 알려드려요. 리스트 마커의 유형, 위치, 이미지를 조절할 수 있어요.

출처: 문서

본문

List Style Type

listStyleType 속성을 사용해서 리스트 마커의 유형을 설정하세요.

<Box as="ul" listStyleType="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

List Style Position

listStylePosition 속성을 사용해서 리스트 마커의 위치를 설정하세요.

<Box as="ul" listStylePosition="inside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

List Style Image

listStyleImage 속성을 사용해서 리스트 마커의 이미지를 설정하세요.

<Box as="ul" listStyleImage="url(...)">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</Box>

Markers

_marker 속성을 사용해서 리스트 아이템의 마커를 설정하세요.

<ul>
  <Box as="li" _marker={{ color: "red" }}>
    Item 1
  </Box>
  <Box as="li" _marker={{ color: "blue" }}>
    Item 2
  </Box>
  <Box as="li" _marker={{ color: "green" }}>
    Item 3
  </Box>
</ul>

더 알아보기 (Learn more)

• 조건부 스타일
• Style Props - Layout