# 🎨 CSS 아이스버그: HTML 없이 순수 CSS만으로 만든 멋진 빙산 일러스트 🎨

*SEO 키워드: **CSS 아이스버그**, **CSS 애니메이션**, **프론트엔드 트릭***

---

# # 📌 서론 – “HTML 없이 그림을 그릴 수 있을까?”

웹 프론트엔드 개발을 시작한 지 얼마 안 된 초보라면, **HTML**이 없으면 화면에 아무 것도 표시되지 않을 거라고 생각하기 쉽습니다. 그런데 **CSS만**을 사용해 복잡한 그래픽을 구현한다면 어떨까요? 최근 개발자 커뮤니티에서 화제가 된 *CSS Iceberg* 예제는 바로 그런 도전을 성공시킨 작품입니다.

이 글에서는 **HTML 없이 순수 CSS만으로 빙산 일러스트를 만드는 방법**을 단계별로 풀어보고, 실제 코드와 함께 이해하기 쉬운 설명을 제공합니다.

---

# # 🧩 본론

## # 1️⃣ 프로젝트 준비 – 기본 파일 구조 만들기

```
text

project/

│
├─ index.html   ← 비워두거나 최소한 <style> 태그만 포함

└─ style.css    ← 모든 스타일을 여기서 작성

```

- `index.html`은 **빈 파일**이지만 브라우저가 CSS를 로드하도록 `<link rel='stylesheet' href='style.css'>` 를 한 줄만 넣어 주세요.

- 핵심은 **HTML 요소를 전혀 사용하지 않는 것**입니다. 모든 시각 요소는 `:root`, `::before`, `::after` 등 가상 선택자를 활용해 구현합니다.

## # 2️⃣ 가상 요소와 `clip-path` 로 빙산 형태 만들기

CSS 가상 요소(`::before`, `::after`)는 실제 DOM에 존재하지 않지만, **시각적인 레이어**를 추가할 때 유용합니다.

```
css

/* 기본 배경 */

body {

  margin: 0;

  height: 100vh;

  background: linear-gradient(to bottom, #87ceeb, #fff);

}

/* 빙산 컨테이너 – 실제 요소는 하나뿐 */

.iceberg {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 200px;

  height: 150px;

  transform: translateX(-50%);

  background: #e0f7fa;

}

/* 빙산 위쪽(눈에 보이는 부분) */

.iceberg::before {

  content: '';

  position: absolute;

  top: -80px;

  left: 0;

  width: 100%;

  height: 120px;

  background: #fff;

  clip-path: polygon(0% 100%, 20% 0%, 40% 30%, 60% 0%, 80% 30%, 100% 0%, 100% 100%);

}

/* 빙산 아래쪽(숨은 부분) */

.iceberg::after {

  content: '';

  position: absolute;

  bottom: -70px;

  left: -30px;

  width: 260px;

  height: 100px;

  background: #b2ebf2;

  clip-path: polygon(0% 0%, 30% 100%, 70% 0%, 100% 100%, 100% 0%);

}

```

- `clip-path` 를 이용해 **다각형 형태**를 정의하고, 이를 빙산의 눈에 보이는 부분과 물속에 가라앉은 부분으로 나눕니다.

- `::before` 와 `::after` 로 각각 **위와 아래** 레이어를 겹쳐서 입체감을 줍니다.

## # 3️⃣ 부드러운 움직임 – `@keyframes` 로 파도와 빙산 흔들기

시각적인 효과를 더하려면 **CSS 애니메이션**을 적용합니다. 여기서는 파도가 살짝 움직이고, 빙산이 바람에 흔들리는 모습을 구현합니다.

```
css

/* 파도 애니메이션 */

@keyframes wave {

  0%   { transform: translateX(0); }

  50%  { transform: translateX(-20px); }

  100% { transform: translateX(0); }

}

/* 빙산 흔들림 */

@keyframes sway {

  0%   { transform: rotate(0deg); }

  50%  { transform: rotate(2deg); }

  100% { transform: rotate(0deg); }

}

/* 적용 */

body::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 30vh;

  background: radial-gradient(circle at 50% 0, #fff, #87ceeb);

  animation: wave 4s infinite ease-in-out;

}

.iceberg {

  animation: sway 6s infinite ease-in-out;

}

```

- `body::after` 로 만든 파도는 **수평 이동**만으로도 충분히 물결 효과를 낼 수 있습니다.

- `sway` 애니메이션은 **작은 회전**을 반복해 빙산이 바람에 살짝 흔들리는 듯한 느낌을 줍니다.

## # 4️⃣ 반응형 디자인 – 뷰포트에 맞춰 크기 조절

모바일에서도 깨지지 않게 하려면 `vw`(viewport width) 단위를 활용합니다.

```
css

.iceberg {

  width: 40vw;          /* 화면 너비의 40% */

  height: 30vh;         /* 화면 높이의 30% */

}

```

이렇게 하면 **데스크톱, 태블릿, 스마트폰** 어느 환경에서도 빙산 비율이 자동으로 맞춰집니다.

## # 5️⃣ 실전 팁 – 디버깅과 성능 최적화

| 팁 | 내용 |

|---|---|

| **가상 요소 확인** | 브라우저 개발자 도구에서 `::before`, `::after` 가 적용된 요소를 직접 선택해 색상·크기·위치를 조정합니다. |

| **`clip-path` 지원** | 최신 브라우저는 대부분 지원하지만, 구버전 IE에서는 동작하지 않으니 필요 시 `svg` 폴리곤 대체를 고려합니다. |

| **애니메이션 최적화** | `transform` 과 `opacity` 만 사용하면 GPU 가속이 적용돼 부드러운 렌더링이 가능합니다. |

---

# # ✅ 결론 – 이제 당신 차례!

이번 포스팅을 통해 **HTML 없이 순수 CSS만으로 복잡한 일러스트와 애니메이션을 구현**하는 방법을 배웠습니다. `clip-path`, `::before/::after`, `@keyframes` 같은 CSS 기본 기능만으로도 충분히 눈에 띄는 UI를 만들 수 있다는 점, 기억해 주세요!

> **실전 과제**: 오늘 배운 내용을 바탕으로 **자신만의 아이스버그** 혹은 **다른 자연 풍경**을 만들어 보세요. 만든 작품은 SNS에 `#CSSIceberg` 해시태그와 함께 공유하면, 다른 개발자들과 아이디어를 교환할 수 있습니다.

궁금한 점이나 추가적인 트릭이 필요하면 댓글로 알려 주세요. 여러분의 멋진 CSS 작품을 기대합니다! 🚀