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만으로 할 수 있는 놀라운 아트를 소개하겠습니다. 기대해 주세요!