프론트엔드 스터디 대면 3주차: 박스 모델 실전, Position과 Flexbox

/* content-box: width(200) + padding×2(40) + border×2(10) = 실제 250px */
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

/* border-box: 실제 너비 200px 고정, 콘텐츠 영역 = 200 - 40 - 10 = 150px */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

html {
  font-size: 16px; /* rem의 기준 */
}

.parent {
  font-size: 20px;
}

.child-em {
  font-size: 1.5em; /* 부모(20px) × 1.5 = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 루트(16px) × 1.5 = 24px */
}

/* 두 p 태그 사이 간격: 30 + 20 = 50px이 아닌 30px (큰 쪽만) */
.box-a {
  margin-bottom: 30px;
}
.box-b {
  margin-top: 20px;
}

/* 방지법: 부모에 overflow: hidden 또는 padding/border 추가 */
.parent {
  overflow: hidden; /* 새 BFC 생성 → 자식 마진 겹침 차단 */
}

/* 방지법 2: Flexbox 컨테이너 안에서는 마진 겹침 없음 */
.flex-parent {
  display: flex;
  flex-direction: column;
}

/* 거의 모든 프로젝트의 첫 줄 — 전체 box-sizing 일괄 설정 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 기본 마진 제거 */
body,
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* 링크 앞에 아이콘 추가 */
.link::before {
  content: "→ ";
  color: blue;
}

/* 카드에 장식용 라인 추가 */
.card::after {
  content: ""; /* 빈 문자열 필수 */
  display: block;
  width: 40px;
  height: 3px;
  background: coral;
  margin-top: 8px;
}

/* 활용: 툴팁 말풍선 꼬리 */
.tooltip::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: black;
}

/* BFC를 만드는 방법들 */
.bfc-1 {
  overflow: hidden; /* 가장 오래된 방법 */
}
.bfc-2 {
  display: flow-root; /* 부작용 없이 BFC만 생성 — 권장 */
}
.bfc-3 {
  display: flex; /* flex/grid 컨테이너는 자동으로 BFC */
}

/* 활용 예: 부모-자식 마진 겹침 방지 */
.card {
  display: flow-root; /* 자식의 margin-top이 부모 밖으로 새지 않음 */
  padding: 16px;
}

/* 부모에 color 지정 → 자식 전체에 적용 */
body {
  color: #333;
  font-family: "Pretendard", sans-serif;
}

/* 상속 동작 제어 키워드 */
.child {
  color: inherit; /* 부모 값 강제 상속 */
  color: initial; /* 브라우저 기본값으로 초기화 */
  color: unset; /* 상속되는 속성이면 inherit, 아니면 initial */
}

/* overflow 기본 동작 */
.box-visible {
  overflow: visible; /* 기본값: 넘쳐도 그냥 표시 */
}
.box-hidden {
  overflow: hidden; /* 넘치는 부분 잘라냄 */
}
.box-scroll {
  overflow: auto; /* 넘칠 때만 스크롤바 표시 */
}

/* 한 줄 텍스트 말줄임 — 세 속성 세트로 사용 */
.ellipsis {
  white-space: nowrap; /* 줄바꿈 금지 */
  overflow: hidden; /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis; /* 잘린 자리에 ... 표시 */
}

<!-- Tailwind: truncate 클래스 하나로 동일하게 적용 -->
<p class="truncate w-48">이 텍스트는 너무 길어서 잘립니다...</p>

/* 모달 오버레이 페이드 애니메이션 예시 */
.overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* opacity: 0이어도 클릭 차단 */
}
.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* cursor: 마우스 포인터 모양 변경 */
.button {
  cursor: pointer; /* 손가락 모양 → 클릭 가능 암시 */
}
.disabled-button {
  cursor: not-allowed; /* 금지 아이콘 → 비활성 상태 암시 */
  opacity: 0.5;
}
.loading {
  cursor: wait; /* 로딩 중 */
}

/* pointer-events: 클릭 이벤트 자체를 차단 */
.overlay {
  pointer-events: none; /* 이 요소 위에서 클릭해도 아래 요소에 전달 */
}
.interactive {
  pointer-events: auto; /* 기본값 — 클릭 가능 */
}

<!-- Tailwind 예시 -->
<button class="cursor-pointer hover:bg-blue-600">클릭 버튼</button>
<button class="cursor-not-allowed opacity-50" disabled>비활성 버튼</button>
<div class="pointer-events-none">클릭 통과 레이어</div>