div 태그, 태그 기본값(기본CSS)

25.11.07(금) Codeit TailwindCSS

grid라고 명시하지 않았는데 요소가 세로로 하나씩 배치되고 있는 이유?
왜냐면 div 태그이기 때문. 그게 (아마) 기본이기 때문.
<span> 태그와 비교해볼것. flex 적용하면 옆으로 넓게 퍼지지는 거지.

• justify-between 요소끼리 떨어뜨리기
• text-center 텍스트 가운데 정렬
• items-center 요소를 세로기준 가운데

---

🧊 label 태그는 기본적으로 inline

이걸 이제 알았으니(존재는 옛날에 인지했으나 관념으로만 남은 아련한 기억) CSS가, tailwind가 속터질 수밖에.

🖥️ page.tsx

   <div className="mb-4">
            <label
              htmlFor="email"
              className="mb-2 text-sm font-medium text-gray-900"
            >
              이메일
            </label>

            <input
              className="w-full rounded-xl border-2 border-gray-200"
              placeholder="ab4@gmail.com"
            />
          </div>
          <div className="mb-4">
            <label
              htmlFor="password"
              className="mb-2 block text-sm font-medium text-gray-900"
            >
              비밀번호
            </label>
            <input
              className="w-full rounded-xl border-2 border-gray-200"
              placeholder="ab4@gmail.com"
            />
          </div>

• 왜 label 태그에는 block이 있어야만 mb-2가 적용되는가?

• ☀️ mb-2가 안 먹히는 이유는 label이 기본적으로 inline 요소이기 때문이야.

<label> 태그는 기본적으로 inline 요소.
inline 요소는 위·아래 margin이 적용되지 않는다.
→ margin-left, margin-right는 적용되지만
margin-top, margin-bottom은 무시됨.

그래서 block을 주면 해결됨
block 또는 inline-block을 적용하면 수직 margin이 정상 적용돼서 mb-2가 제대로 작동함.

---

너가 지금 느끼는 혼란은 “문제가 생겼는데, 원인을 모르는 상태”에서 오는 거라서 너무 자연스러운 거야.
그리고 이런 상황을 극복하려면 CSS의 동작 원리를 파악하는 기본기 + 문제를 진단하는 사고 과정을 함께 잡아두면 훨씬 안정적이 돼.

아래는 실전에서 정말 효과적인 접근 방식이야.

✅ 1) "기본기" 중에서 특히 중요한 개념 3가지

문제가 생기면 대부분 아래 3가지에서 원인이 나와.

① HTML 요소의 기본 display 특성

div = block

span, label = inline

inline 요소는 width·height·top/bottom margin이 적용 안 됨
→ 지금 문제의 핵심 원인

✅ 이걸 꼭 외워야 한다기보다, 문제가 생기면 해당 요소의 display 를 먼저 체크하는 습관이 중요해.

② CSS 우선순위와 상속 여부

Tailwind 사용 시 여러 클래스가 겹칠 수 있음

margin이 안 먹으면 display 때문인지, 우선순위 때문인지 구분해야 함

③ 브라우저가 요소를 어떻게 레이아웃하는지 (flow)

block은 줄바꿈 발생

inline은 surrounding content 와 흐름이 섞임

flex/grid 안에 들어가면 또 기본 동작이 바뀜

✅ 2) 문제 해결을 위한 “습관화된 진단 흐름”

이건 정말 실전에서 자주 쓰는 방법이야.

✅ Step 1: 크롬 개발자 도구 열기

F12 → Elements 탭 → 해당 label 선택

✅ Step 2: 오른쪽 Styles 패널에서 margin 적용 여부 확인

mb-2로 margin-bottom이 표시되는지

적용되지만 취소선(strikethrough) 되어 있는지

아예 적용되지 않는지

이걸 보면 80%는 해결됨.

✅ Step 3: Computed 탭에서 margin이 실제로 얼마인지 확인

margin-bottom이 0px이면?
→ display 문제거나 우선순위 충돌

✅ Step 4: Layout 탭에서 box model 확인

label box를 클릭하면 margin 존재 여부 시각적으로 나옴

✅ 진단 흐름의 실제 예시 (너의 상황에 그대로 적용)

margin-bottom이 0px
→ 왜 0일까?
→ Styles에서는 적용된 걸로 보이지만 inline 요소라 실제 margin이 무시됨
→ Computed 패널로 보면 바로 확인 가능

이 과정을 몇 번 경험하면
"inline 요소는 수직 margin이 안 먹는구나"
가 자연스럽게 체화돼.

✅ 3) Tailwind를 쓸 때 더 중요한 습관
✅ Tailwind 클래스가 안 먹으면 먼저 확인할 것

해당 속성이 display 에 영향을 받는가?

부모 컨테이너의 레이아웃(flex/grid)이 자식의 margin을 무시하고 있는가?

