고급 표현을 위한 CSS3 활용 (박스 모델, Flexbox)

CSS 레이아웃을 제대로 자유자재로 다루려면 모든 HTML 요소가 사각형 형태의 상자라는 **박스 모델(Box Model)**과 1차원 정렬 도구인 Flexbox를 완벽히 이해해야 합니다.

1. 박스 모델 (Box Model)의 4가지 구역

1. Content (내용): 글자나 이미지가 실제 들어가는 영역.
2. Padding (안쪽 여백): 내용과 테두리(Border) 사이의 내부 여백.
3. Border (테두리): 안쪽 여백과 바깥 여백을 가르는 테두리 선.
4. Margin (바깥 여백): 요소와 다른 요소 사이의 외부 간격.

/* 박스 크기 계산을 직관적으로 만들어주는 필수 설정 */
* {
  box-sizing: border-box; /* width에 padding과 border를 포함시켜 계산 */
}

2. 요소 위치 지정: Position 속성

• static: 기본값 (문서의 일반적인 흐름에 따라 배치).
• relative: 자기 자신의 원래 위치를 기준으로 상대 이동.
• absolute: 가장 가까운 position: relative인 부모 요소를 기준으로 절대 배치.
• fixed: 브라우저 화면(Viewport) 창을 기준으로 고정 (스크롤해도 안 움직임).
• sticky: 스크롤하다가 특정 위치에 도달하면 상단에 부착 고정.

3. 모던 레이아웃의 핵심: Flexbox (플렉스박스)

요소들을 가로 또는 세로로 자유롭게 정렬하고 공간을 분배하는 현대 웹 디자인의 핵심 도구입니다.

.container {
  display: flex;
  flex-direction: row;            /* 가로 방향 배치 */
  justify-content: space-between; /* 주축 정렬 (좌우 균등 배치) */
  align-items: center;            /* 교차축 정렬 (수직 중앙 정렬) */
}

4. 자주 묻는 질문 (Q&A)

Q. box-sizing: border-box;를 전역에 적용하는 이유는 무엇인가요? A. 기본값인 content-box는 width: 200px에 padding: 20px을 주면 전체 너비가 240px로 늘어나서 레이아웃 계산이 매우 까다로워집니다. border-box를 쓰면 패딩과 테두리를 포함해 딱 200px로 유지해 줍니다.