[CSS 수업] 6강 - 레이아웃 만들기

안녕하세요! 오늘은 CSS 수업 6강에서 다루는 CSS 레이아웃 만들기에 대해 알아보겠습니다. 웹 페이지를 디자인할 때 중요한 부분 중 하나는 화면 요소들의 배치와 정렬입니다.

이를 위해 CSS에서는 플렉스박스와 그리드 레이아웃을 활용할 수 있습니다. 이번 포스트에서는 이 두 가지 레이아웃 방법을 소개하고, 각각의 특징과 사용법에 대해 알아보겠습니다.

 

플렉스박스(Flexbox) 레이아웃 소개

플렉스박스는 요소들을 한 줄 또는 여러 줄로 배치할 수 있도록 도와주는 CSS 레이아웃 모델입니다. 주축과 교차축의 개념을 이해하고, 주축과 교차축에 대한 속성을 설정하여 요소들의 배치를 조절할 수 있습니다. 플렉스박스는 주로 요소들을 가로로 배치하거나 정렬할 때 유용하며, 반응형 디자인을 구현할 때도 효과적으로 사용됩니다.

 

반응형

 

그리드(Grid) 레이아웃 소개

그리드 레이아웃은 행과 열의 구조를 가진 격자(Grid) 형태의 레이아웃을 만들 수 있도록 도와주는 CSS 레이아웃 시스템입니다. 그리드를 사용하면 화면을 균일하게 분할하여 요소들을 배치할 수 있습니다. 각각의 셀(Cell)에 요소를 배치하고 조절할 수 있어 복잡한 레이아웃을 간편하게 구현할 수 있습니다. 그리드 레이아웃은 특히 복잡한 웹 페이지의 디자인에 유용하며, 반응형 디자인을 쉽게 구현할 수 있는 장점이 있습니다.

 

플렉스박스와 그리드 레이아웃 예제

아래는 간단한 예제를 통해 플렉스박스와 그리드 레이아웃을 어떻게 활용하는지 보여줍니다.

/* 플렉스박스 예제 */
.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 10px;
}

· 플렉스박스 예제에서는 .container 클래스에 display: flex;를 적용하여 플렉스 컨테이너를 만듭니다. justify-content: space-between;은 요소들을 컨테이너 양쪽에 배치하도록 설정합니다.

 

 

/* 그리드 레이아웃 예제 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #2ecc71;
  padding: 20px;
}

· 그리드 레이아웃 예제에서는 .container 클래스에 display: grid;를 적용하여 그리드 컨테이너를 만듭니다. grid-template-columns: repeat(3, 1fr);은 세 개의 열을 생성하고 각 열의 너비를 균등하게 설정합니다.

이렇게 플렉스박스와 그리드 레이아웃을 활용하면 다양한 화면 구성을 쉽고 유연하게 구현할 수 있습니다. 계속해서 다양한 예제와 실전 프로젝트를 통해 실력을 향상해보세요!

 

- 이전 수업 목록