3. 마이 페이지 UI

🚩 ‘활동 기록’ 글자 아래 점선과의 간격 늘리기

→ mt 조절 해봤지만, 적용이 안 됨.

지금은 border가 h2 자체에 있어서 글자와 선 사이에 여백이 안 생기게 되어 있음

🚀 해결 방안
pb(padding-bottom) 를 조절해 주면 됨!

 

 

---

🚩 프로필 부분이랑 활동기록 부분 사이에 여백을 조금 더 늘리기

 

✅ 방법 1: pl-10 → 더 큰 값으로

활동기록 부분쪽 여백을 늘리고 싶으면:

<div className="w-2/3 pl-10">
↓
<div className="w-2/3 pl-16">

• pl-16 = 4rem = 64px
• (원래는 2.5rem = 40px이었음

 

✅ 방법 2: 프로필 섹션에 오른쪽 마진 추가

<div className="w-1/3 text-center relative left-5">
↓
<div className="w-1/3 text-center relative left-5 mr-6">

• mr-6 = 1.5rem = 24px
• left-5와 함께 쓰면 더 자연스럽게 간격 조절 가능

 

---

 

• max-w-screen-xl: 화면의 최대 너비 설정 (화면이 너무 좁아지면 main 콘텐츠가 더 이상 줄어들지 않도록)
• overflow-x-auto: 화면이 좁을 때 가로 스크롤이 필요할 경우 가로 스크롤 생성
• overflow-hidden: 세로 스크롤을 방지하기 위해 사용