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 트릭을 소개해 드리겠습니다.