본문 바로가기

분류 전체보기380

Josh Comau의 사용자 지정 CSS 재설정에 대한 참고 사항 우리는 최근에 Elad Shechter와 그의 새로운 CSS 리셋에 대해 이야기했고, 그 직후 Josh Comau는 그의 블로그에 글을 올렸습니다. 지금은 CSS 리셋의 새로운 시대에 와 있습니다. CSS 리셋이 필요하지 않으신가요? 기본 스타일링에 대한 브라우저 간의 큰 차이는 많지 않으며, 스타일링을 끄고 실행할 때쯤이면 스팀롤을 사용하여 제자리에 배치했을 것입니다. 따라서 "현대적" CSS 리셋은 모든 새 프로젝트에서 유용한 작업을 수행하는 의견화된 기본 스타일 모음에 가깝습니다. 왜냐하면, 그게 바로 여러분이 원하는 방식이기 때문입니다. Josh의 선택들을 살펴본 결과, 저에게는 그렇게 보입니다: 디자인에 대해 특별히 의견이 정해져 있지 않지만, 거의 모든 프로젝트가 원하는 것이 되어 디자인을 보.. 2022. 1. 10.
새 컨테이너 쿼리 폴리필(Polyfill)만 작동합니다. 이제 컨테이너 쿼리에 대해 다음과 같이 완벽하게 작동하는 폴리 필이 있습니다. 브라우저가 컨테이너 쿼리를 지원하지 않을 때 조건부 로드합니다. CSS는 현재 규격 준수 컨테이너 쿼리 구문 코드를 포함하여 일반적인 방법으로 작성합니다. 그냥 된다. 이렇게 사용하기 쉬운 컨테이너 쿼리 폴리필과 초기 테스트 구현까지 가능한 Chrome 자체에서 제공하는 것은 매우 좋은 일입니다. Surma가 그것을 합친 것 같군. 고마워 Surma! 이것보다 앞선 cqfill이라는 Jonathan Neal의 Container Query Polyfill이 있었습니다. 공식적으로 더 이상 사용되지 않는지는 모르겠지만, 작업 및 PostCSS 처리를 위해 추가적인 비사양 CSS가 필요하기 때문에 저는 이 새로운 polyfill을 .. 2022. 1. 10.
레인보우() 사용 저는 일을 잠시 쉬고 작은 개인 프로젝트를 시작했습니다. 그 작은 프로젝트 중 하나가 감자입니다.낙서, 단편 영상, 농담 등을 보관하는 말 이것 좀 봐! 하지만 이 게시물은 제가 일을 쉬고 있거나 다른 실험이나 현장 자체에 대한 것이 아닙니다. 사람들은 내가 디자인에서 사용한 한 가지 특별한 기술을 좋아하는 것 같은데, 특히 사용자가 콘텐츠를 탐색할 때 색상으로 전환되는 배경 효과입니다. 일부는 이러한 효과가 어떻게 구현되었는지를 물었습니다(최소화된 코드를 읽는 것까지 포함). 자, 간단히 요점을 말씀드리자면, 몇 가지 맥락이 있습니다. export const useRainbowBg = () => useEffect(() => { const cb = () => { const viewportHeight = .. 2022. 1. 10.
애덤 아가일의 병든 마우스 아웃 CSS 호버 효과 코드펜 피드를 뒤지며 눈사탕을 찾고 있었는데 아담 아가일이 만든 깔끔한 CSS 호버 효과를 발견하기 전에 첫 페이지를 지나칠 필요가 없었다. 경외심에 데모를 쳐다보느라 10분이나 걸렸나 봐 뭔가 앱 같은 느낌이 들어. 배경색이 왼쪽에서 미끄러져 들어와 오른쪽을 통해 빠져나간다는 점에서 문맥상 얼마나 정확한지 알 수 있을 것 같습니다. 마우스인, 마우스아웃의 상호작용에서 예상할 수 있는 바로 그런 행동입니다. 어찌됐든 새 펜을 태워서 다시 만드는 일을 하러 갔다. 그리고 이것은 매우 복잡한 것이 아니라 적절한 상쇄와 짝을 이루는 전환과 변환을 영리하게 사용하는 것입니다. 우아하다! 사실 마우스 아웃 부분이 어떻게 작동하는지 깨닫기까지 얼마나 걸렸는지 좀 당황스럽네요. 이게 내가 태클한 방법이야 사마귀 같은.. 2022. 1. 10.
공감하는 애니메이션 웹상의 애니메이션은 종종 논쟁이 되는 주제이다. 제 생각에는, 부분적으로 나쁜 애니메이션은 눈이 멀 정도로 뻔한 반면, 잘 실행된 애니메이션은 배경으로 매끄럽게 사라지기 때문이라고 생각합니다. 애니메이션이 잘 다루어지면, 단지 약간의 개성을 더하는 것이든, 시각적 힌트를 제공하고 인지적 부하를 줄이는 것이든, 웹사이트의 수준을 높일 수 있다. 아쉽게도 접근성 대 애니메이션이라는 두 진영으로 느껴질 때가 많다. 우리가 다 가질 수 있는데 너무 아쉽다! 그것은 약간의 배려만 있으면 됩니다. 애니메이션을 만들 때 몇 가지 중요한 질문이 있습니다. 이 애니메이션은 목적이 있나요? 심각한 것처럼 들리지만 사이트의 목적이 핵심이므로 걱정하지 마십시오. 개인 포트폴리오를 만들고 있다면, 열광하세요! 하지만, 만약 누.. 2022. 1. 4.
미디어 워크플로우를 간소화하는 뉴에이지 DAM API 고속 온라인 비즈니스는 온라인 비즈니스를 홍보하기 위해 배너, 이미지, 비디오, PDF 등과 같은 여러 디지털 자산을 생산합니다. 이를 위해서는 디지털자산관리(DAM) 솔루션이 필수다. 이러한 솔루션은 디지털 자산을 중앙에서 저장, 관리, 정리, 검색 및 추적하는 데 도움이 됩니다. 중앙 자산 저장소를 갖추면 캠페인을 보다 신속하게 실행할 수 있으며, 여러 부서 간의 협업을 개선할 수 있습니다. 그러나 규모에 맞게 운영되며 여러 소스에서 유입되는 수백만 개의 디지털 자산을 처리하는 조직의 경우, 자산 관리 워크플로우의 특정 부분은 UI를 사용하여 수동으로 수행할 수 없습니다. 예를 들어 매일 올바른 폴더에 수천 개의 이미지를 업로드하려면 어떻게 해야 합니까? 아니면 내부 CMS를 통합하여 DAM의 제품 .. 2022. 1. 4.
더 적게 추가 당신이 새로운 웹사이트를 시작하려고 할 때, 가장 먼저 어떻게 생각하세요? 알고 있는 라이브러리나 프레임워크(Respect, Vue) 또는 그 위에 메타 프레임워크(Next, Nuxt)를 사용하여 시작하시겠습니까? Vite와 같은 빠른 빌드 툴을 사용하거나 웹 팩을 구성합니까? 필 호크스워스가 몇 년 전에 북마크를 달았고 지금도 여전히 사랑한다는 훌륭한 트윗이 있습니다. 웹 사이트는 너무 많이 추가하여 속도가 느려질 때까지 빠르게 시작됩니다. 혹시 프레임워크가 필요하신가요? 당신이 원하는 것을 브라우저에서 네이티브로 할 수 있나요? 프레임워크 없이 이 작업을 수행하면 다른 사용자가 이미 수행한 작업을 생성하거나 최적화할 때 귀하의 사이트가 더 가벼워지거나 장기적으로 더 무거워질 수 있습니까? 저는 개인적.. 2022. 1. 4.
웹이 더 좋고 오늘날의 웹 기술에 대한 기타 관찰 사항 저는 사실 웹사이트를 만드는 세상이 얼마나 좋아졌는지에 대한 이야기를 하고 있습니다. 저는 일부러 웹테크를 폭넓게 다루려고 합니다. 왜냐하면 모든 것이 좋아진 것 같기 때문입니다. CSS는 훌륭하지만, 웹사이트를 만드는 데 관련된 거의 모든 것, 특히 우리가 하는 일에 신경을 쓴다면 더욱 그렇다. 또한 웹 플랫폼과 그 주변 생태계에 대한 업데이트는 일반적으로 부가적이라는 생각이 듭니다. 웹이 더 단순하다고 느낀다면, 아마도 그랬을지도 모르지만, 여전히 그렇습니다. 당신이 무엇을 할 수 있든지 간에, 당신이 원한다면, 하지만, 만약 당신이 직업을 찾고 있고, 고용되기를 기대하는 것이 복잡한 기술의 바퀴 손수레를 가지고 있다면, 그것은 공정한 포인트가 될 것이다. 웹이 더 좋아지고 있다는 생각은 물속에 있는.. 2022. 1. 4.
개인화! 접근성을 보장하는 것은 웹 사이트를 더 좋게 만드는 확실한 방법입니다. 사이트에 액세스할 수 있도록 설정하면 사용자가 증가하고, 모든 사용자(접근성 요구 사항뿐만 아니라)의 환경이 개선되며, SEO 이점도 얻을 수 있습니다. 같은 맥락에서, 선호 쿼리 사용자 지정은 사용자에게 말하고 더 즐겁게 사용할 수 있는 개인화된 경험을 제공할 수 있는 또 다른 좋은 기회입니다. One preference query you can take advantage of is `prefers-reduced-motion`. This preference means that your users would prefer a web experience without flashy, quick animations. You can write.. 2021. 12. 30.
표시, 말하지 않음 웹사이트의 콘텐츠 프레젠테이션을 디자인하는 데 얼마나 많은 시간을 소비하나요? 당신이 새로운 블로그 글을 쓰거나 새로운 페이지를 만들 때, 당신은 단어만을 생각하고 있는가, 아니면 당신의 독자들이 그 단어에 어떻게 참여할 것인가? 이러한 몇 가지 팁을 염두에 두고 방문자를 위해 사이트의 콘텐츠를 더 쉽게 소화시키고 시각적으로 더 흥미롭게 만들 수 있습니다. 좋은 기본을 사용하라. 콘텐츠의 구조에 대해 생각해 보십시오. 어떻게 하면 정보의 벽을 쉽게 소화할 수 있는 덩어리로 분해할 수 있을까요? 많은 정보를 수집하고 읽고 이해하기 쉽게 만들기 위해 당신이 따를 수 있는 몇 가지 기본적인 서식 규칙이 있다. 그만둬! 제목과 하위 제목을 사용하여 관련 내용을 그룹화합니다. 웹 상의 독자들은 모든 것을 한 줄씩.. 2021. 12. 30.
Yak Shaving 및 md-block에서 마크다운을 위한 새로운 HTML Lea Verou는 마크다운을 처리하기 위한 웹 구성 요소를 만들었습니다. 이미 다른 두 명이 있었던 것 같지만, 라이트 DOM에 좋은 사용 사례라는 점에서 Lea의 의견에 동의하며(일반적으로 웹 구성 요소에 꽤 유용한 섀도 DOM과는 반대), Lea는 그렇게 한다. 출력은 HTML이므로 섀도 DOM을 다룰 필요 없이 다른 유형처럼 페이지에서 스타일링하는 것이 이상적입니다. 아직도 섀도DOM 스타일링 스토리가 형편없다고 느껴져. 그것이 어떻게 생겨났는지에 대한 이야기는 재미있고 매우 흥미롭다. 한 가지 간단한 것을 만들고 싶다면 15가지 다른 일을 해야 하고 일주일 중 대부분을 해야 합니다. The demos on the landing page for `` shoot over to CodePen usin.. 2021. 12. 30.
2021년 웹 리서치 롤업 작년에, 우리는 웹 주변에서 발표된 설문 조사, 연구 및 기타 연구 결과를 수집하기 시작했습니다. 웹에 더 많은 문서가 필요하다는 일반적인 정서, 테일윈드 CSS 던, 타입스크립트가 두 번째로 사랑받는 언어, 상위 100만 개의 사이트가 접근성에 관한 한 해체라는 등 멋진 너겟들이 있었다. 물론, 많은 다른 발견들 중에. 이제 2021년이 저물고 우리 중 많은 이들이 지난 한 해를 되돌아보는 경향이 있는 만큼, 다시 한 번 그렇게 해보자. 우리 산업(및 그와 인접한 산업)에서 어떤 트렌드가 나타나고 있는지 보는 것뿐만 아니라 이러한 트렌드가 시간이 지남에 따라 어떻게 진행되는지 지켜보는 것은 매우 흥미로운 일입니다. 다시 한 번 말하지만, 특별한 순서는 없다: HTTP 아카이브 연간 웹 상태 CSS 20.. 2021. 12. 29.
사용자가 아님을 기억하십시오. 사람들이 그들의 웹사이트를 더 좋게 만들기 위해 할 수 있는 한 가지는 당신이 모든 사용자들을 대표하지는 않는다는 것을 기억하는 것이다. 우리의 삶의 경험과 우리가 웹과 상호작용하는 방법은 모든 사람이 웹과 상호작용하는 방식을 나타내는 것이 아니다. 시간을 할애하여 주요 사용자 시장을 조사하고 이러한 사용자들이 웹 사이트나 제품이 어떻게 작동하기를 기대하는지를 이해하십시오. 접근성을 잊지 마세요. 국제화를 잊지 마세요. 그리고 당신이 모든 사용자를 대표하는 것은 아니라는 것을 잊지 마세요. 2021. 12. 29.
텍스트 관리 당신은 좋은 웹사이트를 어떻게 만드나요? 모든 사람들이 준비된 답변을 가지고 있습니다. 화려한 애니메이션! 최신 펑크록 CSS 트릭! 경사도! 일러스트! 펀치를 싸기 위한 색깔! 세상에! 그리고 물론, 이 모든 것들이 웹사이트를 더 좋게 만들 수 있다. 그러나 그 응용 프로그램이 얼마나 화려하든, 기술이 얼마나 눈부시든 간에, 훌륭한 웹사이트는 항상 훌륭한 텍스트를 요구할 것이다. 그래서, 내가 그 질문에 대해 고민할 때마다: "어떻게 하면 이 웹사이트를 더 좋게 만들 수 있을까?" 그 답은 항상 이렇다는 것을 압니다. 본문에 신경 쓰다. Without great writing, a website is harder to read, extremely difficult to navigate, and impo.. 2021. 12. 29.
사용자 지정 스크롤 막대로 자신의 물건 자랑하기 초라한 쇠스랑에 숨이 멎는 순간은 바로 이 현장에서였다. CSS-Tricks v17이 FAT CHONKY BOI와 함께 출시되었을 때, 나는 입이 딱 벌어졌다. body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - great for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the actual draggable element, the star of the show! */ } body::-webkit-s.. 2021. 12. 29.

티스토리툴바