# CSS 아이스버그 애니메이션 만들기: HTML 없이 순수 CSS만으로 구현하는 방법

*SEO 키워드: **CSS 아이스버그**, **CSS 애니메이션**, **프로그래밍 아트***

---

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

웹 페이지를 만들 때 대부분은 **HTML** 구조에 CSS를 입혀 디자인을 완성합니다. 그런데 **HTML 없이 순수 CSS만**으로 복잡한 그림이나 애니메이션을 구현할 수 있다는 사실, 알고 계셨나요?

이번 포스트에서는 *dev.to*에 소개된 **CSS Iceberg** 프로젝트를 예시로, **CSS 아이스버그**라는 흥미로운 **프로그래밍 아트**를 만들면서 “HTML 없이 그림을 그릴 수 있다”는 질문에 답해 보겠습니다. 초보자도 이해하기 쉬운 단계별 설명을 통해 직접 코드를 따라해 볼 수 있도록 구성했습니다.

---

# # 1️⃣ CSS만으로 그림을 그리는 기본 원리

## # 1-1. `::before`·`::after` 의 활용

HTML 요소가 하나라도 있어야 CSS가 적용되지만, **하나의 `<div>`** 만으로도 여러 개의 가상 요소(`::before`, `::after`)를 만들어 **다중 레이어**를 구현할 수 있습니다. 가상 요소는 실제 DOM에 존재하지 않지만, CSS에서 마치 별도의 요소처럼 스타일을 지정할 수 있기 때문에 복잡한 형태를 만들 때 큰 도움이 됩니다.

## # 1-2. `border`, `border-radius`, `transform` 으로 도형 만들기

- **삼각형** : `width:0; height:0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #fff;`

- **원** : `border-radius: 50%;`

- **기울기** : `transform: rotate(30deg);`

이러한 기본 도형을 조합하면 아이스버그의 물 위에 떠 있는 깎아지른 형태를 손쉽게 구현할 수 있습니다.

## # 1-3. `background`와 `linear-gradient` 로 색상·그라디언트 입히기

`linear-gradient` 를 이용하면 **하나의 요소에 여러 색상의 레이어**를 겹쳐 넣을 수 있어, 물결 효과나 빙산의 음영을 자연스럽게 표현할 수 있습니다.

---

# # 2️⃣ 아이스버그 구현 핵심 – 구조와 레이어 구상

아래는 **CSS Iceberg** 프로젝트의 핵심 구조를 간단히 정리한 표입니다.

| 레이어 | 역할 | 주요 CSS 속성 |

|--------|------|---------------|

| `.iceberg` (루트) | 전체 컨테이너, 위치와 크기 지정 | `position: relative; width: 200px; height: 200px;` |

| `::before` | 물 위에 떠 있는 빙산 본체 (삼각형) | `border`, `background`, `transform` |

| `::after` | 물 아래 보이는 빙산 그림자 (반투명 삼각형) | `opacity`, `background`, `transform` |

| `.wave` (자식) | 물결 애니메이션 | `animation: wave 4s infinite;` |

| `.wave::before` / `::after` | 물결 파형 (곡선) | `border-radius`, `transform: translateX` |

이처럼 **5개의 레이어**만으로도 입체감 있는 아이스버그와 파도 효과를 구현합니다.

---

# # 3️⃣ 코드 분석 – 한 줄씩 살펴보기

아래는 핵심 CSS 코드(전체는 150줄 정도)이며, 주요 부분에 주석을 달아 설명했습니다.

