[Tailwind CSS] 6. padding, margin, spacing

tailwind CSS 로고

 

 

요약  

  1. 학습내용 : p (padding), m (margin)

  2. 학습내용 : spacing

 

---

상세
  1. 학습내용 : p (padding), m (margin)

 

◼︎ Container 폭을 지정해주고, mx-auto를 통해서 중앙정렬 하기

  return (
    <main className='container mx-auto'>
      <h2 className='text-2xl'>폰트 크기 조절</h2>
    </main>
  );

개발자도구 > main container > width: 100% 확인

 

+ 최대 가로 너비 지정 (max-w-OOO)

  return (
    <main className='container mx-auto max-width-3xl'>
      <h2 className='text-2xl'>폰트 크기 조절</h2>
    </main>
  );
  
  // max-width-3xl : 768px (48rem)
  // 가로 너비는 768px을 넘지 않는다! 지정

---

 

  2. 학습내용 : spacing

◼︎ space-y-O : y (세로) 에 대한 space 주기

  return (
    <>
      <div className='space-y-3'>
        <div className='w-32 h-32 bg-blue-600'></div>
        <div className='w-32 h-32 bg-blue-700'></div>
        <div className='w-32 h-32 bg-blue-800'></div>
      </div>
    </>
  );

 

◼︎ space-x-O : x (가로) 에 대한 space 주기

- flex-utility : flex-container로 만들면 flex-direction은 row가 default이다.

  return (
    <>
      <div className='flex space-x-3 mt-4'>
        <div className='w-32 h-32 bg-blue-600'></div>
        <div className='w-32 h-32 bg-blue-700'></div>
        <div className='w-32 h-32 bg-blue-800'></div>
      </div>
    </>
  );