헤더 로고와 메인 제목 배치 및 중앙 정렬 방법

이번에는 웹 페이지의 헤더 영역에 로고 이미지와 **주요 제목(헤딩)**을 배치하고, CSS를 활용해 해당 요소들을 가로세로 정중앙에 정렬하는 방법을 배웠습니다. 주요 개념은 다음과 같습니다.

---

1. 로고 이미지 삽입 및 스타일링

• HTML에 div.logo-box를 만들고 그 안에 img.logo 요소 삽입
• img는 인라인 요소이므로 컨테이너(div)로 감싸는 것이 위치 제어에 유리
• CSS에서 position: absolute를 사용해 위치 지정
• 기준이 되는 상위 요소(header)에 position: relative 설정
• top과 left 속성으로 위치 지정 (top: 40px; left: 40px;)
• 로고 크기는 height: 35px만 설정해 브라우저가 자동 비율 조정하도록 함

---

2. 메인 헤딩 텍스트 구성

• h1.heading-primary 요소 생성
• 내부에 두 개의 span 요소 사용:
  span.heading-primary-main (예: "Outdoors")
  span.heading-primary-sub (예: "is where life happens.")
• span은 인라인 요소이므로 display: block을 적용해 줄바꿈 유도
• 텍스트 크기, 자간(letter-spacing), 색상(color: #fff), 대문자(text-transform: uppercase) 등 개별 스타일 적용

---

3. 중앙 정렬 박스 구성

• 위 텍스트들을 감쌀 div.text-box 생성
• 전체를 헤더 중앙에 배치하기 위해 text-box에 position: absolute 적용
• top: 50%, left: 50%로 부모(header)의 정중앙에 배치
• 실제 중앙에 정렬되도록 transform: translate(-50%, -50%) 적용
  → 이는 자기 자신의 너비와 높이의 50%만큼 왼쪽, 위로 이동하는 방식
• 실제 디자인 상 중앙보다 살짝 위에 배치하고 싶을 경우
  top: 40% + transform: translate(-50%, -50%) 사용

---

핵심 요약

• 절대 위치(position: absolute)는 반드시 기준 요소가 position: relative여야 원하는 위치 지정 가능
• transform: translate(-50%, -50%)는 정확한 중앙 정렬에 유용
• 텍스트 구성을 위한 span 요소는 스타일링에 매우 유연하게 활용 가능