```
css

/* 1️⃣ 루트 컨테이너 */

.iceberg {

  position: relative;          /* 가상 요소들의 기준점 */

  width: 300px;

  height: 200px;

  margin: 100px auto;          /* 화면 가운데 정렬 */

}

/* 2️⃣ 빙산 본체 – ::before */

.iceberg::before {

  content: '';

  position: absolute;

  bottom: 20%;                 /* 물 위에 떠 있는 위치 */

  left: 50%;

  width: 0; height: 0;

  border-left: 120px solid transparent;

  border-right: 120px solid transparent;

  border-bottom: 180px solid #e0f7ff;  /* 연한 파란색 */

  transform: translateX(-50%) rotate(5deg);

}

/* 3️⃣ 빙산 그림자 – ::after */

.iceberg::after {

  content: '';

  position: absolute;

  bottom: 10%;                 /* 물 아래 살짝 보이는 부분 */

  left: 50%;

  width: 0; height: 0;

  border-left: 130px solid transparent;

  border-right: 130px solid transparent;

  border-bottom: 200px solid rgba(0,0,0,0.1);

  transform: translateX(-50%) rotate(-5deg);

}

/* 4️⃣ 물결 컨테이너 */

.wave {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 30px;

  overflow: hidden;

}

/* 5️⃣ 물결 파형 – ::before / ::after */

.wave::before,

.wave::after {

  content: '';

  position: absolute;

  width: 200%;

  height: 100%;

  background: radial-gradient(circle at 50% 0, #a0d8ff, transparent 70%);

  border-radius: 45%;

  animation: wave 4s linear infinite;

}

/* 파형 움직임 */

@keyframes wave {

  0%   { transform: translateX(-50%); }

  100% { transform: translateX(0%); }

}

```

## # 핵심 포인트

1. **`content: ''`** 로 가상 요소를 활성화한다.

2. **`border`** 로 삼각형을 만들고, **`transform`** 으로 미세 회전·좌우 이동을 주어 자연스러운 기울기를 만든다.

3. **`rgba(0,0,0,0.1)`** 로 투명 그림자를 넣어 물속에 잠긴 느낌을 연출한다.

4. **`radial-gradient`** 와 **`border-radius`** 로 파형을 만들고, `@keyframes` 로 좌우 이동 애니메이션을 부여한다.

이렇게 **HTML 없이** 순수 CSS만으로도 아이스버그와 물결을 구현할 수 있습니다.

---

# # 4️⃣ 활용 아이디어 – 나만의 CSS 아트 만들기

1. **컬러 변형** – `border-bottom` 색상을 계절별 파란색(#a0e8ff → #ffddaa)으로 바꾸면 겨울·여름 테마 전환이 가능.

2. **텍스트 삽입** – `.iceberg::before` 위에 `::after` 로 `content:'CSS Iceberg'` 를 넣어 로고나 메시지를 표시해 보세요.

3. **반응형 디자인** – `width: 30vw; height: 20vh;` 로 비율을 지정하면 화면 크기에 맞춰 자동 조절됩니다.

4. **다른 도형 결합** – `::before` 를 별 모양(`clip-path`)으로 바꾸면 **CSS 아이스버그 별** 같은 독특한 아트를 만들 수 있습니다.

---

# # 결론 – 직접 만들어 보고 공유해 보세요!

이번 포스트에서는 **HTML 없이 순수 CSS만**으로 **CSS 아이스버그**를 구현하는 전체 과정을 살펴봤습니다.

* **CSS 애니메이션**과 **프로그래밍 아트**에 대한 이해도가 높아졌을 것이고,

* 직접 코드를 작성해 보면 **CSS만으로도 충분히 시각적인 표현이 가능**하다는 자신감을 얻을 수 있습니다.

지금 바로 위 코드를 복사해 본인의 프로젝트에 붙여넣고, 색상·크기·애니메이션 속도를 자유롭게 바꿔 보세요. 만든 결과물을 **SNS**나 **GitHub**에 공유하고, **#CSSIceberg** 해시태그와 함께 다른 개발자들과 아이디어를 나누면 더 큰 영감을 얻을 수 있습니다.

> **행동 유도** :

> 1️⃣ 이 글을 북마크하고 언제든 참고하세요.

> 2️⃣ 직접 코드를 수정해 나만의 **CSS 아이스버그**를 완성한 뒤, 블로그나 포트폴리오에 올려 보세요.

> 3️⃣ 댓글에 여러분이 만든 변형 예시를 공유해 주세요!

다음에도 **CSS만으로 할 수 있는 놀라운 아트**를 소개하겠습니다. 기대해 주세요!