로딩 중 화면을 만드는데, 갑자기 애니메이션을 추가하고싶었다. (해도 됨) 이미지는 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 까지도 선택속성이 막혀버린것이었다. 안드로이드에서는 왜 되는지의 원리를 아직은 모르지만 안드로이드에서는 문제가 없었다. 나는 안드로이드 유저라 안드로이드위주로만 테스트해서 금방 발견하지 ..

transform 속성명 속성값 설명 transform(2D) scale 선택한 요소의 크기를 확대 또는 축소한다. 현재 크기의 비율을 기준으로 1보다 크면 확대, 1보다 작으면 축소한다. skew 선택한 요소를 x축 또는 y축으로 비틀어서 변형한다. 원하는 각도를 지정하여 기울기를 조절할 수 있다. translate 선택한 요소를 현재 위치 기준에서 x축 또는 y축으로 이동할 수 있다. rotate 선택한 요소를 회전시킨다. transform(3D) rotateX, rotateY 선택한 요소를 x축 또는 y축으로 입체감 있게 회전한다. translateZ 선택한 요소를 z축으로 입체감 있게 보이면서 이동시킨다. perspective px 3D효과가 적용된 요소가 입체감 있게 보이도록 부모요소에 pers..

시맨틱 태그? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사로써 의미를 부여한 태그라는 뜻이다. 페이지 골격을 만들 때 div대신 시맨틱 태그를 사용해 영역을 나누어 기본 구조를 정해준다. div와 span 대신 시맨틱 태그를 사용하는 이유? - 이름만 보고 유추하기 어려운 상황에 의미가 있는 태그로 내용을 좀 더 명확하게 만들어 관리가 편해진다. - SEO에 유리하다. 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선 순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 태그를 사용하는 것이 중요하다. 또한 웹브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside..

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