# CSS Zen Garden 프로젝트

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20563](https://news.hada.io/topic?id=20563)
- GeekNews Markdown: [https://news.hada.io/topic/20563.md](https://news.hada.io/topic/20563.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-04-28T09:38:35+09:00
- Updated: 2025-04-28T09:38:35+09:00
- Original source: [csszengarden.com](https://csszengarden.com/)
- Points: 2
- Comments: 1

## Topic Body

- **CSS Zen Garden**은 CSS 기반 디자인의 아름다움을 보여주는 프로젝트임
- HTML은 동일하게 유지되며, 외부 CSS 파일만 변경하여 다양한 디자인을 경험할 수 있음
- 참여자들은 CSS를 통해 웹 디자인의 힘을 보여주고, 영감을 주며, 학습 자료로 활용할 수 있음
- CSS 1 & 2를 주로 사용하며, CSS 3 & 4는 제한적으로 사용해야 함
- 제출된 디자인은 다양한 브라우저에서 일관된 결과를 보여야 하며, 최소한 IE9+ 및 최신 브라우저에서 작동해야 함

---

### CSS Zen Garden의 중요성

- **CSS Zen Garden**은 CSS의 힘을 보여주고, 디자이너와 개발자에게 영감을 주기 위한 프로젝트임
- HTML은 동일하게 유지되며, 외부 CSS 파일만 변경하여 다양한 디자인을 경험할 수 있음
- 이 프로젝트는 CSS의 가능성을 보여주고, 웹 디자인의 아름다움을 강조함

### 참여 방법

- 강력한 시각적 디자인과 CSS 기술이 필요하며, 초보자도 예제 파일을 통해 시작할 수 있음
- 스타일 시트를 자유롭게 수정할 수 있지만, HTML은 변경할 수 없음
- 완성된 작품은 웹 서버에 업로드하고 링크를 제출해야 함

### 참여의 이점

- 인지도 상승, 영감 제공, CSS의 놀라운 가능성을 보여주는 자료로 활용 가능함
- 웹 디자이너와 개발자에게 영감을 주고, 학습 자료로 활용할 수 있는 사이트임

### 요구 사항

- 주로 CSS 1 & 2를 사용하며, CSS 3 & 4는 제한적으로 사용해야 함
- 다양한 브라우저에서 일관된 결과를 보여야 하며, 최소한 IE9+ 및 최신 브라우저에서 작동해야 함
- 독창적인 작품을 제출해야 하며, 저작권을 존중해야 함

### 저작권 및 라이선스

- 제출된 그래픽은 저작권을 유지하며, CSS는 Creative Commons 라이선스로 제공해야 함
- 다른 사람들이 학습할 수 있도록 CSS를 공유해야 함

## Comments



### Comment 37894

- Author: neo
- Created: 2025-04-28T09:38:37+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43809484) 
* CSS가 등장하기 전, 웹 개발자들은 테이블 요소를 남용하여 그리드를 만들고 이미지를 잘라 테이블에 배치하는 방식으로 레이아웃을 구현했음
  - CSS에 대한 반발이 있었고, 많은 개발자들이 CSS를 배우기를 거부했음
  - CSS는 "지루하고 박스 같은" 디자인만 가능하다는 오해가 있었음
  - Dave Shea가 CSS Zen Garden을 통해 CSS의 가능성을 보여주며 이러한 오해를 불식시켰음
  - CSS로 멋진 디자인을 만들 수 있음을 증명하여 논쟁을 종결시켰음

* 이 사이트는 오래되었지만 긍정적인 의미에서 좋았음
  - 2000년대 초, Microsoft ASP.NET에서 벗어나 Linux에서 앱을 개발하게 만든 계기가 되었음
  - Alex Russell이 Dojo JS를 통해 새로운 정보를 제공하며 기술 뉴스의 중요성을 일깨워줌
  - Web.py, HTML, JS, CSS로 구성된 툴킷을 사용했으며, 이후 jQuery, Backbone, Underscore, React, TS 등이 등장했음

* CSS Zen Garden의 주요 포인트는 의미 있는 HTML을 최대한 활용하여 프레젠테이션과 콘텐츠를 완전히 독립적으로 운영할 수 있다는 것이었음
  - CSS의 한계 내에서 디자인을 구현할 수 있었음
  - 스타일을 변경하려면 DOM을 직접 수정해야 하는 경우가 많았음
  - HTML과 Javascript 수준에서 프레젠테이션과 콘텐츠 구조 결정을 혼합해야 했음

* Zen Garden과 Eric Meyer를 통해 CSS를 배운 사람으로서, Tailwind 같은 현대 CSS 도구는 반패턴처럼 보임

* Tailwind와 CSS-in-JS의 암흑 시대에 빛을 비추는 존재였음
  - 20년 전 CSS Zen Garden의 중요성을 깨닫기 어려움

* 오래된 것이지만 좋은 것임
  - 저소득 고등학생들에게 웹 디자인을 가르치는 데 기초가 되었음
  - 학생들이 웹 디자인 대회에서 CSS를 설명해야 했고, 많은 학생들이 데스크탑 컴퓨터를 수상했음
  - Dave Shea, Eric Meyer, Andy Budd 등에게 질문을 보내 도움을 받았음

* 두 가지 디자인을 제출했으며, 여전히 CSS 재사용 요청을 받음

* 이 사이트는 과거에 큰 영향을 미쳤음
  - 동일한 HTML 콘텐츠에 CSS와 이미지를 제출할 수 있었음
  - 인상 깊었던 디자인 예시들이 있었음

* 과거의 추억... CSS Zen Garden을 사랑했지만, 웹사이트의 주요 목적이 문서를 제공하는 것이었던 시절의 철학이었음
  - 미디어가 풍부한 세계가 이 비전을 뒤로 하게 되었음

* CSS Zen Garden을 HN에서 보게 되어 기쁨
  - Tailwind와 같은 CSS "프레임워크"에 대한 불만이 있음
  - Tailwind는 CSS의 작동 방식을 배우지 않고도 "충분히 괜찮은" 결과를 얻을 수 있게 해줌
  - HTML이 CSS 클래스가 콘텐츠보다 많은 상태가 됨
  - 깊이와 숙달이 선택 사항으로 여겨지는 경향이 있음