[WEB][CSS] CSS 기초 - 레이아웃 관련 기본 속성

이 글은 CSS를 이용하여 페이지 레이아웃을 구성하기 위한 기본 속성에 대해 정리한 글이다.

---

CSS 레이아웃

• CSS에서 레이아웃은 웹 페이지의 요소들을 어떤 방식으로 배치할지 결정하는 개념
• 주요 속성 : display, position, z-index
• 기타 속성 : float, clear, overflow
• 현대 레아아웃 방식 : Flexbox & CSS Grid

---

display 속성

• HTML 요소가 어떻게 배치(렌더링)되느냐를 결정하는 핵심 속성

display: block

• 요소가 블록(줄바꿈이 일어다는 단위)으로 배치
• 블록 요소는 가로 영역을 모두 차지하며, 다음 요소가 바로 아래로 내려감
• width, height, margin, padding 적용 가능
• 대표적인 HTML 요소 : <div>, <p>, <h1> ~ <h6> 등

display: inline

• 요소가 인라인(줄바꿈 없이)으로 배치
• 인라인 요소는 콘텐츠 크기에 맞춰 크기가 결정됨
  • width, height, margin, padding 적용에 제한이 있음
• 대표적인 HTMl 요소 : <span>, <a> 등

display: inline-block

• display: inline 요소와 같이 한 줄에 배치되면서 display: block 요소에 적용 가능한 속성들을 지정할 수 있음
  • width, height, margin, padding 지정 가능

display: none

• 요소가 화면에서 사라짐 (렌더링이 일어나지 않음)
• 화면에 보이지 않음과 동시에 공간도 차지하지 않음

display: flex & display: grid

• display: flex와 display: grid는 모던한 레이아웃 방식 (하단에 자세히 설명)

---

position 속성

• 요소의 위치(좌표)를 어떻게 계산할 것인지 결정하는 속성
• top, right, bottom, left와 함께 사용되어 요소 배치

position: static

• 기본 위치 속성으로, 특별한 좌표 지정 없이 HTML 문서의 흐름에 따라 요소가 배치됨
• 좌표(top, left 등) 지정 시에도 적용되지 않음

position: relative

• 요소가 문서의 기본 흐름에 따라 배치된 뒤, top, left, right, bottom 값만큼 상대적으로 이동
• 상대 위치를 지정할 때, 원래 위치를 기준으로 이동
• 자식 요소의 absolute(또는 fixed) 배치 기준이 될 수 있음

position: absolute

• 요소가 문서의 일반 흐름에서 제거하고, 가장 가까운 조상 중 position이 relative, absolute, fixed, sticky로 설정된 요소 (또는 body)를 기준으로 배치
• 좌표를 사용해 절대 위치 지정 가능
• 절대 위치에 배치되어, 주변 요소와의 관계가 달라질 수 있음

position: fixed

• 브라우저의 뷰포트(화면)를 기준으로 요소를 배치
• 스크롤을 내려도 화면에 동일한 위치를 유지 (ex. 고정 메뉴, 팝업창 등)

position: sticky

• 스크롤에 따라 특정 지점에서 요소가 고정되는 배치
• 헤더가 스크롤을 내리면 상단에 붙어있는 "스티키 헤더"를 구현할 때 주로 사용

---

z-index 속성

• 요소가 겹쳤을 때, 어떤 요소가 더 위에 나타나는지를 결정하는 속성
  • position이 static이 아닌 요소에만 유효
  • 숫자가 클수록 화면의 위쪽 레이어에 배치

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.box2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

• 위 예시 코드에서는 .box1이 .box2보다 위에 배치

---

Flexbox와 CSS Grid

Flexbox 방식

• display: flex 속성을 부여하여 사용 가능
• 1차원(가로 또는 세로) 레이아웃에 특화된 모던헨 레이아웃 방식
• flex container 안에서 자식 요소(flex items)들을 수평 또는 수직으로 자유롭게 정렬할 수 있음

.container {
  display: flex;
  flex-direction: row;       /* 기본값: row */
  justify-content: center;   /* 수평 중앙 정렬 */
  align-items: center;       /* 수직 중앙 정렬 */
}

• justify-content : 메인 축(가로축 또는 세로축)을 기준으로 아이템 정렬
• align-items : 교차 축(세로축 또는 가로축)을 기준으로 아이템 정렬
• flex-direction : 주축의 방향(가로 → row, 세로 → column) 설정
• flex-wrap : 아이템을 여러 줄로 감싸도록 설정
• align-content : 교차 축에 빈 공간이 있을 때 여러 줄을 정렬

CSS Grid 방식

• display: grid 속성을 부여하여 사용 가능
• 2차원(가로 + 세로) 레이아웃을 다루기 위한 현대적인 방식
• 행(row)과 열(column)을 기반으로 정교한 레이아웃 구성 가능

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 세 개의 열(비율 1:2:1) */
  grid-template-rows: auto 200px;      /* 두 개의 행, 첫째 행은 높이 자동, 둘째 행은 200px */
  gap: 10px;                           /* 그리드 아이템 간 10px 간격 */
}
.item1 {
  grid-column: 1 / 3;                  /* 첫 번째 열부터 세 번째 열 직전까지(즉, 2칸을 차지) */
}

• grid-template-columns, grid-template-rows : 그리드의 열과 행 크기 정의
• grid-gap, row-gap, column-gap : 그리드 아이템 간의 간격
• justify-items, align-items : 각 셀 안에서 아이템 정렬
• grid-column, grid-row : 아이템이 차지하는 그리드 셀 범위 지정