단일 Div로 만드는 CSS 예술 작품

 (a.singlediv.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • A Single Div는 하나의 div만으로 어떤 시각 표현이 가능한지 보여주는 CSS 드로잉 실험임
  • 프로젝트는 Lynn Fisher의 작업으로 표시되며, 기간은 2014-2019로 안내됨
  • 페이지에는 GitHub, #divtober, Buy me a coffee 항목이 함께 배치되어 있음
  • 제공된 텍스트만으로는 구현 코드, 작품 목록, 제작 과정 같은 세부 정보는 확인되지 않음
  • 핵심 제약은 여러 HTML 요소가 아니라 단일 HTML 요소에 CSS 표현을 집중한다는 점임

프로젝트 성격

  • A Single Div는 “단일 div로 가능한 것”을 확인하는 CSS 드로잉 실험임
  • 페이지에는 a CSS drawing project by Lynn Fisher라는 설명이 함께 표시됨
  • 작업 기간은 2014-2019로 표시되어 있음

페이지에서 확인되는 항목

  • GitHub 항목이 있음
  • #divtober 항목이 있음
  • Buy me a coffee 항목이 있음
  • 제공된 텍스트만으로는 각 항목의 구체적인 링크 대상이나 추가 설명을 확인할 수 없음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들
  • 예전에 올라왔던 데모가 떠오름. 페이지에는 콘텐츠가 나오는데 소스 보기를 하면 0바이트였던 걸로 기억함
    아마 HTTP 헤더로 CSS를 참조할 수 있는 기능을 이용해서 HTML 안에는 CSS가 없고, 브라우저가 페이지에 자동으로 추가하는 필수 요소에 CSS가 내용을 붙이는 방식이었던 듯함
  • 2016년과 2014년에도 관련 논의가 꽤 많았고, 16일 전에도 비슷한 프로젝트 Only s가 있었음
    [0]: https://news.ycombinator.com/item?id=8229072
    [1]: https://news.ycombinator.com/item?id=12091173
    [2]: https://news.ycombinator.com/item?id=40049258
    • a single div 사이트는 가끔 흥미롭고 좋은 영감이 돼서 공유했음. 오래된 프로젝트를 현대 웹 개발 관점에서 다시 보고 토론하는 건 대체로 커뮤니티에 도움이 된다고 봄
  • CSS 아트를 하는 사람들은 늘 경이로움. 요즘 3D 그래픽 쪽은 뭐든 three.js로 들끓지만, CSS 아트가 쓰일 자리는 분명 있고 많은 사람이 그걸 잊거나 너무 어려워서 깊게 파고들지 않는 것 같음
    three.js는 큰 장면을 만들 때 훌륭하지만, 개인 웹사이트에 들어가는 작은 단일 캐릭터 장면 정도는 CSS로도 만들 수 있음. 멋진 CodePen들을 따라 만들어 보려다 주말을 통째로 쓰고도 완벽하지 않았던 적이 많음
    인터넷은 준비됐을지 몰라도, 인터넷에 연결된 대다수 기기가 WebGL을 제대로 지원한다고 보긴 어려움. 대상 사용자에 따라 다르겠지만, 자기 울타리만을 위한 사이트가 아니라 모두가 접근 가능한 웹사이트를 만드는 편이 좋음
    • CSS 아트에는 새로움이 있지만, CSS의 아주 세세한 부분까지 깊게 들어가야 해서 개발자들이 보통 선호하지 않는 듯함. 반면 three.js는 틈새 3D 아티스트/코더 커뮤니티에서 주류로 밀려 올라오고 있고, 그 자체는 좋은 일일 수 있음
      그래도 three.js가 모든 것의 완벽한 해법은 아니며, 불필요하게 부풀어 오른 웹사이트를 만들지 않도록 장단점을 보고 써야 함
    • 이 CSS 기법으로 입자 효과 버튼을 생성하는 도구를 만든 적이 있음 [0]
      기본 도형으로 작은 “이미지”를 편집하면 자동으로 CSS 코드를 내보내는 도구를 만들면 재미있겠다고 늘 생각했는데, 혹시 그런 도구를 아는 사람이 있는지 궁금함
      [0] https://bewelge.github.io/CSS-Button-Particles/ 모바일에서는 UI가 끔찍해 보이지만 버튼 효과 자체는 잘 작동할 것임
    • CSS만으로 만든 모닥불도 한번 볼 수 있음 (:
      https://megaemce.github.io/Bonfire
  • 여기서 single div가 무슨 뜻인지 모르겠음. 소스를 보다가 div 개수 세는 걸 포기했으니 말 그대로 “이 페이지에는 div가 하나뿐”이라는 뜻은 아닌 것 같은데, 그럼 뭘 의미하는 건가?
    • 작은 낙서 하나하나가 div 하나로 되어 있음. 더 정확히는 세지 않는 컨테이너 div가 있고, 세는 메인 div가 있으며, 세지 않는 ::before와 ::after로 콘텐츠를 넣는 구조임
      창의적 연습으로는 흥미롭지만, ::before와 ::after를 남용하는 건 항상 나쁜 관행이라고 봄. “깔끔한” HTML을 원한다는 집착은 어리석고, 명확한 HTML이 유지보수하기 더 쉬움
    • 목록의 각 “그림”은 단일 div에 정의된 CSS 규칙으로 렌더링됨
      보통 box-shadow를 잔뜩 이용한 묘기가 많음
  • 상단의 디자이너 Lynn Fisher 링크를 눌러 https://lynnandtonic.com/에 들어갔다가 우연히 뭔가를 발견함
    Chrome 창에 개발자 도구를 열어 둔 채 크기를 조절하고 있었는데, 조절 방향에 따라 로고 속 사람이 길을 오르내리는 걸 봤음. 정말 멋짐
    • 이건 몰랐음. 주말에 더 단순한 환경에서 따라 만들어 보고 싶어짐. 길 위를 굴러가는 공이나 지구 위를 나는 우주선 같은 식으로 만들 수 있을 듯함
    • Chrome에서만, 그리고 가로 크기 조절에서만 작동하는 것 같음
    • 배경에 Daria 관련 참조도 있음
  • CSS로 만든 Simpsons 기억하는 사람? 그것도 멋졌음
    https://pattle.github.io/simpsons-in-css/
    • 이것들도 재미있었음. 여기에 마우스 위치를 눈 움직임의 이벤트 트리거로 붙이면 꽤 그럴듯하게 소름 끼치는 Simpsons 버전이 될 것 같음
  • 모바일에서 보고 있는데, 각 그래픽이 단일 div로 만들어졌다는 뜻인가? 놀라움
    그래픽 디자인 감각도 좋음
    • 맞음, 전부 div 하나임. 기술적으로는 div 하나에 ::before와 ::after 의사 요소가 더해진 형태지만, 그래도 전부 CSS임
  • 다시 올라와서 반가움. 어렴풋이 기억은 나는데 한동안 안 봤고, 여전히 굉장히 인상적임
    • 이 사이트를 다시 보고 싶었는데 이름이 기억나지 않아서, 내 “dump link” 폴더를 더 뒤진 뒤에야 찾을 수 있었음
  • 멋지긴 한데, 작성자가 HTML을 좀 더 보기 좋게 포맷해 줬으면 좋겠음. 검사기에서는 괜찮지만 이런 건 본능적으로 소스 보기를 누르게 되는데, 공백이 제거돼 있어서 사실상 읽을 수 없음
    • HTML은 “작품”마다 div 하나가 있을 뿐이고, 흥미로운 부분은 CSS뿐임. 각 작품 뒤의 마법을 보려면 그냥 우클릭해서 요소 검사를 하는 편이 훨씬 낫다
  • 이 사이트를 정말 좋아했음
    • 가끔은 그냥 앉아서 이 작은 조각들을 하나씩 다시 만들어 보고 싶어짐
답변달기