Tailwind CSS에서 py-6은 padding-top과 padding-bottom을 각각 1.5rem 만큼 주는 클래스.
1rem은 일반적으로 16px이므로
1.5rem = 24px
따라서 py-6은
padding-top: 24px
padding-bottom: 24px
총 48px의 수직 패딩을 적용.
참고로 Tailwind의 spacing scale은 다음과 같다.
py-4 = 1rem = 16px
py-5 = 1.25rem = 20px
py-6 = 1.5rem = 24px
py-7 = 1.75rem = 28px
py-8 = 2rem = 32px
RetryYrem이 뭐야Editrem(root em)은 웹에서 사용하는 상대적인 크기 단위입니다.
rem은 루트 요소(보통 html 태그)의 font-size를 기준으로 크기가 결정됩니다. 브라우저의 기본 font-size는 16px이기 때문에:
1rem = 16px (기본값)
예를 들어:
0.5rem = 8px
1rem = 16px
1.5rem = 24px
2rem = 32px
rem의 장점은:
사용자가 브라우저의 기본 폰트 크기를 변경하면 rem으로 지정된 모든 크기가 그에 맞춰 비례적으로 조정됩니다
반응형 디자인을 구현하기 쉽습니다
접근성 측면에서 유리합니다
반면 px은 절대 단위라서 브라우저 설정이나 화면 크기가 바뀌어도 항상 같은 크기를 유지합니다.
em도 비슷한 상대 단위지만, em은 부모 요소의 font-size를 기준으로 하는 반면 rem은 항상 루트 요소를 기준으로 합니다.
루트 요소의 font-size 설정은 보통 여러 곳에서 확인할 수 있습니다.
보내주신 코드에서는 먼저 tailwind.config.js에서 기본 폰트가 Pretendard로 설정되어 있습니다:
jsCopyfontFamily: {
sans: ["Pretendard", "sans-serif"],
}
그리고 global.css에서 루트 요소에 대한 설정을 :root 선택자를 통해 확인할 수 있습니다:
cssCopy@layer base {
:root {
/ 여러 CSS 변수들이 정의되어 있지만,
font-size는 별도로 정의되어 있지 않음 /
}
}
현재 코드에서는 font-size를 명시적으로 재정의하지 않았기 때문에, 브라우저의 기본값인 16px이 사용됩니다. 만약 이 값을 변경하고 싶다면:
global.css의 :root에서 설정:
cssCopy:root {
font-size: 14px; / 이렇게 하면 1rem = 14px /
}
또는 tailwind.config.js에서 fontSize 설정:
jsCopytheme: {
fontSize: {
root: '14px',
// 다른 설정들...
}
}
보통은 브라우저 기본값(16px)을 그대로 사용하는 것이 접근성 측면에서 권장됩니다. 사용자가 브라우저 설정에서 기본 폰트 크기를 변경했을 때 웹사이트도 그에 맞춰 자연스럽게 조정되기 때문입니다.
