프론트엔드 스터디 3주차: 프론트엔드의 첫 번째 벽, 박스 모델과 스타일링

html {
  font-size: 16px;
} /* 루트 기준 설정 */

.parent {
  font-size: 20px;
}
.child-px {
  font-size: 14px;
} /* 항상 14px */
.child-em {
  font-size: 1.5em;
} /* 부모 20px × 1.5 = 30px */
.child-rem {
  font-size: 1.5rem;
} /* 루트 16px × 1.5 = 24px */

.parent {
  color: #333; /* 자식에게 상속됨 */
  font-family: "Pretendard", sans-serif; /* 자식에게 상속됨 */
  border: 1px solid black; /* 자식에게 상속 안 됨 */
  padding: 20px; /* 자식에게 상속 안 됨 */
}

.child {
  border: inherit; /* 부모의 border를 강제로 가져옴 */
  color: initial; /* color의 CSS 초기값(보통 검정)으로 되돌림 */
  margin: unset; /* margin은 상속 안 되므로 initial처럼 동작 → 0 */
}

/* 인라인 요소에 width/height를 줘도 무시됩니다 */
span {
  width: 200px; /* 적용 안 됨 */
  height: 100px; /* 적용 안 됨 */
  margin-top: 20px; /* 적용 안 됨 */
  margin-bottom: 20px; /* 적용 안 됨 */
  margin-left: 10px; /* 이건 적용 됨! */
  margin-right: 10px; /* 이건 적용 됨! */
}

/* 해결: display를 바꿔줍니다 */
span {
  display: inline-block; /* 인라인처럼 나란히 + 블록처럼 크기 제어 */
  width: 200px;
  height: 100px;
}

.box-a {
  margin-bottom: 40px;
}
.box-b {
  margin-top: 30px;
}
/* 실제 간격: 70px이 아니라 40px (둘 중 큰 값) */

/* 부모-자식 마진 겹침 방지 */
.parent {
  /* 아래 중 하나만 적용해도 해결됩니다 */
  padding-top: 1px; /* 패딩으로 경계 만들기 */
  border-top: 1px solid transparent; /* 보더로 경계 만들기 */
  overflow: hidden; /* BFC(Block Formatting Context) 생성 */
}

/* content-box (기본값): width = 콘텐츠 영역만 */
.box-content {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 실제 화면 너비: 200 + 20*2 + 5*2 = 250px */
}

/* border-box: width = 콘텐츠 + 패딩 + 보더 전부 포함 */
.box-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 실제 화면 너비: 정확히 200px */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 넘치는 부분을 잘라냄 (가장 많이 쓰임) */
.box-hidden {
  overflow: hidden;
}

/* 항상 스크롤바 표시 */
.box-scroll {
  overflow: scroll;
}

/* 넘칠 때만 스크롤바 표시 (권장) */
.box-auto {
  overflow: auto;
}

/* 넘쳐도 그대로 보여줌 (기본값) */
.box-visible {
  overflow: visible;
}

/* 한 줄 말줄임 (세 속성이 세트) */
.title-one-line {
  white-space: nowrap; /* 줄바꿈 금지 */
  overflow: hidden; /* 넘치는 부분 숨김 */
  text-overflow: ellipsis; /* 잘린 부분에 ... 표시 */
}

/* 여러 줄 말줄임 (2줄까지 보여주고 나머지는 ...) */
.title-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 1. display: none — 완전히 제거 */
.hidden-display {
  display: none;
}

/* 2. visibility: hidden — 자리는 차지하지만 안 보임 */
.hidden-visibility {
  visibility: hidden;
}

/* 3. opacity: 0 — 투명하지만 자리도 차지하고 클릭도 됨 */
.hidden-opacity {
  opacity: 0;
}

return { show && <Component />; }

/* CSS Reset 스타일 예시 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 이 위에 원하는 스타일을 자유롭게 쌓아갑니다 */
body {
  font-family: "Pretendard", sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 필수 항목 옆에 빨간 별표 추가 */
.required::after {
  content: " *";
  color: red;
}

/* 링크 앞에 아이콘 추가 */
.external-link::before {
  content: "🔗 ";
}

/* 장식용 밑줄 */
.title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #3b82f6;
  margin-top: 8px;
}

/* 마진 겹침 방지: 가장 명확한 방법 */
.parent {
  display: flow-root; /* BFC 생성, 부작용 없음 */
}

/* 또는 이미 사용 중인 방법 */
.parent {
  overflow: hidden; /* BFC 생성, 넘치는 콘텐츠가 잘릴 수 있음 */
}

<!-- HTML -->
<div class="card">클릭하면 상세 페이지로 이동합니다</div>
<button class="btn-submit" disabled>제출 불가</button>
<p class="loading-text">데이터를 불러오는 중...</p>

/* 클릭 가능한 카드: 손가락 커서 (링크처럼 보임) */
.card {
  cursor: pointer;
}

/* 비활성화된 버튼: 금지 표시 커서 */
.btn-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 로딩 중: 대기 커서 */
.loading-text {
  cursor: wait;
}

<!-- 로딩 중에 버튼 클릭 완전 차단 -->
<button class="btn-loading">처리 중...</button>

<!-- 오버레이 뒤의 콘텐츠 클릭 방지 -->
<div class="overlay"></div>

/* 버튼 클릭 완전 차단: 커서 모양 + 이벤트 차단 */
.btn-loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* 마우스 클릭, 호버 등 모든 포인터 이벤트 무시 */
}

/* 모달 뒤 배경 클릭 방지 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

<!-- Tailwind + React 예시 -->
<button
  disabled
  class="bg-blue-500 text-white disabled:opacity-50 disabled:cursor-not-allowed"
>
  제출하기
</button>