CSS 레이아웃 기초

소개

CSS 레이아웃 기초 실습에 오신 것을 환영합니다! 이 실습에서는 컨테이너 내의 항목들을 효율적으로 배치, 정렬 및 공간을 분배하는 강력한 레이아웃 모델인 CSS Flexbox 의 기본 사항을 탐구합니다.

이 실습 전반에 걸쳐 미리 구성된 HTML 파일 (index.html) 과 CSS 파일 (style.css) 을 사용하게 됩니다. 여러분의 임무는 style.css 파일을 수정하여 페이지의 요소 레이아웃을 조작하는 것입니다. 실습 환경의 Web 8080 탭으로 전환하여 변경 사항을 실시간으로 확인할 수 있습니다.

다음과 같은 내용을 배우게 됩니다:

• 플렉스 컨테이너 초기화하기.
• justify-content를 사용하여 주 축 (main axis) 을 따라 항목 정렬하기.
• align-items를 사용하여 교차 축 (cross axis) 을 따라 항목 정렬하기.
• flex-direction으로 레이아웃 방향 변경하기.
• flex-wrap을 사용하여 항목을 여러 줄로 줄 바꿈하기.

시작해 봅시다!

컨테이너 요소에 display flex 설정하기

이 단계에서는 일반적인 블록 레벨 요소를 플렉스 컨테이너로 변환하는 것부터 시작합니다. 이는 모든 플렉스박스 레이아웃을 만드는 기초 단계입니다.

display: flex; 속성은 부모 요소 (컨테이너) 에 적용되어 모든 직계 자식 요소 (아이템) 에 대해 플렉스 컨텍스트를 활성화합니다. 적용되면 자식 요소들은 자동으로 행 (row) 으로 정렬됩니다.

먼저 화면 왼쪽의 파일 탐색기에서 style.css 파일을 엽니다.

다음으로 .container CSS 규칙을 찾습니다. 이 규칙 안에 display: flex; 속성을 추가합니다.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  /* We will add flex properties here */
  display: flex;
}

코드를 추가한 후 파일을 저장합니다. 이제 Web 8080 탭으로 전환하여 결과를 확인합니다. 이전에 수직으로 쌓여 있던 번호가 매겨진 상자들이 이제 단일 행으로 가로 정렬된 것을 볼 수 있습니다.

justify-content 속성으로 space-between 사용하기

이 단계에서는 justify-content 속성을 사용하여 주 축 (기본적으로 수평) 을 따라 항목들의 정렬을 제어하는 방법을 배웁니다. 이 속성은 컨테이너 내의 남은 여유 공간을 분배하는 데 도움이 됩니다.

space-between 값을 사용할 것이며, 이는 항목들을 균등하게 분배합니다. 첫 번째 항목은 컨테이너의 시작 부분에 위치하고, 마지막 항목은 끝 부분에 위치하며, 나머지 공간은 항목들 사이에 균등하게 분배됩니다.

style.css 파일에서 .container 규칙에 justify-content: space-between; 속성을 추가합니다.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
}

파일을 저장하고 Web 8080 탭을 확인합니다. 플렉스 항목들이 이제 컨테이너의 전체 너비에 걸쳐 퍼져 있으며, 항목들 사이에 균등한 간격이 있는 것을 볼 수 있습니다.

align-items 속성으로 center 적용하기

이 단계에서는 align-items 속성을 사용하여 교차 축 (기본적으로 수직) 을 따라 항목들을 정렬하는 방법을 배웁니다.

수직 정렬의 효과를 보기 위해 먼저 컨테이너에 높이를 지정해야 합니다. 그런 다음 align-items에 center 값을 사용하여 항목들을 컨테이너 내에서 수직으로 가운데 정렬할 것입니다.

style.css 파일에서 .container 규칙에 height와 align-items: center; 속성을 추가합니다.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 200px;
  align-items: center;
}

