# CSS Minecraft

> Clean Markdown view of GeekNews topic #21131. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21131](https://news.hada.io/topic?id=21131)
- GeekNews Markdown: [https://news.hada.io/topic/21131.md](https://news.hada.io/topic/21131.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-05-27T10:02:53+09:00
- Updated: 2025-05-27T10:02:53+09:00
- Original source: [benjaminaster.com](https://benjaminaster.com/css-minecraft/)
- Points: 26
- Comments: 7

## Summary

**JavaScript 없이 CSS만으로 Minecraft의 주요 기능과 상호작용**을 완전히 구현한 사이트 입니다. **`:has()` 의사 클래스를 포함한 최신 CSS 기술**로 복잡한 로직을 처리하며, **HTML과 CSS 역량의 한계**를 실험합니다. GitHub와 CodePen을 통해 소스와 데모를 직접 확인*할 수 있으니 참고하세요.

## Topic Body

- **CSS만을 이용해** 구현된 **완전한 Minecraft 클론**  
- **JavaScript 사용 없이**, 순수 HTML과 CSS만으로 모든 기능 구현  
- CSS의 **`:has()` 의사 클래스**를 활용해 복잡한 트리거와 반응형 로직 설계등 상호작용 처리 진행  
- **GitHub, CodePen, 공식 사이트**에서 소스 코드와 데모 제공  
- 최신 브라우저(Chromium 105+, Safari 15.4+, Firefox 121+) **필수**

## Comments



### Comment 40931

- Author: reedids
- Created: 2025-07-03T14:04:56+09:00
- Points: 1

CSS 차력쇼...

### Comment 39715

- Author: anveloper
- Created: 2025-06-04T11:43:27+09:00
- Points: 1

와..

### Comment 39396

- Author: ifmkl
- Created: 2025-05-28T16:09:57+09:00
- Points: 1

와우..?

### Comment 39383

- Author: mkyoon
- Created: 2025-05-28T10:12:53+09:00
- Points: 1

홀리몰리..

### Comment 39382

- Author: [hidden]
- Created: 2025-05-28T10:02:30+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 39340

- Author: ndrgrd
- Created: 2025-05-27T14:12:28+09:00
- Points: 1

각 칸에 블록을 선택할 수 있도록 배치하고 CSS로 외형만 꾸민 건가요? 대단하긴 하네요

### Comment 39306

- Author: neo
- Created: 2025-05-27T10:02:53+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=44100148) 
* 내가 지금까지 본 CSS 작품 중에 가장 인상적인 사례라는 생각 전달, “A Single Div”라는 오래 전 멋진 CSS 데모가 떠오른다는 의견 공유, 이번 데모가 그 기록을 새로 썼다고 표현, 직접 분석해볼 것이라는 기대감과 함께 [A Single Div 링크](https://a.singlediv.com/) 공유
  * 많은 요소들이 상호작용할 것처럼 보이지만 클릭해도 반응하지 않아 아쉬움 토로, 모바일 환경 때문인지 원래 그런지 궁금증 제기
* 정말 기발하면서도 우아한 아이디어라는 감탄 표현, 데모가 동작하는 원리에 대한 개인적인 메모 [CSS Minecraft 분석 링크](https://simonwillison.net/2025/May/26/css-minecraft/) 공유
* 상태 관리 방식을 궁금해하는 사람들을 위해 소스 코드를 살펴보니 라디오 버튼을 활용하고, HTML 안에 배치 가능한 모든 블록들이 담겨 있다는 사실 공유
  * 카메라 상태가 궁금한 사람들을 위해 설명 추가, 버튼의 :active 상태에서 애니메이션이 실행되고 이외에는 정지되어 있다는 발견 내용 소개
  * CSS 데모에서 이렇게 과감한 방식을 쓴 건 처음 본 것 같다는 놀람과 동시에 큰 호감 표현
  * 세계가 왜 9x9x9로 제한되어 있는지 궁금했는데, 46,000줄의 코드가 각 블록마다 다양한 소재(공기, 돌, 풀, 흙, 통나무, 나무, 잎, 유리)를 지정한다는 사실 확인, 이런 방식도 흥미롭다는 느낌 표현
* 이 사이트에 방문하니 갑자기 Minecraft를 다시 설치하고 싶은 마음 생김을 유쾌하게 표현
* 기술적으로 매우 인상적이라는 의견 전달, 인생의 중반부를 지나 오히려 어린 시절로 돌아간 기분으로 HTML과 CSS로 다양한 앱과 사이트를 만드는 데 재미를 느끼고 있다는 개인적인 경험 공유
* 데모 구현 방식에 대한 이해가 맞는지 질문 형식으로 정리, voxel(복셀)을 <input type="radio" />로 구현, 각 면을 <label>로 다른 CSS 클래스로 지정, 각 종류의 블록마다 voxel이 있고 한 번에 하나만 활성화, 이 <input>들이 9x9의 10단 격자 곱하기 블록 종류(약 6500개)로 배열, 전체 구조가 카메라 조작에 반응하는 CSS 클래스를 가진 <div>로 감싸져 있다는 식의 정리, 이런 접근이 매우 획기적이라는 칭찬 포함
* CSS는 480줄에 불과하고 [CSS 소스코드 링크](https://github.com/BenjaminAster/CSS-Minecraft/blob/main/main.css)와 함께 HTML이 46,022줄(3.07MB)이라는 정보 전달
* 정말 놀랍다는 반응과 함께, 리눅스 크롬에서 탭을 수백 개 열어놔도 문제 없다는 경험 공유
  * 탭이 많아져도 브라우저에서 탭을 언로드하고 상태를 디스크에 저장하기 때문에 실제로 탭을 열지 않는 한 성능에 문제 없다는 의견 추가
* 웹 기반 Minecraft는 언제 생길지 궁금증 제기
  * 예전에는 minecraft.net에서 Minecraft classic을 바로 플레이할 수 있었다는 추억 공유
  * 재기발랄하게 예전 Java Applet 시절을 언급하며 전화벨이 울린다는 농담
  * Minecraft의 초기 버전(“classic”)을 웹 브라우저에서 직접 플레이할 수 있었고, 어린 시절 실제로 즐겼던 경험 회상, 나중에 그 게임을 찾을 수 없어 꿈에서 꾼 기억인가 의심했던 에피소드 공유
* 정말 대단하다는 솔직한 감탄 표현