4장: 레이아웃

레이아웃은 웹 페이지의 요소들을 배치하고 정렬하는 방법을 정의합니다. CSS는 다양한 레이아웃 기술을 제공하여, 복잡한 웹 페이지의 레이아웃을 쉽게 구성할 수 있도록 합니다.

### 4.1 블록 레벨 요소와 인라인 요소

HTML 요소는 두 가지 주요 카테고리로 나눌 수 있습니다: 블록 레벨 요소와 인라인 요소입니다.

#### 4.1.1 블록 레벨 요소

블록 레벨 요소는 항상 새로운 줄에서 시작하며, 가로 방향으로 전체 너비를 차지합니다.

예제:
<div>
    <p>이것은 블록 레벨 요소입니다.</p>
</div>

CSS 코드:
div {
    border: 1px solid black;
    padding: 10px;
}

p {
    border: 1px solid blue;
    padding: 10px;
}

#### 4.1.2 인라인 요소

인라인 요소는 줄 바꿈을 하지 않고, 자신의 콘텐츠만큼의 너비만 차지합니다.

예제:
<p>이것은 <span>인라인 요소</span>입니다.</p>

CSS 코드:
span {
    border: 1px solid red;
    padding: 5px;
}

### 4.2 포지셔닝 (Positioning)

포지셔닝을 사용하면 요소를 페이지 내에서 특정 위치에 배치할 수 있습니다. 주요 포지셔닝 유형에는 static, relative, absolute, fixed, sticky가 있습니다.

#### 4.2.1 static

기본값으로, 요소는 문서의 정상적인 흐름에 따라 배치됩니다.

예제:
div {
    position: static;
}

#### 4.2.2 relative

요소는 기본 위치를 기준으로 상대적으로 배치됩니다.

예제:
div {
    position: relative;
    top: 10px;
    left: 20px;
}

#### 4.2.3 absolute

요소는 가장 가까운 위치가 설정된 조상 요소를 기준으로 배치됩니다.

예제:
div {
    position: absolute;
    top: 50px;
    left: 100px;
}

#### 4.2.4 fixed

요소는 뷰포트를 기준으로 고정되어 스크롤해도 같은 위치에 유지됩니다.

예제:
div {
    position: fixed;
    top: 0;
    right: 0;
}

#### 4.2.5 sticky

요소는 스크롤에 따라 상대 위치와 고정 위치를 전환합니다.

예제:
div {
    position: sticky;
    top: 0;
}

### 4.3 플렉스박스 (Flexbox)

플렉스박스는 일차원 레이아웃 모델로, 요소를 행 또는 열 방향으로 배치하고 정렬하는 데 사용됩니다.

#### 4.3.1 기본 사용법

컨테이너 요소에 `display: flex`를 설정하여 플렉스 컨테이너를 만듭니다.

예제:
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

CSS 코드:
.container {
    display: flex;
}

.item {
    padding: 10px;
    border: 1px solid black;
    margin: 5px;
}

#### 4.3.2 주요 속성

- `flex-direction`: 플렉스 아이템의 배치 방향을 설정합니다. (row, column)
- `justify-content`: 플렉스 아이템을 주 축(main axis)을 따라 정렬합니다. (flex-start, flex-end, center, space-between, space-around)
- `align-items`: 플렉스 아이템을 교차 축(cross axis)을 따라 정렬합니다. (flex-start, flex-end, center, stretch, baseline)

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

### 4.4 CSS 그리드 레이아웃 (CSS Grid Layout)

CSS 그리드는 2차원 레이아웃 시스템으로, 행과 열을 사용하여 요소를 배치합니다.

#### 4.4.1 기본 사용법

컨테이너 요소에 `display: grid`를 설정하여 그리드 컨테이너를 만듭니다.

예제:
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

CSS 코드:
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
}

.grid-item {
    padding: 10px;
    border: 1px solid black;
    text-align: center;
}

#### 4.4.2 주요 속성

- `grid-template-columns`: 그리드의 열 정의
- `grid-template-rows`: 그리드의 행 정의
- `gap`: 그리드 아이템 간의 간격
- `grid-column`: 아이템이 차지할 열의 범위
- `grid-row`: 아이템이 차지할 행의 범위

예제:
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100px 200px;
    gap: 20px;
}

.grid-item {
    padding: 20px;
    border: 1px solid black;
}

### 연습 문제

1. 블록 레벨 요소와 인라인 요소의 차이를 이해하고, 예제를 통해 각각의 특성을 확인해 보세요.
2. 포지셔닝 속성을 사용하여 다양한 요소를 배치해 보세요. static, relative, absolute, fixed, sticky의 차이를 이해해 보세요.
3. 플렉스박스를 사용하여 레이아웃을 구성하고, 플렉스 아이템을 정렬해 보세요.
4. CSS 그리드 레이아웃을 사용하여 2차원 레이아웃을 구성해 보세요. 행과 열을 정의하고, 그리드 아이템을 배치해 보세요.