wa_ter_ve

1. 로그인 페이지 UI 본문

공부/소프캡디

1. 로그인 페이지 UI

수win 2025. 4. 14. 00:42

📌Tailwind CSS 기본 문법 정리

 

기본 레이아웃 클래스

  • flex : Flexbox 컨테이너화
  • items-center : 세로축 중앙 정렬
  • justify-center : 가로축 중앙 정렬
  • min-h-screen : 높이를 화면 전체(100vh)로 설정
  • w-full : 너비 100%
  • max-w-md : 최대 너비 제한 (md = 28rem = 448px)
  • mx-auto : 좌우 마진을 auto로 → 가운데 정렬할 때 자주 사용
  • p-10 : padding 2.5rem (40px)

🧱Margin (바깥 여백)

  • m : 네 방향 모두 마진
  • mt, mb, ml, mr : 위, 아래, 왼쪽, 오른쪽 마진
  • mx : 좌우 마진
  • my : 상하 마진
mt-0 margin-top: 0px
mt-2 margin-top: 0.5rem (8px)
mb-4 margin-bottom: 1rem (16px)
mx-6 좌우 마진 1.5rem (24px)

⛳ 1rem = 16px 기준

 

✅ 컴포넌트 간에 간격을 줄 때 사용!

🎁Padding (안쪽 여백)

  • p : 네 방향 모두 padding
  • pt, pb, pl, pr : 위, 아래, 왼쪽, 오른쪽
  • px : 좌우 padding
  • py : 상하 padding
p-2 padding: 0.5rem (8px)
p-4 padding: 1rem (16px)
p-6 padding: 1.5rem (24px)
p-8 padding: 2rem (32px)

⛳ 1rem = 16px 기준

 

✅ padding은 내부 요소가 너무 붙지 않게 공간을 만들어줘서, 버튼 및 카드 디자인 시 사용!

배경 & 텍스트 색상

  • bg-gray-100 ~ bg-gray-900 : 밝기 단계별 회색 배경
  • bg-yellow-400, bg-black 등 : 다양한 배경 색상
  • text-white, text-gray-300 : 텍스트 색상 지정
  • text-sm, text-lg, text-xl : 텍스트 크기 설정
  • hover:text-white : 마우스 오버 시 색상 변경

 

테두리, 그림자, 둥글기

  • rounded / rounded-lg / rounded-full : 둥근 정도 차이
  • border : 기본 테두리
  • shadow-sm / shadow-md / shadow-lg : 그림자 강도 설정

 

폼 요소 관련 클래스

  • bg-gray-200 : 입력창 배경
  • text-gray-900 : 텍스트 색상
  • focus:outline-none : 포커스 시 기본 테두리 제거
  • focus:ring-2 : 포커스 시 외곽선 강조
  • focus:ring-gray-500 : 포커스 색상 조정
  • disabled:opacity-50 : 비활성화 시 투명도

 

기타 유용한 클래스

  • space-y-4 : 자식 요소 간 수직 간격 1rem
  • text-center : 텍스트 중앙 정렬
  • hover:bg-gray-600 : 마우스 오버 시 배경색 변경

📌 Tailwind CSS 고급 문법 정리

 

📐 Grid 레이아웃

  • grid : Grid 컨테이너 생성
  • grid-cols-2 ~ grid-cols-12 : 열 개수 지정
  • gap-4 : 열과 행 사이 간격 설정
  • col-span-2 : 2칸 차지

 

📱 반응형 (Responsive)

Tailwind는 화면 사이즈에 따라 스타일을 다르게 적용할 수 있어요!

  • sm: : ≥ 640px
  • md: : ≥ 768px
  • lg: : ≥ 1024px
  • xl: : ≥ 1280px
  • 2xl: : ≥ 1536px

 

🌀 애니메이션 & 트랜지션

  • transition : 부드러운 변화 효과 시작
  • duration-300 : 변화 시간 300ms
  • ease-in, ease-out, ease-in-out : 타이밍 함수
  • hover:scale-105 : hover 시 확대 효과

 

🧊 Positioning (위치)

  • relative, absolute, fixed, sticky
  • top-0, left-0, bottom-0, right-0 : 위치 조정

 

📚 Z-index (레이어 순서)

  • z-0, z-10, z-20, z-50, z-auto
  • 숫자가 높을수록 위에 위치함

 

기타 유용한 고급 클래스

overflow-hidden 넘치는 콘텐츠 숨김
truncate 텍스트 한 줄 말줄임 (...)
shadow-xl 더 강한 그림자 효과
backdrop-blur-md 배경 흐리게 (모달에 사용 많이 함)
ring, ring-offset 포커스 외곽선 꾸미기
aspect-video 고정된 비율 유지 (ex. 영상 비율)

 

🔗 참고 자료

'공부 > 소프캡디' 카테고리의 다른 글

5. 맛집 추천 페이지  (0) 2025.04.28
4. 사이드바 모달  (0) 2025.04.28
3. 마이 페이지 UI  (0) 2025.04.14
2. 메인 페이지 UI  (0) 2025.04.14
0. 프로젝트 초기 세팅  (0) 2025.04.14
'공부/소프캡디' Related Articles more