CSS로 레이아웃 설계하기

7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

7.1.1 플렉스 박스 레이아웃 살펴보기

플렉스 박스(Flexbox)는 1차원 레이아웃을 손쉽게 설계할 수 있는 CSS 레이아웃 모델입니다. 주로 요소들을 수평 또는 수직으로 배치하는 데 사용됩니다.

사용 시기: 수평 또는 수직 방향으로 요소를 정렬하거나 공간을 균등하게 분배할 때 사용합니다.

예시:

.container {
    display: flex;
}

7.1.2 플렉스 박스 레이아웃의 기본 속성

플렉스 박스의 주요 속성에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있습니다. 이 속성들을 통해 플렉스 컨테이너와 그 안의 아이템들이 어떻게 배치될지를 설정할 수 있습니다.

사용 시기: 플렉스 박스 레이아웃의 방향, 아이템의 정렬 방식 등을 정의할 때 사용합니다.

예시:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

7.1.3 플렉스 박스 레이아웃의 정렬 속성

플렉스 박스의 정렬 속성은 justify-content, align-items, align-self 등이 있으며, 이를 통해 플렉스 아이템의 정렬 방식을 제어할 수 있습니다.

사용 시기: 플렉스 아이템의 정렬을 제어하고자 할 때 사용됩니다.

예시:

.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.item {
    align-self: flex-end;
}

7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기

7.2.1 그리드 레이아웃 살펴보기

그리드 레이아웃은 2차원 레이아웃을 설계하는 데 적합한 CSS 레이아웃 모델로, 행과 열을 사용하여 요소를 배치합니다.

사용 시기: 복잡한 웹 페이지 레이아웃을 설계할 때 사용합니다.

예시:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
}

7.2.2 그리드 레이아웃의 기본 속성

그리드 레이아웃의 기본 속성에는 grid-template-columns, grid-template-rows, grid-gap 등이 있으며, 그리드의 행과 열의 크기를 설정할 수 있습니다.

사용 시기: 그리드의 행과 열을 정의하고 간격을 설정할 때 사용됩니다.

예시:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

7.2.3 그리드 레이아웃의 정렬 속성

그리드 아이템의 정렬 속성에는 justify-items, align-items, justify-content, align-content 등이 있으며, 이를 통해 그리드 안의 아이템을 정렬할 수 있습니다.

사용 시기: 그리드 아이템의 정렬 방식을 제어할 때 사용됩니다.

예시:

.container {
    display: grid;
    justify-items: center;
    align-items: stretch;
}

7.2.4 그리드 레이아웃의 배치 속성

그리드 아이템을 특정 위치에 배치하는 속성으로는 grid-column, grid-row 등이 있으며, 이를 통해 아이템이 그리드 내에서 차지하는 영역을 설정할 수 있습니다.

사용 시기: 그리드 아이템의 시작 위치와 끝 위치를 설정할 때 사용됩니다.

예시:

.item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

7.3 반응형 웹을 위한 미디어 쿼리 사용하기

7.3.1 미디어 쿼리란

미디어 쿼리는 특정 조건(화면 너비, 장치 종류 등)에 따라 다른 스타일을 적용할 수 있는 CSS 규칙입니다. 반응형 웹 디자인에서 필수적으로 사용됩니다.

사용 시기: 화면 크기나 장치 특성에 맞게 다른 스타일을 적용하고자 할 때 사용됩니다.

예시:

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

7.3.2 뷰포트 알아보기

뷰포트는 웹 페이지가 표시되는 장치의 화면 영역을 의미합니다. viewport 메타 태그를 사용해 반응형 웹 페이지의 뷰포트를 설정할 수 있습니다.

사용 시기: 반응형 웹 페이지의 초기 스케일과 가로 세로 비율을 제어할 때 사용됩니다.

예시:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7.3.3 미디어 쿼리의 기본 문법

미디어 쿼리는 @media 키워드를 사용하여 정의되며, 다양한 조건을 결합하여 사용할 수 있습니다. 주로 min-width, max-width와 같은 조건이 사용됩니다.

사용 시기: 특정 화면 크기나 장치에 맞는 스타일을 정의하고자 할 때 사용됩니다.

예시:

@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }
}

```

이제 이 내용을 복사하여 원하는 곳에 사용하시면 됩니다. 이로써 챕터 3부터 7까지 모든 내용을 마크다운 형식으로 정리해 드렸습니다. 추가로 도움이 필요하시면 언제든지 말씀해 주세요!