lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

webIntroGalleryChapter2Title

webIntroGalleryChapter1Title

webIntroGalleryChapter3Title

# 모달의 구조 및 스타일링

CSS 활용해 모달을 스타일링 해보겠습니다.

<br />

## 모달의 기본 구조

HTML 태그와 클래스:
모달은 `<div id="modal">`로 감싸져 있습니다. 내부적으로 헤더, 이미지 박스, 푸터의 세 구역으로 구분됩니다.

```html
<div id="modal">
  <div class="modal-content">
    <div class="modal-header">...</div>
    <div class="modal-img-box">...</div>
    <div class="modal-footer">...</div>
  </div>
</div>
```

<br />

## 모달의 기본 스타일링

모달은 전체 화면에 고정되며 반투명한 검정 배경을 가집니다.

```css title="CSS"
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
```

<br />

모달 컨텐츠는 흰색 배경과 둥근 모서리를 가집니다.

```css title="CSS"
.modal-content {
  background-color: #fff;
  border-radius: 4px;
}
```

<br />

## 버튼 및 아이콘 스타일링

닫기 버튼은 상단 오른쪽에 위치합니다.

```html
<div class="modal-header">
  <span class="close-btn">
    <img class="close-img" src="..." />
  </span>
</div>
```

```css title="CSS"
.close-btn {
  cursor: pointer;
}
.close-img {
  width: 20px;
  height: 20px;
}
```

<br />

모달 내 이미지는 중앙 배치되며, 최대 크기가 제한됩니다.

```css title="CSS"
.modal-img {
  max-width: 100%;
  max-height: 500px;
  margin: 0 auto;
}
```

이 기본 구조와 스타일링을 통해 모달이 효과적으로 표시됩니다.