문제React 프로젝트에서 SCSS를 사용할 때, common.scss 파일에 CSS 변수도 선언하고 여러 파일에서 불러오는 구조를 만들었다.하지만, 개발자 도구에서 확인해보니 같은 스타일이 여러 번 중복 로드되는 문제가 발생!!!!  이로 인해 CSS 변수가 페이지마다 중복 선언되는 문제가 발생했다.// 기존의 common.scss:root { --btn-green-border: none; --btn-yellow-border: none; /* (이런 변수들이 반복됨...) */}[data-theme=light]{...}...그외 scss 공통함수들이 있었다 그로인해 아래처럼 똑같은 변수선언이 여러개가 생겨서 스크롤이 엄청 쌓이게 되어버린..원인: SCSS @use의 동작 방식  SCSS..

로딩 중 화면을 만드는데, 갑자기 애니메이션을 추가하고싶었다. (해도 됨) 이미지는 css animation이 있으니까 그걸로 하면되고, 문구는 어떻게하지.. 하다가 문구는 Javascript로 했다. 현재 프로젝트가 프리마커 템플릿에 제이쿼리를 사용중이라 제이쿼리를 사용해서 추가해줬땅. css는 하면 할수록 어려운데 재밌다. @keyframes rotate-loading { 100%{ transform: rotate(360deg); } } .loading-popup-wrap .pop-img { animation: rotate-loading 3s linear infinite; transform-origin: 50% 50%; } 리액트만 하다가 처음에 회사 추가개발때문에 제이쿼리 쳐다볼때는 아찔했는데, 스..

모바일 환경을 개발중이다. 안드로이드로는 텍스트입력시 입력이 잘 되는데, 아이폰에서는 글자를 입력해도 입력이 되지 않았다.. 확인해보니 아이폰 크롬 브라우저에서 "user-select:none;" 속성 적용시 범위를 잘못선택해서 발생하는 문제였다. * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } 이런식으로 사용자가 어떤상황에서든 텍스트를 선택할 수 없도록 막아뒀기 때문에 input 까지도 선택속성이 막혀버린것이었다. 안드로이드에서는 왜 되는지의 원리를 아직은 모르지만 안드로이드에서는 문제가 없었다. 나는 안드로이드 유저라 안드로이드위주로만 테스트해서 금방 발견하지 ..

회사 신규개발을 진행하면서 HTML, CSS를 더 익숙하게 핸들링 할 수 있어야 된다는 것을 많이 느꼈다. 또한 팀장님과 이야기하면서 자주 나오는게 UI/UX, 사용자가 편해야한다. 개발자의 마인드가 아니라 사용자가 어떤부분을 불편하게느낄지 어떤걸 사용하게될지 모든 경우의 수를 다양하게 예측해서 불편함이 생기는걸 방지해두어야 한다고 했다. 그래서 찾게된 인터랙티브 UI/UX책. 차근 차근 배워나가야지. 그렇다면 UI/UX는 뭐고 인터랙티브 UI/UX는 무엇인가? UI(User Interface) - 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시 or 영구적인 접근을 위해 만들어진 물리적, 가상적 매개체를 뜻한다. 즉, 사용자가 특정 콘텐츠를 이용할 때 만나는..