ux 미디어 쿼리 CSS, 반응형 디자인 및 CSS 그리드 미디어 쿼리 미디어 쿼리와 미디어 규칙에 대해 이야기해 봅시다. media at 규칙은 하나 이상의 미디어 쿼리 결과를 기반으로 요소의 스타일을 지정하는 데 사용할 수 있습니다. 평신도의 용어로 미디어 쿼리는 브라우저가 내가 어떤 종류의 장치를 사용하고 있으며 그 특성이 무엇인지 확인하는 것입니다. 그런 다음 사용자 장치의 특성이 개발자가 설정한 특정 기준과 일치하는 경우 웹 페이지의 스타일을 변경할 수... designwebdevuxcss Appium에서 UIAutomatorViewer를 사용하여 요소를 검사하거나 찾는 방법: 자습서 이러한 요소는 UIAutomatorViewer와 같은 GUI(그래픽 사용자 인터페이스) 도구를 사용하여 찾을 수 있으며 사용자 상호 작용과 관련된 원하는 시나리오로 테스트할 수 있습니다. 이 기사에서는 Appium에서 UIAutomatorViewer를 사용하여 UI 요소를 검사하거나 찾는 다양한 방법에 대해 설명합니다. 시작하기 전에 UI 요소를 정의하는 데 사용되는 다양한 방법을 살펴보겠습... uxuiweeklytestingtutorial Hotwire + Tailwind: Javascript 없이 페이드 인 이 문서에서는 추가 Javascript 없이 로드된 터보 프레임을 페이드 인하는 방법에 대해 설명합니다. 면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다. 아이디어 및 설정 때로는 콘텐츠를 터보 프레임에 로드하는 것만으로도 다소 불안정하게 느껴질 수 있습니다. 간단한 페이드 인을 추가하면 기적을 일으키고 앱을 더 부드럽고 빠르게 만들 수 있습니다. 이... uxhotwiretailwindcsstutorial HTML 및 CSS를 사용하여 시각적으로 간격을 둔 전화 및 IBAN 번호 사람이 읽을 수 있고 기계가 읽을 수 있어야 하는 숫자를 표시하는 방법은 무엇입니까? 그러나 이 사람이 읽을 수 있는 4개의 블록 표기법은 HTML 양식 필드 유효성 검사 또는 종종 공백을 허용하지 않는 유사한 JavaScript 평가를 사용하는 입력 필드에 서식이 지정된 은행 코드를 복사하여 붙여넣을 때 문제를 일으킵니다. 우리는 tel: url로 연결된 정확한 국제 기계 판독 가능 전화번... uxcsswebdev React Context를 사용하는 RDT 모바일 래퍼 때로는 데스크탑에서 이를 달성하는 것이 복잡하지만 실행 가능하지만 모바일 측면에서는 훨씬 더 복잡할 수 있으므로 이제 이 작업을 쉽게 하기 위해 테이블 래퍼를 공유할 것입니다. 이 래퍼가 무엇을 해결하는지 설명하기 위해 사용된 모든 코드와 함께 및 을 제공할 것입니다. Table 구성 요소는 기본적으로 앱이 여러 테이블을 사용해야 하는 경우 스타일을 공유하기 위해 생성된 일반 래퍼입니다. E... uxjavascriptreactdesign Shopify 방문 페이지 복제 - 자습서 그리고 이것을 만든 이유는 UI의 첫 번째 규칙을 보여주기 위해서입니다. 당신에게 깊은 인상을 남긴 당신이 사용한 모든 앱/웹사이트를 생각해 보십시오. A Simple & Consistent 다음과 같은 이유로 UI가 좋습니다. 압도적이지 않습니다(신규 사용자에게 무서울 수 있음) 중요한 부분을 더 쉽게 볼 수 있습니다 자, 이제 이것이 저에게 매력적인 웹 사이트인(또는 오히려 매력적인) 이... uxhtmlcssdesign Hotwire + Tailwind: 자바스크립트가 없는 스피너 이 문서에서는 추가 Javascript 없이 터보 프레임을 로드하는 동안 스피너를 표시하는 방법에 대해 설명합니다. 면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다. 아이디어 및 설정 설정은 매우 간단합니다. 내부에 스피너가 있는 터보 프레임일 뿐입니다. 그러나 프레임이 로드될 때 <turbo-frame id="loadable" busy="" aria... tailwindcsshotwireuxtutorial 웹 사이트 빌더의 양식 과 같은 본격적인 웹 사이트 빌더에서 과 같은 페이지 빌더, 과 같은 Link in Bio 빌더에 이르기까지 광범위한 웹 사이트 빌더를 살펴보면 네 가지 주요 사용자 양식과 조합을 관찰할 수 있습니다. 명령으로 블록을 검색하는 사용자 메타포를 사용하는 은 블록 캔버스에 입력하는 것을 기반으로 합니다. 양식을 작성할 때 왼쪽에는 양식이 표시되고 오른쪽에는 페이지 미리보기가 표시됩니다. 은 나란... webdevwebsiteuxwebsitebuilder 4월의 4가지 Short Frontend 팁 🤦♂️열쇠를 사용할 수 없어요. UI와 상호 작용하는 단일 방법으로 키보드를 사용해야 하는 사람들을 위해 버튼을 개선하는 방법에 대해 생각해 봅시다🤔 스크린 리더를 사용하는 사람들이 많은 앱에 더 쉽게 액세스할 수 있습니다. 😐 버튼이 아닌 버튼, 즉 사용하지 않는 버튼을 마주하게 되었고 대신 역할="버튼"이 사용되었습니다. 🆘 그들은 인터페이스를 전혀 사용할 수 없습니다 😩 이것이 사람들... uxhtmla11ycss TEXT로 UX 만들기(마크다운) ;) 한동안 가지고 놀고 있습니다. 저는 UX 담당자가 아닌 코더/프로그래머이지만 매우 자주 일부 UX 화면을 만들어야 합니다. 또한 많은 분들이 Figma 등과 같은 도구에서 UX 화면을 매우 빠르게 만들고 있다는 것을 알고 있지만 와이어프레임을 만들고 모든 것을 정렬하여 공유하기 위해 내보내는 등의 작업에는 여전히 시간이 걸립니다. 나는 Markdown의 열렬한 팬이므로 Markdown을... sideprojectsmarkdownuxcomputerscience PNG 이미지에서 다이어그램을 렌더링하는 JavaScript 다이어그램 편집기(오픈 소스) dgrm.net은 PNG 이미지에서 다이어그램을 열 수 있습니다. dgrm.net - 지식 지도 도구로 변환할 수 있는 다이어그램 편집기입니다. 오픈 소스. 프로젝트에서 사용할 소스 코드를 첨부합니다. 필요한 경우 편집할 수 있는 다이어그램 그림이 있으면 더 편리합니다. 그림 1을 보면 스테가노그래피 또는 이미지 인식이 사용되고 있다고 가정할 수 있습니다. dgrm.net은 다이어그램 데이터... programminguxjavascriptwebdev SvelteKit에 사용자 기본 설정 저장 이것은 SvelteKit에서 사용자 기본 설정을 저장하는 방법에 대한 빠른 자습서입니다. 여기에는 두 가지 방법이 있습니다. 첫 번째는 인증 시스템을 구현하는 것입니다. 그러나 그것은 과잉 일 수 있으므로 다른 방법은 로컬에 저장하는 것입니다. 그것으로 가자. 그래서 이런 식으로... (코드를 단순화하기 위해 패키지를 사용하겠습니다) 음, 쉬웠어요. 그러나 그것을 표시하고 싶을 때 작은 문제... sveltejavascriptuxtutorial 부드러운 스크롤 효과를 만드는 간단한 CSS 트릭 부드러운 스크롤 효과를 얻기 위해 다른 jquery 라이브러리를 사용하거나 일반 바닐라 자바스크립트를 작성합니다. jQuery 구문: 저는 CSS를 좋아합니다. CSS 속성만 사용하여 이러한 효과를 얻을 수 있는지 궁금합니다. 그런 다음 이 기본 CSS 기능scroll-behavior이 발생합니다. CSS의 scroll-behavior 속성을 사용하면 사용자가 스크롤 상자 내에서 고정된 위치... uxdesignhtmlwebdev CSS flexbox로 해결한 웹 접근성의 실용 사례 그리고 저는 에서 동료와 함께 일하고 있었습니다. 우리 중 많은 사람들이 적어도 일주일에 한 번은 가입/로그인하고 저는 개인적으로 키보드만 사용하여 HTML 양식을 채우는 습관이 있습니다. 그리고 거의 모든 가입은 이용 약관에 동의하라는 메시지를 표시합니다. 거의 모든 경우에 다음과 같이 보입니다. 따라서 입력/버튼/확인란 사이를 탐색하려면 탭 키를 사용하여 키보드만 사용하여 탐색하고 양식을... uxa11ycsswebdev 마이크로인터랙션: 암호 확인 애니메이션 사용자에게 어떤 일이 발생했거나 발생하고 있음을 알려주는 작은 애니메이션입니다. 사용자 인터페이스(UI)에서 사용자 경험(UX)을 개선하는 좋은 방법입니다. 오늘 우리는 비밀번호 유효성 검사기를 분해하기 위해 Instagram에서 협업한 에서 영감을 받아 애니메이션을 제작할 것입니다. 여기서 버튼 옆에 있는 텍스트 상자를 볼 수 있습니다. 클릭하면 요소가 채워지고 유효성 검사 메시지가 나타납... tutorialuxbeginnerswebdev 초보자를 위한 5가지 멋진 CSS 트릭 그렇긴 하지만, 매우 유용함에도 불구하고 거의 사용되지 않는 기능이 꽤 많이 있습니다. 이 기사는 기술을 한 단계 끌어올리거나 워크플로를 단순화할 수 있는 5가지 멋진 CSS 트릭을 간략하게 편집한 것입니다. CSS에서 변수를 만드는 구문은 다음과 같습니다. 값은 10px , 20rem , #ffffff , box-shadow: 0px 0px 0px 0px rgb(0,0,0) 등을 저장할 수... webdevcssuxhtml SwiftUI에서 YouTube와 유사한 필터링 구현 SwiftUI에는 .pickerStyle(.segmented) 또는 .pickerStyle(.wheel) 와 같은 몇 가지 기본 디자인과 함께 제공되는 을 사용하는 자체 라디오 버튼 구현이 있습니다. 선택기는 필터링 기능을 구현하는 데 유용할 수 있지만 사용자 정의 디자인 및 동작(예: YouTube와 같은 디자인 및 동작)을 원하는 경우에는 어떻게 해야 할까요? YouTube와 유사한 필터... uxprogrammingiosswift 전에 볼 수 없었던 멋진 카드 호버 효과. I suggest you to see the result in new full view window. click on the top right most button for new window view. 이제 코딩을 시작해 보겠습니다. css만으로 만들 것이므로 index.html과 style.css 파일을 2개 만들고 기본 html 구조 코드를 index.html에 작성하고 css 파일도 링... uiweeklyuxcsswebdev 이 현대적인 웹사이트를 본 적이 없습니다. I suggest you so see this effect in new window mode. Click on the top right most button to view this in new window mode. 이 웹사이트 애니메이션을 만들기 위해 HTML, CSS 및 몇 줄의 Javascript를 사용하므로 시작하겠습니다. 이제 body 태그에서 div를 만들고 클래스 메일을 제공합니... uiweeklyuxcsswebdev UX 분석을 위해 Google Optimize 및 Next.js를 사용한 다변량 테스트(MVT) Google 최적화 서버 측에 대한 추가 세부 정보 이 가이드에서는 Next.js와 같은 서버 측 앱에서 Google 최적화 MVT(다변량 테스트)를 구현하고 데이터를 Google 애널리틱스 4로 전송하는 방법을 알아봅니다. Google 태그 관리자 Google 최적화 도구 Next.js 앱 이미 next.js 앱이 있는 경우 _document.js라는 새 파일을 만들고 <Head> 및 <b... mvtuxoptimizenextjs
미디어 쿼리 CSS, 반응형 디자인 및 CSS 그리드 미디어 쿼리 미디어 쿼리와 미디어 규칙에 대해 이야기해 봅시다. media at 규칙은 하나 이상의 미디어 쿼리 결과를 기반으로 요소의 스타일을 지정하는 데 사용할 수 있습니다. 평신도의 용어로 미디어 쿼리는 브라우저가 내가 어떤 종류의 장치를 사용하고 있으며 그 특성이 무엇인지 확인하는 것입니다. 그런 다음 사용자 장치의 특성이 개발자가 설정한 특정 기준과 일치하는 경우 웹 페이지의 스타일을 변경할 수... designwebdevuxcss Appium에서 UIAutomatorViewer를 사용하여 요소를 검사하거나 찾는 방법: 자습서 이러한 요소는 UIAutomatorViewer와 같은 GUI(그래픽 사용자 인터페이스) 도구를 사용하여 찾을 수 있으며 사용자 상호 작용과 관련된 원하는 시나리오로 테스트할 수 있습니다. 이 기사에서는 Appium에서 UIAutomatorViewer를 사용하여 UI 요소를 검사하거나 찾는 다양한 방법에 대해 설명합니다. 시작하기 전에 UI 요소를 정의하는 데 사용되는 다양한 방법을 살펴보겠습... uxuiweeklytestingtutorial Hotwire + Tailwind: Javascript 없이 페이드 인 이 문서에서는 추가 Javascript 없이 로드된 터보 프레임을 페이드 인하는 방법에 대해 설명합니다. 면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다. 아이디어 및 설정 때로는 콘텐츠를 터보 프레임에 로드하는 것만으로도 다소 불안정하게 느껴질 수 있습니다. 간단한 페이드 인을 추가하면 기적을 일으키고 앱을 더 부드럽고 빠르게 만들 수 있습니다. 이... uxhotwiretailwindcsstutorial HTML 및 CSS를 사용하여 시각적으로 간격을 둔 전화 및 IBAN 번호 사람이 읽을 수 있고 기계가 읽을 수 있어야 하는 숫자를 표시하는 방법은 무엇입니까? 그러나 이 사람이 읽을 수 있는 4개의 블록 표기법은 HTML 양식 필드 유효성 검사 또는 종종 공백을 허용하지 않는 유사한 JavaScript 평가를 사용하는 입력 필드에 서식이 지정된 은행 코드를 복사하여 붙여넣을 때 문제를 일으킵니다. 우리는 tel: url로 연결된 정확한 국제 기계 판독 가능 전화번... uxcsswebdev React Context를 사용하는 RDT 모바일 래퍼 때로는 데스크탑에서 이를 달성하는 것이 복잡하지만 실행 가능하지만 모바일 측면에서는 훨씬 더 복잡할 수 있으므로 이제 이 작업을 쉽게 하기 위해 테이블 래퍼를 공유할 것입니다. 이 래퍼가 무엇을 해결하는지 설명하기 위해 사용된 모든 코드와 함께 및 을 제공할 것입니다. Table 구성 요소는 기본적으로 앱이 여러 테이블을 사용해야 하는 경우 스타일을 공유하기 위해 생성된 일반 래퍼입니다. E... uxjavascriptreactdesign Shopify 방문 페이지 복제 - 자습서 그리고 이것을 만든 이유는 UI의 첫 번째 규칙을 보여주기 위해서입니다. 당신에게 깊은 인상을 남긴 당신이 사용한 모든 앱/웹사이트를 생각해 보십시오. A Simple & Consistent 다음과 같은 이유로 UI가 좋습니다. 압도적이지 않습니다(신규 사용자에게 무서울 수 있음) 중요한 부분을 더 쉽게 볼 수 있습니다 자, 이제 이것이 저에게 매력적인 웹 사이트인(또는 오히려 매력적인) 이... uxhtmlcssdesign Hotwire + Tailwind: 자바스크립트가 없는 스피너 이 문서에서는 추가 Javascript 없이 터보 프레임을 로드하는 동안 스피너를 표시하는 방법에 대해 설명합니다. 면책 조항 - 설정에는 기술적으로 Javascript인 Tailwind 구성이 포함됩니다. 아이디어 및 설정 설정은 매우 간단합니다. 내부에 스피너가 있는 터보 프레임일 뿐입니다. 그러나 프레임이 로드될 때 <turbo-frame id="loadable" busy="" aria... tailwindcsshotwireuxtutorial 웹 사이트 빌더의 양식 과 같은 본격적인 웹 사이트 빌더에서 과 같은 페이지 빌더, 과 같은 Link in Bio 빌더에 이르기까지 광범위한 웹 사이트 빌더를 살펴보면 네 가지 주요 사용자 양식과 조합을 관찰할 수 있습니다. 명령으로 블록을 검색하는 사용자 메타포를 사용하는 은 블록 캔버스에 입력하는 것을 기반으로 합니다. 양식을 작성할 때 왼쪽에는 양식이 표시되고 오른쪽에는 페이지 미리보기가 표시됩니다. 은 나란... webdevwebsiteuxwebsitebuilder 4월의 4가지 Short Frontend 팁 🤦♂️열쇠를 사용할 수 없어요. UI와 상호 작용하는 단일 방법으로 키보드를 사용해야 하는 사람들을 위해 버튼을 개선하는 방법에 대해 생각해 봅시다🤔 스크린 리더를 사용하는 사람들이 많은 앱에 더 쉽게 액세스할 수 있습니다. 😐 버튼이 아닌 버튼, 즉 사용하지 않는 버튼을 마주하게 되었고 대신 역할="버튼"이 사용되었습니다. 🆘 그들은 인터페이스를 전혀 사용할 수 없습니다 😩 이것이 사람들... uxhtmla11ycss TEXT로 UX 만들기(마크다운) ;) 한동안 가지고 놀고 있습니다. 저는 UX 담당자가 아닌 코더/프로그래머이지만 매우 자주 일부 UX 화면을 만들어야 합니다. 또한 많은 분들이 Figma 등과 같은 도구에서 UX 화면을 매우 빠르게 만들고 있다는 것을 알고 있지만 와이어프레임을 만들고 모든 것을 정렬하여 공유하기 위해 내보내는 등의 작업에는 여전히 시간이 걸립니다. 나는 Markdown의 열렬한 팬이므로 Markdown을... sideprojectsmarkdownuxcomputerscience PNG 이미지에서 다이어그램을 렌더링하는 JavaScript 다이어그램 편집기(오픈 소스) dgrm.net은 PNG 이미지에서 다이어그램을 열 수 있습니다. dgrm.net - 지식 지도 도구로 변환할 수 있는 다이어그램 편집기입니다. 오픈 소스. 프로젝트에서 사용할 소스 코드를 첨부합니다. 필요한 경우 편집할 수 있는 다이어그램 그림이 있으면 더 편리합니다. 그림 1을 보면 스테가노그래피 또는 이미지 인식이 사용되고 있다고 가정할 수 있습니다. dgrm.net은 다이어그램 데이터... programminguxjavascriptwebdev SvelteKit에 사용자 기본 설정 저장 이것은 SvelteKit에서 사용자 기본 설정을 저장하는 방법에 대한 빠른 자습서입니다. 여기에는 두 가지 방법이 있습니다. 첫 번째는 인증 시스템을 구현하는 것입니다. 그러나 그것은 과잉 일 수 있으므로 다른 방법은 로컬에 저장하는 것입니다. 그것으로 가자. 그래서 이런 식으로... (코드를 단순화하기 위해 패키지를 사용하겠습니다) 음, 쉬웠어요. 그러나 그것을 표시하고 싶을 때 작은 문제... sveltejavascriptuxtutorial 부드러운 스크롤 효과를 만드는 간단한 CSS 트릭 부드러운 스크롤 효과를 얻기 위해 다른 jquery 라이브러리를 사용하거나 일반 바닐라 자바스크립트를 작성합니다. jQuery 구문: 저는 CSS를 좋아합니다. CSS 속성만 사용하여 이러한 효과를 얻을 수 있는지 궁금합니다. 그런 다음 이 기본 CSS 기능scroll-behavior이 발생합니다. CSS의 scroll-behavior 속성을 사용하면 사용자가 스크롤 상자 내에서 고정된 위치... uxdesignhtmlwebdev CSS flexbox로 해결한 웹 접근성의 실용 사례 그리고 저는 에서 동료와 함께 일하고 있었습니다. 우리 중 많은 사람들이 적어도 일주일에 한 번은 가입/로그인하고 저는 개인적으로 키보드만 사용하여 HTML 양식을 채우는 습관이 있습니다. 그리고 거의 모든 가입은 이용 약관에 동의하라는 메시지를 표시합니다. 거의 모든 경우에 다음과 같이 보입니다. 따라서 입력/버튼/확인란 사이를 탐색하려면 탭 키를 사용하여 키보드만 사용하여 탐색하고 양식을... uxa11ycsswebdev 마이크로인터랙션: 암호 확인 애니메이션 사용자에게 어떤 일이 발생했거나 발생하고 있음을 알려주는 작은 애니메이션입니다. 사용자 인터페이스(UI)에서 사용자 경험(UX)을 개선하는 좋은 방법입니다. 오늘 우리는 비밀번호 유효성 검사기를 분해하기 위해 Instagram에서 협업한 에서 영감을 받아 애니메이션을 제작할 것입니다. 여기서 버튼 옆에 있는 텍스트 상자를 볼 수 있습니다. 클릭하면 요소가 채워지고 유효성 검사 메시지가 나타납... tutorialuxbeginnerswebdev 초보자를 위한 5가지 멋진 CSS 트릭 그렇긴 하지만, 매우 유용함에도 불구하고 거의 사용되지 않는 기능이 꽤 많이 있습니다. 이 기사는 기술을 한 단계 끌어올리거나 워크플로를 단순화할 수 있는 5가지 멋진 CSS 트릭을 간략하게 편집한 것입니다. CSS에서 변수를 만드는 구문은 다음과 같습니다. 값은 10px , 20rem , #ffffff , box-shadow: 0px 0px 0px 0px rgb(0,0,0) 등을 저장할 수... webdevcssuxhtml SwiftUI에서 YouTube와 유사한 필터링 구현 SwiftUI에는 .pickerStyle(.segmented) 또는 .pickerStyle(.wheel) 와 같은 몇 가지 기본 디자인과 함께 제공되는 을 사용하는 자체 라디오 버튼 구현이 있습니다. 선택기는 필터링 기능을 구현하는 데 유용할 수 있지만 사용자 정의 디자인 및 동작(예: YouTube와 같은 디자인 및 동작)을 원하는 경우에는 어떻게 해야 할까요? YouTube와 유사한 필터... uxprogrammingiosswift 전에 볼 수 없었던 멋진 카드 호버 효과. I suggest you to see the result in new full view window. click on the top right most button for new window view. 이제 코딩을 시작해 보겠습니다. css만으로 만들 것이므로 index.html과 style.css 파일을 2개 만들고 기본 html 구조 코드를 index.html에 작성하고 css 파일도 링... uiweeklyuxcsswebdev 이 현대적인 웹사이트를 본 적이 없습니다. I suggest you so see this effect in new window mode. Click on the top right most button to view this in new window mode. 이 웹사이트 애니메이션을 만들기 위해 HTML, CSS 및 몇 줄의 Javascript를 사용하므로 시작하겠습니다. 이제 body 태그에서 div를 만들고 클래스 메일을 제공합니... uiweeklyuxcsswebdev UX 분석을 위해 Google Optimize 및 Next.js를 사용한 다변량 테스트(MVT) Google 최적화 서버 측에 대한 추가 세부 정보 이 가이드에서는 Next.js와 같은 서버 측 앱에서 Google 최적화 MVT(다변량 테스트)를 구현하고 데이터를 Google 애널리틱스 4로 전송하는 방법을 알아봅니다. Google 태그 관리자 Google 최적화 도구 Next.js 앱 이미 next.js 앱이 있는 경우 _document.js라는 새 파일을 만들고 <Head> 및 <b... mvtuxoptimizenextjs