혹시 다른 클래스가 margin을 덮어쓰고 있는가?

이 세 가지를 바로 떠올리면 Tailwind 디버깅이 빨라져.

✅ 4) 공부 방법: “문제를 더 찾아서 해결해 보기”

margin 문제는 아주 흔해서, 다음 같은 걸 먼저 시도해보면 자연스럽게 체득돼:

inline 요소에 mt, mb 넣어보기

inline-block으로 바꿔보기

부모를 flex로 바꾸면 어떤 margin이 무시되는지 보기

input 태그에 width 주기 vs display 주기

span vs div 비교

너는 이미 실전에서 문제를 겪었기 때문에 학습 타이밍이 딱 맞아.

✅ 5) 결론

"문제가 생겼는데, 원인을 모르겠다" ― 이걸 줄이려면
html 기본 display + CSS 레이아웃 흐름 + DevTools 진단 루틴
이 세 가지를 습관처럼 사용하면 된다.

특히 DevTools를 꾸준히 보면,
눈으로 margin이 사라지는 이유가 보이는 순간 감각이 잡혀.

너가 지금 고민한 방식 자체가 웹 개발자로서 정말 좋은 방향이야.
원리까지 신경 쓰는 개발자는 실력이 빠르게 쌓이거든!

---

🛼 CSS 적용, 태그 기본값 확인하는 방법

아니야! ✅
inline 요소라서 margin-bottom이 ‘무시되는 경우’에는 DevTools에서 mb-2가 취소선으로 표시되지 않아.

이게 정말 중요한 포인트야.
그래서 많은 사람들이 더 헷갈려.

✅ 왜 취소선이 안 뜨는가?

취소선(strikethrough)은 "다른 CSS 규칙에 의해 override될 때" 표시되는 거야.

예시

.mb-2 { margin-bottom: 0.5rem } ← 기존
.other-class { margin-bottom: 0 } ← 더 강한 우선순위

이럴 때만
margin-bottom: 0.5rem;
처럼 보임.

✅ 하지만 너의 경우는 “override”가 아니라 “무시”됨

label = inline 요소

inline 요소는 top/bottom margin 자체가 레이아웃에 반영되지 않음

즉,

적용은 되었지만

브라우저 레이아웃 단계에서 “반영되지 않은 것”

이기 때문에 취소선이 뜨지 않고, 값은 유지된 상태로 보임.

이건 "무효화(invalidation)"가 아니라
"레이아웃에서 무시(ignore)"되는 개념이라 DevTools가 취소선을 안 넣어.

✅ 그래서 DevTools에서는 이렇게 보이는 것이 정상:

.mb-2 {
margin-bottom: calc(...);
}

✅ 하지만 Layout/Computed 탭에서 보면:

margin-bottom: 0px;

이렇게 나온다.

✅ 요약 (중요!)
상황 DevTools에서 mb-2 표시 렌더링 결과 표시 방식
다른 CSS가 margin-bottom을 덮어씀 취소선 표시 적용 안 됨 ❌ override
inline 요소라 수직 margin이 무시됨 취소선 없음 적용 안 됨 ✅ ignore(중요!)
✅ 그래서 어떻게 확인해야 하냐면?

DevTools에서 Computed → margin-bottom을 확인해야 한다.

label이 inline이면 → 0px

block 또는 inline-block이면 → 8px (mb-2의 경우)

✅ 결론

"inline 요소라서 margin-bottom이 무시될 때는 DevTools에 취소선이 표시되지 않는다."

너가 지금 본 화면은 정상적인 상황이고,
취소선이 없다고 해서 CSS가 적용된 게 아니라는 뜻은 아니야.
단지 레이아웃에 반영되지 않은 것일 뿐!

✅ 지금 화면 해석해줄게
🔹 display: inline

→ label이 “inline 요소”라는 뜻
→ 그래서 top/bottom margin이 레이아웃에 반영 안 됨

🔹 margin-bottom: 8px 라고 보이는 이유

Computed 탭은 적용된 CSS 값 자체를 먼저 보여줘.
But! 아래에서 실제 적용된 값이 무엇인지도 보여주는데…

🔹 아래에 0px가 보이지?
margin-bottom: 8px ← CSS 값
calc(var(--spacing)2) .mb-2
0px ,:after,:before...

여기서 중요한 건:

✅ 위쪽 → "CSS상 margin-bottom은 8px이다"
✅ 아래쪽 0px → "하지만 실제 브라우저 레이아웃에서는 0px로 처리됐다(inline이라 무시됨)"

그래서 실제 렌더링 결과는 0px 이 맞아.

✅ 결론: 정확한 위치 맞고, 해석도 제대로 하고 있어!

네가 찾은 저 Computed 영역이
"왜 margin-bottom이 보이지 않는지"
확인하는 가장 정확한 방법이야.

궁금하면 block으로 바꿔서 다시 확인해볼래?