📌소개

강의링크 바로가기

📌배운내용 정리

'Grid' by chakra - example

[Link to Grid by chakra]
반드시 공식문서를 방문해보자. 매우 다양한 화면구성 방법을 쉽게 배울 수 있다. 💖😋

// 🎁 예제1
<Grid columnGap={4} rowGap={8} templateColumns={"repeat(5, 1fr)"}>
	<Box ... />
  	<Box ... />
  	<Box ... />
  	<Box ... />
  	<Box ... />
<Grid />
// 5개의 아이템을 모두 동일한 비율로 안분
  
// 🎁 예제2
<Grid columnGap={4} rowGap={8} templateColumns={"200px 200px 200px 200px 200px"}>
	<Box ... />
  	<Box ... />
  	<Box ... />
  	<Box ... />
  	<Box ... />
<Grid />
// 5개의 아이템을 각 200px(크기고정값) 씩 배치한 구성
      
// 🎁 예제3
<Grid columnGap={4} rowGap={8} templateColumns={"2fr 1fr 3fr"}>
	(생략)
<Grid />
// 3개의 아이템을 2 : 1 : 3 의 비율로 안분한 화면배치 구성 

example 2

// 위 캡처사진의 코드 
<Grid
  h='200px'
  templateRows='repeat(2, 1fr)'
  templateColumns='repeat(5, 1fr)'
  gap={4}
>
  <GridItem rowSpan={2} colSpan={1} bg='tomato' />
  <GridItem colSpan={2} bg='papayawhip' />
  <GridItem colSpan={2} bg='papayawhip' />
  <GridItem colSpan={4} bg='tomato' />
</Grid>

Stack vs HStack vs VStack

// Stack 은 3가지 종류가 있다. 
import { Stack, HStack, VStack } from "@chakra-ui/react";

<Stack>
   ...
</Stack>

<HStack>
  ... // 수평정렬
</HStack>

<VStack>
  ... // 수직정렬
</VStack>

// HStack(horizontal stack) - 수평정렬
// VStack(vertical stack) - 수직정렬

// HStack, VStack 은 말 그대로 component 들을 수직정렬, 수평정렬 하는데 사용된다. 
// Stack 은 direction='' 속성을 이용하여 정렬 방향을 자유롭게 결정할 수 있다. 
// 예시 ) direction='row' direction='column'
// 공식문서 참조 : https://chakra-ui.com/docs/components/stack/usage#responsive-direction 

// 😋 추후에 반응형 디자인 설계시 component 의 정렬 방향이 화면사이즈에 따라서 달라질 수 있는데 이때 HStack 또는 VStack 를 사용한 경우 에는 속성으로 component 의 정렬 방향을 바꿀 수 없다. 이때는 단순한 Stack을 사용하여야 한다. 

Stack + direction='' 속성

[Link to 'Stack Usage' from chakra]

// 위 캡처사진의 코드 
// Stack 은 direction='' 속성 을 이용할 수 있다. 
function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow='md' borderWidth='1px' {...rest}>
      <Heading fontSize='xl'>{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  )
}

function StackEx() {
  return (
    <Stack spacing={8} direction='row'> // 🎁🤩❤😍 stack direction 을 row 로 지정함. (수평정렬)
      <Feature
        title='Plan Money'
        desc='The future can be even brighter but a goal without a plan is just a wish'
      />
          
      <Feature
        title='Save Money'
        desc='You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process'
      />
    </Stack>
  )
}

render(<StackEx />)

📌Grab a Keyword

Grid templateColumns={}

Stack vs HStack vs VStack

📌Grab a Key Concept