# Fizz Buzz를 4줄 CSS로 구현하기 – 초보자도 쉽게 이해하는 방법

*SEO 키워드: **CSS FizzBuzz**, **CSS 코드 예제**, **프로그래밍 퍼즐***

---

# # 서론 – “코드가 짧아도 똑똑하게!”

프로그래밍 입문자라면 가장 먼저 접하게 되는 연습 문제 중 하나가 바로 **Fizz Buzz**입니다. 숫자를 순서대로 출력하면서 3의 배수는 “Fizz”, 5의 배수는 “Buzz”, 15의 배수는 “FizzBuzz” 로 바꾸는 이 퍼즐은 로직을 이해하는 데 탁월한 도구죠.

그런데 **CSS**만으로도 이 문제를 해결할 수 있다는 사실, 알고 계셨나요?

Reddit에 올라온 “Fizz Buzz in 4 lines of CSS” 예제는 **CSS 코드 예제**를 찾는 사람들에게 큰 화제가 되었습니다. 이번 글에서는 그 짧은 코드를 하나하나 뜯어보고, 초보자도 직접 따라 할 수 있도록 상세히 설명합니다.

---

# # 본론

## # 1️⃣ HTML 구조 – 최소한의 마크업만 준비하기

Fizz Buzz를 CSS만으로 구현하려면, 먼저 숫자를 담을 **HTML 요소**가 필요합니다. 가장 간단한 방법은 `<ul>` 안에 1부터 100까지 `<li>`를 넣는 것이죠.

```
html

<ul class='fizzbuzz'>

  <!-- 1~100까지 숫자를 자동 생성하려면 JS를 쓰지만,

       여기서는 예시로 몇 개만 직접 작성합니다. -->

  <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>

  <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li>

  <!-- … 100까지 계속 -->

</ul>

```

**핵심 포인트**

- `<ul>`에 `class='fizzbuzz'`를 지정해 CSS에서 한 번에 스타일을 적용합니다.

- 실제 프로젝트에서는 서버‑사이드 템플릿이나 JavaScript 루프를 이용해 자동으로 `<li>`를 만들면 편리합니다.

## # 2️⃣ CSS 4줄 – 로직을 스타일에 숨기다

이제 **CSS FizzBuzz**의 핵심인 4줄 코드를 살펴봅시다.

```
css

.fizzbuzz li:nth-child(15n)::after{content:'FizzBuzz'}

.fizzbuzz li:nth-child(3n)::after{content:'Fizz'}

.fizzbuzz li:nth-child(5n)::after{content:'Buzz'}

.fizzbuzz li{color:transparent}

```

### # 2‑1. `nth-child` 선택자 활용

- `nth-child(15n)`: 15번째마다(15, 30, 45…) 해당 `<li>`를 선택합니다.

- `nth-child(3n)`, `nth-child(5n)`: 각각 3의 배수, 5의 배수를 선택합니다.

### # 2‑2. `::after` 가상 요소와 `content` 속성

CSS만으로 텍스트를 삽입하려면 `::after`(또는 `::before`)와 `content`를 사용합니다.

선택된 `<li>` 뒤에 “Fizz”, “Buzz”, “FizzBuzz”를 삽입하죠.

### # 2‑3. 마지막 줄 – 원본 숫자 숨기기

`color:transparent` 로 모든 `<li>` 텍스트를 투명하게 만들고, `::after` 로 삽입된 문자열만 보이게 합니다.

> **Tip**

> `color:transparent` 대신 `visibility:hidden`을 쓰면 레이아웃에 영향을 주지 않는 숨김 효과를 얻을 수 있습니다.

## # 3️⃣ 결과 확인 – 브라우저에서 바로 실행

위 HTML과 CSS를 하나의 파일에 저장하고 브라우저에서 열면, 1~100까지 숫자 대신 Fizz, Buzz, FizzBuzz가 적절히 표시됩니다.

```
html

<!DOCTYPE html>

<html lang='ko'>

<head>

<meta charset='UTF-8'>

<title>FizzBuzz in 4 lines of CSS</title>

<style>

.fizzbuzz li:nth-child(15n)::after{content:'FizzBuzz'}

.fizzbuzz li:nth-child(3n)::after{content:'Fizz'}

.fizzbuzz li:nth-child(5n)::after{content:'Buzz'}

.fizzbuzz li{color:transparent}

</style>

</head>

<body>

<ul class='fizzbuzz'>

  <!-- 1~100까지 li 요소 삽입 -->

</ul>

</body>

</html>

```

**동작 원리**는 단순합니다.

1. 모든 숫자를 투명하게 만든 뒤,

2. 3·5·15의 배수에 해당하는 요소에만 가상 텍스트를 입히는 것이죠.

## # 4️⃣ 확장 아이디어 – CSS만으로 더 재미있게

| 확장 아이디어 | 구현 방법 |

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

| **색상 구분** | `:nth-child(3n)::after{color:#ff5722}` 등으로 색을 다르게 지정 |

| **애니메이션** | `animation` 속성을 추가해 글자가 점점 나타나게 |

| **반응형 레이아웃** | `display:grid` 로 숫자·텍스트를 격자 형태로 배치 |

| **다른 언어** | `content:'삼'` 등으로 한국어, 일본어 등 다국어 지원 |

이처럼 **프로그래밍 퍼즐**을 CSS만으로 풀면서, CSS 선택자와 가상 요소의 활용도를 한 단계 끌어올릴 수 있습니다.

---

# # 결론 – 직접 도전하고, 공유해 보세요!

이번 포스팅에서는 **CSS 코드 예제** 4줄만으로 클래식한 **Fizz Buzz** 문제를 해결하는 방법을 살펴보았습니다.

- **HTML**은 최소한의 마크업만 준비하고,

- **CSS**의 `nth-child`와 `::after`를 활용해 로직을 구현하면 됩니다.

초보자도 몇 줄의 CSS만으로 복잡해 보이는 로직을 구현할 수 있다는 점이 가장 큰 매력입니다.

## # 다음 단계

1. 직접 코드를 작성해 보고, 브라우저 콘솔에서 오류가 없는지 확인하세요.

2. 색상, 애니메이션, 레이아웃 등을 변형해 **나만의 Fizz Buzz**를 만들어 보세요.

3. 완성된 결과물을 **GitHub** 혹은 **Reddit**에 공유하면, 다른 개발자와 아이디어를 교류할 수 있습니다.

> **행동 유도** – 지금 바로 위 코드를 복사해서 로컬 파일에 저장하고, 직접 실행해 보세요! 그리고 여러분만의 변형을 블로그나 SNS에 올려, 더 많은 사람에게 영감을 주는 개발자가 되어보세요.

---

*이 글이 도움이 되었다면, 좋아요와 댓글, 그리고 구독을 눌러주세요. 다음에도 흥미로운 **프로그래밍 퍼즐**과 **CSS 트릭**을 소개해 드리겠습니다.*