편물

CLS(누적 레이아웃 이동) 문제를 해결하는 방법

Google의 Core Web Vitals 이니셔티브는 SEO 및 웹 성능 세계를 폭풍으로 몰아넣었으며 많은 사이트에서 순위 요소를 최대화하기 위해 페이지 경험을 최적화하느라 분주합니다. 누적 레이아웃 이동 메트릭은 많은 사이트에 문제를 일으키므로 해당 메트릭에 대한 문제를 해결하는 방법을 살펴보겠습니다.

더 읽어보기

온라인 상점의 성능 향상(사례 연구)

Google에서 좋은 성능 점수를 얻는 것은 모든 웹사이트에서 어렵지만 온라인 상점에서는 훨씬 더 어렵습니다. 우리는 모바일의 경우에도 여러 점수를 획득했습니다. 다음은 우리가 한 방법입니다.

더 읽어보기

WYSIWYG 편집기에 주석 시스템 추가하기

이 기사에서는 사용자가 문서 내에서 텍스트를 선택하고 그에 대한 주석을 공유할 수 있도록 하는 WYSIWYG 편집기용 주석 시스템을 구축하기 위해 첫 번째 기사에서 구축된 기본 WYSIWYG 편집기를 재사용할 것입니다. 파헤쳐보자!

더 읽어보기

프런트 엔드 개발자를 위한 유용한 VS 코드 확장

웹 개발자를 위한 유용한 Visual Studio Code 확장을 만나보세요. 속도 저하와 좌절을 최소화하고 그 과정에서 개발자의 워크플로를 향상시키는 작은 도우미입니다. 자동 로그 메시지, 자동 코드 형식 지정, 파일 유틸리티, 파일 레이블, 코드 스니펫, 하이라이트 브래킷, 태그, 들여쓰기 및 작업 공간, 온보딩 및 원격 SSH를 사용합니다.

더 읽어보기

Editor X로 강력한 반응형 웹사이트를 구축하고 실행하는 방법

웹 빌더는 오랫동안 사용되어 왔지만 최근에 와서야 전문적인 용도로 실용적이 되었습니다. 디자인과 코드 사이의 격차를 줄이는 것이 많은 기업의 핵심이 되었으며 우리는 이 약속을 이행하는 도구의 물결을 목격하고 있습니다.

더 읽어보기

접근 가능한 SVG: 스크린 리더 사용자를 위한 완벽한 패턴

OS, 브라우저, 스크린 리더의 다양한 조합을 비교할 때 피해야 하는 SVG 패턴과 가장 포괄적인 패턴을 알아보세요.

더 읽어보기

Git으로 실수를 되돌리기 위한 가이드(2부)

실수. 이 잔인한 악당들은 아름다운 소프트웨어 개발 세계를 멈추지 않습니다. 하지만 실수를 피할 수는 없지만, 실수를 되돌리는 법은 배울 수 있습니다! 이 게시물은 Git을 사용하는 일상적인 작업에 적합한 도구를 보여줍니다.

더 읽어보기

글꼴 로딩 영향을 줄이는 새로운 방법: CSS 글꼴 설명자

웹 글꼴은 웹 성능에 좋지 않은 경우가 많으며 글꼴 로드 전략 중 어느 것도 이를 해결하는 데 특히 효과적이지 않습니다. 다가오는 글꼴 옵션은 마침내 대체 글꼴을 최종 글꼴에 더 쉽게 정렬할 수 있도록 하는 약속을 이행할 수 있습니다.

더 읽어보기

CSS 컨테이너 쿼리: 사용 사례 및 마이그레이션 전략

CSS 컨테이너 쿼리는 미디어 쿼리를 대상 요소 자체에 더 가깝게 가져오고 거의 모든 주어진 컨테이너 또는 레이아웃에 적응할 수 있도록 합니다. 이 기사에서는 CSS 컨테이너 쿼리 기본 사항과 오늘날 점진적 향상 또는 폴리필과 함께 이를 사용하는 방법을 다룰 것입니다.

더 읽어보기

서식 있는 텍스트 편집기 만들기(WYSIWYG)

서식 있는 텍스트, 이미지, 링크 및 워드 프로세싱 앱의 미묘한 기능을 지원하는 서식 있는 텍스트 WYSIWYG 편집기를 만들어 보겠습니다. SlateJS를 사용하여 편집기의 셸을 빌드한 다음 도구 모음 및 사용자 지정 구성을 추가합니다.

더 읽어보기