CSS는 놀라운 기술입니다. 처음 사용했을 때는 꿈도 꾸지 못했던 일이라고 생각했습니다. CSS3가 등장하면서 둥근 모서리, 그림자, 회전 등의 기술이 CSS를 전례 없는 수준으로 끌어올렸습니다. 그러나 CSS에 관해서는 너무 멀리 나아간 것일까요? 이 기사에서는 웹 디자이너의 관점에서 CSS의 실험적 적용에 대해 다시 생각해볼 수 있습니다.
CSS를 이용한 아방가르드한 실험
각 실험은 서로 다른 방법을 사용합니다. CSS 선 그리기와 같은 일부는 실제로 적용할 수 있으며, CSS로 구현된 Twitter Fail Whale 그리기와 같은 다른 실험의 목적은 단지 실험입니다. CSS가 무엇을 할 수 있는지 설명하는 것일 뿐, 이런 방식으로 수행되어야 한다는 의미는 아닙니다.
실용적이게 되자
위 사진은 순수 CSS를 사용하여 구현한 소셜미디어 네트워크 로고입니다. 놀랍지 않나요?
최근에 Faruk Ateş의 기사인 Pure CSS Icons: Make The Madness Stop을 읽었는데, 이 글에서는 이러한 접근 방식에 의문을 제기했습니다. 저자는 일부 사람들이 CSS를 디자인 도구로 사용하려고 시도하기 시작했고 빠르게 많은 모방자가 발생했다고 말했습니다. 접근 방식이 접근 가능합니까? 설계 및 개발에 통합하는 것은 쉽지 않으며 조정도 쉽지 않습니다.
완전히 CSS를 기반으로 한 위의 소셜 네트워크 로고처럼 다양한 선의 조합에 지나지 않습니다. 인상적이고 창의적이지만 이러한 로고를 만드는 데 몇 시간이 걸리기 때문에 실용적이지 않습니다. 작업을 수행하면 Photoshop에서 동일한 그림을 그리는 데 전혀 노력이 필요하지 않으며 효과가 더 좋습니다(자세히).
Ateş는 이런 방식으로 생성된 아이콘의 유지 관리도 문제라고 생각합니다. 원래 아이콘을 조정하려면 픽셀만 조정하면 되었지만 이제는 위에서 언급한 디자이너인 Nicolas Gallagher도 동시에 CSS 정의를 수정해야 합니다. CSS 로고도 이런 일을 하면 CSS가 가장 적합하지 않다고 말했습니다.
HTTP 요청을 줄이시겠습니까?
위 사진의 아이콘은 모두 CSS로 생성한 것이며, 작성자는 아이콘 40개를 25달러에 판매하고 있습니다. 이러한 아이콘은 매우 아름답게 디자인되었다는 점을 인정해야 합니다. 이러한 CSS를 디자인한 작성자의 원래 의도는 해당 웹 사이트에 대한 HTTP 요청 수를 줄이는 것입니다. 왜냐하면 이러한 아이콘에는 추가 이미지 파일 요청이 필요하지 않기 때문입니다. 그러나 작은 아이콘 파일로 가져온 HTTP 요청이 실제로 언급할 가치가 있습니까? 게다가 CSS Sprite 기술을 사용하면 이러한 아이콘을 동일한 이미지에 배치하고 CSS 위치 지정으로 표시할 수 있습니다. 묻는 것만으로도 충분하다. 더욱이 이러한 CSS 버전의 아이콘이 얼마나 많은 대역폭을 줄일 수 있는지 정말 의심스럽습니다.
의미론의 정신으로
특정 시각적 요구 사항을 충족하기 위해 때때로 DIV 또는 SPAN과 같은 추가 태그를 사용한다는 점을 인정해야 하는데 이는 매우 의미가 없습니다. 그러나 CSS 그리기는 훨씬 덜 의미적입니다. CSS의 실제 임무는 콘텐츠 자체를 만드는 것이 아니라 웹 페이지의 콘텐츠를 수정하는 것입니다. 웹 페이지의 그래픽 자체는 콘텐츠 범주에 속하므로 CSS로 생성해서는 안 됩니다.
이 기사의 원본 출처: blog.echoenduring.com 우리는 CSS를 너무 멀리 취하고 있습니까? (원저자: Matt Ward)
중국어 발췌 출처: Ruishang Enterprise CMS 웹사이트 콘텐츠 관리 시스템 공식 웹사이트