탐구하는 취르미

Spinner는 주로 웹이나 애플리케이션에서 비동기 작업이나 데이터 로딩이 진행 중임을 사용자에게 시각적으로 알리기 위해 활용됩니다. Spinner의 UI를 제공함으로써 사용자 경험을 향상하고 사용자에게 어떤 일이 발생하고 있는지 명확히 전달하는 데 유용합니다. SCSS를 활용하여 동적 Spinner 애니메이션 만들어봅시다. HTML 구조 설정 SCSS 기본적인 스타일 .wrap { position: relative; width: 100%; height: 100vh; border: 1px solid red; .spinBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 80..

툴팁 레이아웃(html) 및 스타일(scss) New 새로운 소식! .wrap { display: flex; justify-content: center; align-items: center; outline: 1px solid red; button { position: relative; } .tooltip{ position: absolute; bottom: calc(-100% - 20px - 6px - 2px); //패딩, 삼각형 높이, 사이 간격 값들 빼기 left: 50%; z-index: 999; transform: translateX(-50%); width: 150px; padding: 10px; border-radius: 4px; background-color: #fff; box-shadow: 0..

Safari를 더 효율적으로 사용할 수 있도록 웹사이트 주소를 보는 설정과 브라우저 상태막대를 활성화하는 방법에 대해 자세히 알아보겠습니다. 웹사이트 주소 전체 보기 설정 Safari는 기본 설정이 웹사이트 전체 보기를 제공하지 않더라고요~ 따로 설정을 통해 주소를 보다 명확하게 확인해 봅시다. 하위 페이지에 접근했지만, 웹사이트 전체 보기를 설정하지 않아 기본 도메인 주소만 보입니다. Safari > 설정 > 고급 > 전체 웹 사이트 주소 보기 옵션을 체크합니다. 이제 Safari 주소 표시줄에서 전체 웹사이트 주소를 편리하게 확인할 수 있습니다. 브라우저 상태 막대 보기 활성화 브라우저 상태막대는 현재 웹페이지의 로딩 상태와 링크 주소 보기 등 추가 정보를 표시하여 사용자에게 유용한 정보를 제공합니다..

프라이버시 모드란? 웹 브라우저에서 제공하는 기능 중 하나로, 사용자의 브라우징 활동을 익명으로 유지하고 개인 정보를 보호하는 데 도움을 주는 모드입니다. 이 모드에서는 브라우징 기록, 쿠키, 캐시 등이 일시적으로 저장되지 않습니다. Safari 브라우저에서의 프라이버시 모드 활용 방법 아주 간단합니다. 1. 브라우저를 여세요. 2. 단축키 cmd + shift + N으로 브라우저 창을 시크릿 모드로 전환하실 수 있습니다. * 참고로 크롬(Chrome)에서의 시크릿 모드도 동일한 단축키를 사용합니다. 프라이버시 모드의 필수성 온라인 활동이 증가함에 따라 개인 정보 보호는 더 중요해지고 있습니다. 브라우저의 프라이버시 모드는 이를 위한 강력한 도구로, 여러 가지 이점을 제공합니다. 1. 브라우징 기록 ..

Mac OS에서 기본적으로 제공되는 QuickTime Player를 사용하여 화면을 기록하는 방법에 대해 알아보겠습니다. QuickTime Player는 모든 Mac에 무료로 포함되어 있어 사용자들이 간편하게 화면을 녹화하고 공유할 수 있는 편리한 툴입니다. 저는 보통 개발할 때, QA 단계에서 많이 활용합니다. QuickTime Player 열기 Spotlight 검색창을 활성화시켜(단축키 cmd + space bar) QuickTime Player를 열어봅시다. Finder(파인더) > Applications(응용 프로그램) 폴더 내에서도 찾으실 수 있습니다. 화면 기록 시작하기 QuickTime Player를 열었으면, 상단 메뉴에서 '파일(File)'을 선택하고 '새로운 화면 기록(New Scre..

웹접근성을 높이기 위해 키보드 탐색을 사용하는 사용자들을 위한 중요한 기능 중 하나는 Tab 키를 통한 요소 간의 이동입니다. 이를 시각적으로 확인하기 위한 하이라이트 표시 설정에 대해 알아보겠습니다. Safari 브라우저 설정 확인하기 대부분의 웹 브라우저는 기본적으로 Tab 키를 사용하여 요소에 포커스를 이동할 수 있게 지원하며, 이때 기본적인 시각적 표시를 제공합니다. 그러나 이 기능이 제대로 동작하지 않을 경우, 브라우저 기본 설정(단축키 cmd + , )을 확인해 보세요. 고급 탭을 클릭하여 Tab을 눌러 웹 페이지에 있는 각 항목을 하이라이트를 체크해 줍니다. 설정을 적용한 후에는 실제로 브라우저에서 테스트를 진행해 봅시다. Tab 키를 사용하여 요소 간에 포커스를 이동하면서 설정한 하이라이..