Solution URL: Github Live Site URL: Vercel

첫 프로젝트로 QR 카드 페이지를 만들었다. 바닥부터 Tailwind CSS를 써보는게 처음이라 카드 가운데 정렬도 애를 먹었다.

코드는 정말 간단하다.

import qr from './assets/image-qr-code.png'

export default function App() {
  return (
    <div className='bg-[#D5E1EF] min-h-screen flex items-center justify-center'>
      <div className='bg-white w-[320px] rounded-[20px] p-4 pb-10 shadow-xl text-center'>
        <img src={qr} alt='qr' className='rounded-[20px] w-full'></img>
        <div className='pl-4 pr-4 pt-6'>
          <h1 className='mb-4 text-[20px] text-[#1F314F] font-bold leading-tight'>
            Improve your front-end skills by building projects
          </h1>
          <p className='text-[14px] text-[#68778D]'>
            Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
          </p>
        </div>
      </div>
    </div>
  )
}

What I Learned

Layout

상하좌우 가운데 정렬

상하좌우 가운데 정렬은 flex 시스템을 사용한다. 가장 바깥의 div 태그 className에 min-h-screen, flex, items-center, justify-center를 순서 상관없이 적어주면 카드가 정중앙에 배치된다. 여기서 min-h-screen는 최소 height를 스크린 크기 만큼 주겠다라는 뜻이고, 나머지는 flex 레이아웃 관련 속성이다.

텍스트 정렬

텍스트를 가운데 정렬하고 싶으면 text-center를 사용한다. 행간 사이를 조금 좁히고 싶으면 leading-tight를 사용한다.

Custom

Tailwind 대괄호 문법

Tailwind에서 제공하는 수치가 아니라 커스텀으로 원하는 값을 넣고 싶을 때는 대괄호를 사용한다. 예를 들어 bg-white는 bg-[#FFFFFF]와 같다. 색상 코드말고도 w-[320px] 처럼 크기도 적용된다.

Unit

Tailwind의 1 단위는 4px

패딩 등 값을 줄 때 p-1, p-4 등 Tailwind에서 제공하는 수치가 있다. 대괄호 없이 숫자만 나와있을 때는 단위 1이 4px만큼의 크기를 가진다. 즉, p-1는 p-[4px]과 같고, p-4는 p-[16px]과 같다.