태그 패딩으로 배우는 CSS 내부 여백

📝 한줄 요약

사이드바의 태그 공백이 크다는 피드백 → CSS의 padding 값을 0.4rem에서 0.3rem으로 줄여서 → 태그가 더 촘촘해지는 변화를 만들었습니다. 작은 숫자 변화가 UI 전체 느낌을 바꿀 수 있다는 것을 배웠습니다.

👥 이런 분께 추천

• CSS를 처음 배우는 비개발자

• UI 레이아웃 조정 작업에서 “뭘 수정해야 할까” 막히는 분

• “여백”이 무엇인지 구체적으로 알고 싶은 분

• 코드 한 줄 변경이 화면에 미치는 영향을 직접 보고 싶은 분

🙋 내 스펙 & 환경

진행 방법

1. 왜 하게 되었나

학습 사이트의 왼쪽 사이드바에 사이트 네비게이션과 프로젝트 태그들이 있습니다.

그 태그들(PRD, 로드맵, 플랜)을 보니 태그 각각이 너무 넓었어요. 사이에 공백이 많아서 눈에 띄게 불필요하게 길어 보였습니다.

사용자의 피드백: “공백이 있어서 태그의 길이가 조금 더 길어졌어. 그걸 줄였으면 하는 거야.”

2. 첫 번째 벽: “그 공백이 뭐지?”

ALT

mvp 앱 한국어 버전의 스크린샷

처음엔 이 “공백”이 정확히 뭔지 몰랐습니다.

• HTML에 여분의 공간이 있나? (아님)

• 폰트 자체가 큰 건가? (아님)

• 텍스트 사이에 숨은 문자가 있나? (아님)

Claude에게 물었습니다:

“사이드바의 태그들이 공백이 많아서 길어 보인다고 하는데, 이게 뭘 의미하는 걸까?”

Claude의 답:

“그건 CSS의 padding일 가능성이 높습니다. 요소 내부의 여백이 크면 그 요소 자체가 커 보이니까요.”

배운 것: CSS에는 여백을 만드는 방법이 여러 개 있다.

3. 두 번째 벽: “그럼 padding이 뭐고 어디를 고쳐야 해?”

코드를 봐야 했습니다.

WikiSidebar.astro 파일의 CSS 부분을 찾았어요.

처음에 본 코드:

.tag {
  font-size: 0.65rem;
  padding: 0.08rem 0.4rem;  ← 여기!
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 500;
}

이 padding: 0.08rem 0.4rem;이 문제였습니다.

padding 읽는 법:

• 첫 번째 값 0.08rem: 위아래 여백 (매우 작음)

• 두 번째 값 0.4rem: 좌우 여백 (꽤 큼)

결론: 태그의 좌우에 0.4rem만큼 빈 공간이 있어서, 태그 너비가 불필요하게 넓었던 것!

4. 해결 과정

0.4rem → 0.3rem으로 줄였습니다.

변경 전:

padding: 0.08rem 0.4rem;  /* 좌우 0.4rem */

변경 후:

padding: 0.08rem 0.3rem;  /* 좌우 0.3rem */

단 한 줄, 숫자 하나만 바꿨습니다: 0.4 → 0.3

5. 검증: 빌드 성공

npm run build

결과: ✓ 40 pages built successfully

• 다른 페이지는 깨지지 않았고

• 태그가 사용된 모든 곳이 제대로 렌더링됨

6. 최종 흐름 (단계별)

🛠 사용한 도구

배운 점

💡 핵심 교훈

1. Padding = 요소 안쪽의 여백

┌─────────────────┐  ← border (테두리)
│  ← margin (바깥쪽 여백)
│  ┌─────────────┐
│  │ ← padding   │
│  │ (안쪽 여백) │
│  │   [텍스트]  │
│  │             │
│  └─────────────┘
│
└─────────────────┘

• Margin: 요소 밖의 다른 요소와의 거리

• Padding: 요소 안의 내용물과 테두리 사이 거리

• Border: 요소의 테두리

• Content: 실제 텍스트나 내용

2. 작은 값 변화가 UI 느낌을 완전히 바꾼다

0.1rem의 차이지만 (0.4 → 0.3), 사용자에게는:

• 태그가 “더 촘촘하고 깔끔하게” 느껴짐

• 불필요한 공백이 없는 느낌

• 전체 사이드바가 더 정돈된 것처럼 보임

3. 레이아웃 조정은 코드의 아주 작은 부분부터 시작한다

“공백이 많다” → “어디를 고칠까?” 물어보고 → 정확한 위치를 찾아 → 한두 글자만 수정 → 완성.

비개발자여도 CSS 수정이 가능한 이유입니다.

솔직한 소감

• 처음엔 “padding이 뭐?”였는데, 이 작업 후로는 “아, 그 숫자가 그 부분의 여백이구나”가 명확해졌어요.

• 한 줄 코드 한 숫자로 화면이 바뀌는 걸 직접 보니 CSS가 덜 두려워졌습니다.

• 다음부턴 “여기 조정 좀”이라는 피드백을 받으면, “어느 부분의 뭘 조정할까?” 먼저 생각하게 될 것 같습니다.

적용할 점

🎯 결과

📋 복붙 가능한 프롬프트

다음에 UI 여백을 조정할 때 이 흐름을 쓰면 됩니다:

"사이드바의 [요소이름]이 [문제점]처럼 보여.
이게 CSS의 padding 때문일까? 
[파일명]에서 어디를 수정해야 할까?"

→ 피드백: "padding: 0.4rem을 0.3rem으로 줄여봐"

→ 수정 후: "npm run build로 검증하고 커밋·푸시"

🔜 다음 계획

• CSS의 다른 여백 조정들 (margin, gap 등)도 이 방식으로 접근해보기

• 전체 CSS box model을 한 번 정리해 둔 개념 페이지 만들기

• 다른 요소들 (버튼, 입력창 등)의 패딩도 살펴보고 조정할 부분 찾기