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

시맨틱 태그? 시맨틱(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 영구적인 접근을 위해 만들어진 물리적, 가상적 매개체를 뜻한다. 즉, 사용자가 특정 콘텐츠를 이용할 때 만나는..