파일을 저장하고 Web 8080 탭에서 결과를 확인합니다. 이제 컨테이너가 더 높아졌으며, 모든 플렉스 항목들이 수직 공간의 중앙에 완벽하게 가운데 정렬되었습니다.

flex-direction 속성으로 column 구현하기

이 단계에서는 flex-direction 속성을 사용하여 주 축의 방향을 수평에서 수직으로 변경합니다.

기본적으로 플렉스 방향은 row입니다. 이를 column으로 설정하면 플렉스 항목들을 수직으로 쌓을 수 있습니다. 플렉스 방향을 column으로 변경하면 주 축이 수직이 되고 교차 축이 수평이 됩니다. 이는 justify-content가 이제 수직 정렬을 제어하고, align-items가 수평 정렬을 제어한다는 것을 의미합니다.

style.css 파일에서 .container 규칙에 flex-direction: column; 속성을 추가합니다.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  height: 400px; /* 더 나은 시각화를 위해 높이를 늘립니다 */
  align-items: center;
  flex-direction: column;
}

참고: column 레이아웃에서 justify-content의 효과를 더 잘 보기 위해 높이를 400px로 늘렸습니다.

파일을 저장하고 Web 8080 탭에서 변경 사항을 관찰합니다. 항목들이 이제 단일 열로 쌓입니다. justify-content: space-between이 이제 항목들 사이에 수직으로 공간을 추가하고, align-items: center가 항목들을 수평으로 가운데 정렬하는 것을 확인합니다.

flex-wrap 속성으로 wrap 추가하여 줄 바꿈하기

이 마지막 단계에서는 플렉스 항목들이 컨테이너를 넘치는 경우를 처리하는 방법을 배웁니다. flex-wrap 속성은 항목들이 축소되거나 넘치는 대신 새 줄로 줄 바꿈되도록 허용합니다.

이를 시연하기 위해 이전 단계의 행 기반 레이아웃으로 되돌리고, 모든 항목을 한 줄에 담기에는 너무 좁은 컨테이너에 고정된 너비를 설정할 것입니다.

먼저, 이전 단계의 속성들 (justify-content, align-items, flex-direction, height) 을 제거하여 .container 규칙을 정리합니다. 그런 다음 고정된 width와 flex-wrap: wrap; 속성을 추가합니다.

style.css에서 .container 규칙을 다음과 같이 업데이트합니다.

.container {
  border: 2px solid #333;
  padding: 10px;
  margin-top: 20px;
  background-color: #f0f0f0;
  display: flex;
  width: 450px; /* 줄 바꿈을 강제하기 위해 고정 너비 설정 */
  flex-wrap: wrap;
}

파일을 저장하고 Web 8080 탭을 새로고침합니다. 첫 번째 줄에 맞지 않는 플렉스 항목들이 두 번째 줄로 줄 바꿈된 것을 볼 수 있습니다. 이는 다양한 화면 크기에 적응하는 반응형 레이아웃을 만드는 데 필수적입니다.

요약

CSS 레이아웃 기초 실습을 완료하신 것을 축하드립니다! CSS Flexbox 의 핵심 개념을 성공적으로 학습하고 이를 적용하여 유연하고 반응형인 레이아웃을 만들었습니다.

이 실습에서는 다음을 연습했습니다.

• display: flex;: 플렉스 컨테이너를 생성합니다.
• justify-content: 주 축을 따라 항목을 정렬합니다.
• align-items: 교차 축을 따라 항목을 정렬합니다.
• flex-direction: 주 축의 방향 (행 또는 열) 을 정의합니다.
• flex-wrap: 항목이 여러 줄로 줄 바꿈되도록 허용합니다.

이러한 속성들은 현대 웹 디자인의 구성 요소입니다. Flexbox 에 대한 이해를 더욱 공고히 하기 위해 이러한 속성들의 다양한 값으로 계속 실험해 보시기를 권장합니다.