CSS 기초: 박스·플렉스·변수

박스 모델

요소는 content · padding · border · margin 층을 가집니다.

.card {
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 0.5rem 0;
  box-sizing: border-box; /* width에 padding 포함 */
}

Flex로 한 줄 배치

.row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

세로 스택은 flex-direction: column.

CSS 변수

:root {
  --ink: #1c1916;
  --accent: #0b5c45;
}
button {
  background: var(--accent);
  color: #fff;
}

테마를 바꿀 때 변수만 고치면 됩니다.

선택자 우선순위 (감각)

인라인 > ID > class > 태그.
!important는 최후 수단입니다.

반응형 맛보기

@media (max-width: 640px) {
  .row { flex-direction: column; }
}

단위

• rem : 루트 글자 크기 기준, 간격·타이포에 무난
• % : 부모 기준
• vh/vw : 뷰포트 (남용 주의)

display

block inline inline-block none flex grid
숨길 때 display: none은 레이아웃에서 제거, 보이기만 끄면 visibility/opacity.

연습

카드 하나: 패딩, 테두리, 제목·버튼 가로 flex.
좁은 폭에서 column으로 바뀌게 미디어 쿼리 추가.

더 깊게

읽은 뒤 연습장에서 예제 코드를 한 번 타이핑해 보세요. 눈으로만 보면 하루 뒤 사라집니다.

관련 원리 카드와 문제 태그로 바로 이어서 풀면, 문법·패턴이 한 묶음으로 남습니다.

막히면 30분 규칙: 입력을 로그로 확인 → 기대/실제 한 줄 비교 → 그래도 안 되면 배우기 레슨으로 잠시 복귀.