화면 분할 레이아웃: 화면을 분할하여 다양한 레이아웃을 만들기

화면 분할 레이아웃은 웹 페이지의 공간을 효과적으로 활용하여 다양한 콘텐츠를 표시하는 데 유용합니다. CSS를 사용하여 다양한 화면 분할 레이아웃을 만드는 방법은 다음과 같습니다.

1. Flexbox 사용

• Flexbox로 수평 분할: display: flex;를 사용하여 요소들을 수평으로 나란히 배치합니다.
• 예시:

.container {
  display: flex;
}
.column {
  flex: 1; /* 동일한 너비로 분할 */
}

 

2. Grid Layout 사용

• Grid로 레이아웃 분할: display: grid;와 grid-template-columns, grid-template-rows를 사용하여 복잡한 레이아웃을 구성합니다.
• 예시:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 두 열의 너비 비율 설정 */
}

 

3. 수직 분할

• Flexbox로 수직 분할: flex-direction: column;을 사용하여 요소들을 수직으로 나란히 배치합니다.
• 예시:

.container {
  display: flex;
  flex-direction: column;
}

 

4. 반응형 레이아웃

• 미디어 쿼리 사용: 화면 크기에 따라 레이아웃을 변경하기 위해 미디어 쿼리를 활용합니다.
• 예시:

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

 

5. 고정 및 유동적 레이아웃

• 고정 및 유동적 분할: flex 속성을 사용하여 고정된 너비와 유동적인 너비를 혼합하여 레이아웃을 구성합니다.
• 예시:

.sidebar {
  flex: 0 0 200px; /* 고정 너비 */
}
.content {
  flex: 1; /* 나머지 공간을 채움 */
}

 

 

6. 중첩 레이아웃

• Grid와 Flexbox 중첩: Grid와 Flexbox를 중첩하여 더 복잡한 레이아웃을 만듭니다.

7. 다중 행 또는 열 레이아웃

• 다중 행 또는 열 구성: grid-template-rows와 grid-template-columns를 사용하여 여러 행 또는 열을 만듭니다.

8. 컨테이너 크기 조절

• 컨테이너 크기: 각 섹션의 크기를 조절하여 레이아웃의 비율을 조정합니다.

9. 공간 분할 비율 조정

• 비율 조정: flex 또는 grid-template-columns의 값을 조절하여 공간 분할의 비율을 조정합니다.

10. 고정된 사이드바

• 고정 사이드바: 한쪽에 고정된 사이드바를 두고 나머지 공간에 콘텐츠를 표시하는 레이아웃을 구성합니다.

11. 오버플로우 처리

• 스크롤 추가: overflow: auto; 또는 overflow: scroll;을 사용하여 내용이 많을 경우 스크롤을 추가합니다.

12. 각 섹션의 스타일링

• 개별 섹션 스타일링: 각 분할된 섹션에 배경색, 테두리, 패딩 등의 스타일을 적용합니다.