WelKo_정렬 및 패딩 개선

 

• 라인 높이 (line-height) 또는 패딩 문제: text-[18px]와 text-[12px]은 서로 다른 폰트 크기를 가지고 있습니다. 이로 인해 기본 라인 높이가 달라질 수 있습니다. line-height가 자동으로 설정되어 있을 경우, 텍스트가 가운데 정렬될 수 있습니다.
• 플렉스 정렬 문제: flex를 사용하여 items-start 클래스를 적용했지만, profile.name과 profile.region의 폰트 크기 차이 때문에 텍스트가 시각적으로 동일한 줄에 정렬되지 않을 수 있습니다.

 

이미지 옆에 닉네임과 주소 높이가 일치하지 않는 문제 발생

          <div className="ml-[12px]">
            <div className="flex items-start">
              <p className="text-[18px] font-semibold">{profile.name}</p>
              {profile.region ? (
                <p className="ml-[8px] text-[12px]">{profile.region}</p>
              ) : (
                <p className="ml-[8px] text-[12px]">Please set the region</p>
              )}
            </div>

위 코드를 아래 코드로 개선 ( leading-none 사용 )

          <div className="ml-[12px]">
            <div className="flex">
              <p className="text-[18px] font-semibold leading-none">{profile.name}</p>
              {profile.region ? (
                <p className="ml-[8px] text-[12px]">{profile.region}</p>
              ) : (
                <p className="ml-[8px] text-[12px]">Please set the region</p>
              )}
            </div>
            <button onClick={goToProfilePage} className="mt-[8px] flex items-center text-[12px]">
              Edit Profile
              <Image src="/icons/tabler-icon-chevron-right.svg" alt="Edit Profile" width={16} height={16} />
            </button>
          </div>

 

leading-none은 Tailwind CSS에서 텍스트의 줄 간격(line-height)을 기본 폰트 크기와 동일하게 설정하는 유틸리티 클래스입니다. 이 클래스는 텍스트가 각 줄 사이에 여백 없이 딱 맞게 배치되도록 만들어줍니다.

line-height와 leading

• line-height: 줄 간격, 즉 텍스트의 각 줄 사이의 공간을 의미합니다. 일반적으로 line-height는 텍스트의 가독성을 높이기 위해 폰트 크기보다 조금 더 큰 값으로 설정됩니다.
• leading: line-height를 설정하는 Tailwind CSS 클래스입니다. leading- 뒤에 다양한 옵션을 붙여 line-height를 제어할 수 있습니다.

Tailwind CSS의 leading 옵션

• leading-none: line-height를 폰트 크기와 동일하게 설정하여, 줄 간의 추가 여백을 제거합니다. 텍스트가 꼭 맞게 배치됩니다.
• 기타 옵션:
  • leading-tight: 폰트 크기보다 약간 작은 line-height.
  • leading-normal: 기본 line-height.
  • leading-relaxed: 폰트 크기보다 약간 큰 line-height.
  • leading-loose: 폰트 크기보다 더 큰 line-height.

주의점

leading-none을 사용하면 줄 간격이 없어지므로 텍스트의 가독성이 떨어질 수 있습니다. 따라서 필요한 경우에만 사용하고, 일반적으로는 leading-normal이나 다른 leading- 옵션을 사용하는 것이 좋습니다.