앜스토리 | 호기심 많은 개발자의 보물창고

프론트 엔드 도구 오늘은 개발자와 디자이너를 위한 유용한 UI 개발 도구에 대해 알아보겠습니다. 1) 체크리스트 디자인 버튼, 카드, 표 등 웹사이트 요소를 디자인할 때 필요한 정보와 필수 요소 제공을 통해 웹사이트 디자인 지식을 종합하는 자리… 링크 2) 웹 그라디언트 웹사이트 디자인을 위한 아름다운 그라데이션 배경색을 합성하는 곳입니다. 링크 3) 웹프레임 아름다운 웹 애플리케이션 디자인 모음과 매주 업데이트됩니다. 링크 4) 스플라인 이 응용 프로그램은 웹 사이트용 3D 효과를 만드는 데 도움이 됩니다. 링크 5) 아무거나 입력 글꼴 선택, 글꼴 두께, 단어 간격과 같은 웹 사이트의 타이포그래피를 디자인할 수 있는 웹 응용 프로그램 링크 6) UX의 법칙 웹사이트 사용자 인터페이스를 구축할 때 디자..

Unsplash 의 Mohammad Rahmani 의 사진 일반적으로 프론트 엔드 개발자 또는 소프트웨어 개발자는 매일 해야 할 일이 많습니다. 대부분의 경우 간단한 작업에 너무 많은 시간을 할애하게 됩니다. 프로젝트 작업을 할 때 따라야 하고 준수해야 하는 일정과 마감일이 있기 때문에 그렇게 하고 싶지 않습니다. 다행히 웹에는 작업을 더 빠르고 효율적으로 완료하는 데 사용할 수 있는 많은 리소스, 도구 및 웹 사이트가 있습니다. 따라서 작업에서 생산성을 높이려면 이를 활용해야 합니다. 이 기사에서는 프론트 엔드 개발자로 사용할 수 있는 훌륭하고 유용한 웹 사이트 목록을 제공합니다. 바로 들어가 보겠습니다. 1. 카드 pCard 를 사용하면 코드를 작성하지 않고도 HTML 프로필 페이지를 쉽게 만들 수 ..

BG Photo by Scott Webb on Unsplash 프론트 엔드 개발은 현재 기술 산업에서 가장 인기 있는 직업 중 하나입니다. 뛰어난 디자인에 중점을 두고 있으며 부드러운 사용자 경험이 그 어느 때보다 중요하며 가장 작은 프로젝트에서도 디자인에 초점을 맞추는 이러한 변화는 작업을 더욱 중요하고 동시에 어렵게 만들었습니다. 누구나 처음 방문했을 때 시선을 사로잡을 수 있는 복잡한 디자인과 직관적인 사용자 인터페이스를 구현하는 것은 쉬운 일이 아닙니다. 따라서 가장 유용한 디자인과 트렌드에 대한 코드 조각을 짧은 시간 안에 생성하는 데 도움이 되는 개발 도구 목록이 있습니다. 1. 블롭메이커 Blo b maker 는 임의의 독특하고 유기적인 SVG 모양을 빠르게 만들 수 있는 무료 코드 생성 디..

The setup For this article, we’ll continue on with the grid we used in my first CSS Grid article. Then we’ll add the images at the end of the article. Here’s how our initial grid looks: Here’s the HTML: 1 2 3 4 5 6 And the CSS: .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } Note: the example also has a little bit of basic styling, which I w..

Photo by Oladimeji Odunsi on Unsplash In this blog, we will be seeing some of the incredibly useful CSS code snippets that are short yet powerful. Using these code snippets you can instantly improve the look and feel of your website. Below are the 11 CSS code snippets that are insanely useful: 1. Scroll behavior html { scroll-behavior: smooth; } This simple line of code can save you from writing..

https://nykim.work/84?category=692675 반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리 이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 프롤로그 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 nykim.work

https://nykim.work/85 반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히 nykim.work

스크롤바 숨기기 참고 문제상황 회사 장바구니를 고도화하는 도중 스크롤이 스크롤이 매우 거슬렸다. 기능은 남겨두되 보이지 않게 하고 싶었다. 해결 .target { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .target::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } 스크롤바를 숨기고 싶은 영역을 지정하고(위에서는 .target) 위와 같이 적어준다. 출처 : https://ryusm.tistory.com/115

웹은 끊임없이 진화하고 있으며 프론트엔드 개발을 보다 생산적이고 즐겁게 만드는 CSS 프레임워크도 마찬가지입니다. 그들을 사랑하든 싫어하든 CSS 프레임워크는 여기에 있습니다. 프론트엔드 경험이 없는 개발자는 이러한 프레임워크 중 일부를 사용하여 사용자 친화적인 UI를 쉽게 구현할 수 있습니다. 다른 프레임워크는 더 복잡하고 고급 사용자를 대상으로 합니다. 경험 수준에 관계없이 이러한 프레임워크를 사용하면 아름다운 레이아웃을 더 빨리 만들 수 있습니다. 이 컬렉션에서는 시장에서 가장 우수한 CSS 프레임워크를 살펴보고 필요에 따라 올바른 프레임워크를 선택할 수 있습니다. CSS 프레임워크를 사용해야 하는 이유는 무엇입니까? 목록에 들어가기 전에 CSS 프레임워크가 현대 프론트엔드 개발의 필수적인 부분인 ..