본문 바로가기

UX 개발

[CSS] opacity와 visibility는 함께 사용해야 할까요? 웹 표준 및 접근성 고려 사항웹 표준 및 접근성(a11y)을 고려할 때, visibility와 opacity의 사용 선택은 중요한 영향을 미칠 수 있습니다. 각각의 사용에 따른 영향을 자세히 살펴보고, 모범 사례를 소개합니다:접근성(a11y) 고려 사항opacity만 사용하는 경우시각 장애: 스크린 리더나 다른 보조 기술에 의존하는 사용자는 완전히 투명한 요소(opacity: 0)와 여전히 상호작용할 수 있습니다. 왜냐하면 해당 요소가 DOM에 남아 있고 포커스를 받을 수 있기 때문입니다.키보드 탐색: opacity: 0을 설정한 요소는 키보드 탐색을 통해 여전히 포커스를 받을 수 있으며, 이는 사용자가 "보이지 않는" 요소와 상호작용하게 만들어 혼란을 줄 수 있습니다.visibility와 opacity..
아르헨티나 국가로 생성한 구글 계정, 한국 이름으로 성인 인증 가능 최근 아르헨티나 국가 설정으로 생성한 구글 계정에 대해 흥미로운 사실을 발견했습니다. VPN을 통해 아르헨티나로 설정한 구글 계정이 한국에서 정상적으로 프리미엄 서비스를 이용할 수 있는지에 대해 실험해본 결과, VPN을 해지한 상태에서도 한국 이름으로 성인 인증을 받아 문제없이 프리미엄 계정을 사용할 수 있었습니다. 이는 한국 내망에서 성인 인증 정보와 구글의 국가 코드가 별도로 관리되기 때문으로 보입니다. 즉, 한국에서 성인 인증을 받을 때 사용되는 정보는 구글 계정의 국가 코드와는 연결되지 않기 때문에 이러한 현상이 발생하는 것입니다. 구체적인 실험 과정은 다음과 같습니다:  1. 구글 계정 생성: VPN을 이용해 위치를 아르헨티나로 설정한 후, 구글 계정을 새로 생성했습니다. 2. VPN 해지: 계..
NordVPN(노드VPN) 무료 환불 받는 방법 1. NordVPN 웹사이트 또는 어플리케이션 로그인웹사이트 또는 모바일 어플리케이션으로 접속해서 환불을 받을 수 있습니다. 기존에 결제했던 인증정보로 로그인합니다. 2. 자동갱신 해지이후 Billing 메뉴로 접속해서, 자동갱신(Auto-renewal)을 해지합니다.3. 인보이스 준비하기결제 내역을 증빙하기 위한 결제 인보이스를 다운 받습니다. 마찬가지로 Billing 메뉴에서 다운받을 수 있습니다. 4. 환불요청 이메일 보내기예상은 했지만, 환불 과정을 편리하게 만들어 두지는 않았습니다. 여기서 보내는 사람 이메일 주소는 가입할 때 사용했던 이메일 계정을 그대로 사용하셔야 합니다. 본인 인증 차원에서 그렇습니다. 이메일을 통해서 관련 내용을 전달해야 합니다. 영어로 보내야 하기 때문에 좀 어려움이 있..
아르헨티나 계정으로 유튜브 프리미엄 구독하기 (24년 5월 12일 기준 유효) 아르헨티나 국적의 구글 계정을 사용하면 유튜브 프리미엄을 아르헨티나 현지 기준에 맞춘 금액으로 결제가 가능하기 때문에, 한국 기준에서는 저렴한 금액으로 서비스 이용이 가능합니다. 다만 구글에서 공인하는 서비스 이용방법이 아니기 때문에, 서비스 중지 및 구글 계정의 이용 정지 가능성이 있습니다. 그럼에도 플랫폼 사업자 입장에서 이용자 수를 놓치고 싶지 않기 때문에, 적극적인 제재를 하고 있거나 하진 않습니다.조심스럽게만 사용한다면, 경제적인 방법으로 유튜브 프리미엄과 유튜브 뮤직을 즐길 수 있기에 관심이 있으신 분들은 이용해 보시길 바랍니다. 한국에서는 가족 계정을 허락하지 않는 것과 같은 불합리한 과금 정책이 적용되어 있기 때문에, 가족 계정을 사용할 수도 있는 좋은 방법이니 참고 바랍니다. 24년 5월..
Git(깃) 브랜치 생성 및 푸시하기 1. 터미널 열기프로젝트 디렉토리로 이동합니다.2. 기본 브랜치로 체크아웃하기일반적으로 main 또는 master입니다. 아래 명령어를 사용하여 해당 브랜치로 전환합니다:git checkout main3. 새 브랜치 생성 및 전환[branch-name]을 새 브랜치 이름으로 대체하세요:git checkout -b [branch-name]4. 새 브랜치를 원격 저장소에 푸시하기브랜치에 있는지 확인하고 다음 명령어를 사용하여 푸시합니다:git push -u origin [branch-name]이 명령은 브랜치의 상류를 설정하여, 향후 업데이트에서 git push를 사용할 수 있게 합니다.
동적 임포트(Dynamic Import) 이해하기 동적 임포트의 개념자바스크립트에서 동적 임포트를 사용하면 코드의 나머지 부분과 함께 초기에 로드하는 대신 자바스크립트 모듈을 동적으로 로드할 수 있습니다. 이는 웹 페이지나 애플리케이션의 초기 로드 시간을 줄이거나 사용자의 행동이나 기타 런타임 조건에 따라 모듈을 조건부로 로드할 필요가 있을 때 유용합니다.사용법 및 구문동적 임포트는 import() 함수를 사용하며, 이 함수는 모듈 객체를 포함하는 프라미스를 반환합니다. 이 모듈 객체는 일반적으로 모듈의 모든 내보내기를 포함합니다. 다음은 그 사용 방법입니다:import('module-name').then(module => { // 모듈 사용});동적 임포트와 함께 async/await을 사용할 수도 있습니다:async function loadMo..
CSS로 다크모드(라이트모드) 구현하는 방법 2가지 @media (prefers-color-scheme)prefers-color-scheme CSS 미디어 기능은 사용자가 시스템 환경 설정에서 밝은 색상 테마 또는 어두운 색상 테마를 요청했는지 감지하도록 설계되었습니다. 이를 통해 개발자는 사용자의 선호 테마에 맞게 웹사이트 또는 애플리케이션의 모습을 자동으로 조정할 수 있습니다.prefers-color-scheme 사용하기이 미디어 기능은 세 가지 값을 지원합니다:no-preference: 사용자가 테마 선호도를 지정하지 않았음을 나타냅니다. CSS에서는 불리언 컨텍스트에서 false로 평가됩니다.light: 사용자가 밝은 배경에 어두운 텍스트를 특징으로 하는 밝은 테마를 선호한다고 나타냅니다.dark: 사용자가 어두운 배경에 밝은 텍스트를 특징으로 하..
테일윈드(TailwindCSS)에서 다크모드 비활성화하기 TailwindCSS에서 다크 모드를 완전히 비활성화하는 것은 간단합니다. 기본적으로 tailwind.config.js에서 다크 모드와 관련된 구성을 설정하지 않으면 다크 모드 변형이 활성화되지 않습니다. 그러나 기존 구성이 있거나 명시적으로 다크 모드를 비활성화하고 싶다면 Tailwind 구성 파일을 수정할 수 있습니다.TailwindCSS에서 다크 모드 비활성화 방법tailwind.config.js 수정다크 모드를 비활성화하려면, darkMode 옵션이 설정되지 않았거나 명시적으로 false로 설정되었는지 확인하세요. 이는 Tailwind CSS가 다크 모드 변형을 생성하지 않도록 합니다. 별도의 클래스르 다크모드를 구현한 스타일링 코드가 있다면 해당 부분은 직접 제거해야 합니다.// tailwind..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바