FOUC(Flash of Unstyled Content)란? FOUC는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보이는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게 된다. 이는 해당 웹문서의 UX를 떨어뜨리는 요인으로 작용한다. ※ 처음 이 현상은 2001년 Flash of Unstyled Content이라는 기사에서 문서화되었다. FOUC는 Internet Explorer 특유의 브라우저 문제로 나타났으나 사파리 브라우저에서도 결..

화면 상황에 따라 table tr(행)을 숨겼다가 보여줘야 할 상황이 있다. 해당 tr을 숨기기 위해서 "display: none;"으로 스타일을 주면 정상적으로 숨겨질 것이다. 여기서 문제는 다시 보여주기 위해서 "display: block;"을 할 경우 해당 행이 깨지는 현상을 볼 수 있을 것이다. 이런 현상을 처음 접하면 tr태그를 잘못 수정한 것으로 보고 원인 파악하는데 많은 시간을 들일 수 있다. table의 경우 "display: block;"을 "display: ;" 공백으로 처리하면 된다. 스크립트로 show(), hide()를 사용해도 되지만 display를 block으로 했다가 깨짐 현상이 발생했을때 원인을 찾기 위해 많은 시간을 들이지 말고 기억해두면 간단하게 해결될 문제이다. 해결방..

웹 개발자라면 필연적으로 사용하게 되는 HTML이지만 HTML의 태그들은 의미를 알 수 없을 정도로 한 두 글자로 축약한 약어가 많기 때문에 약어의 뜻보다는 기능으로 태그를 외워버린 분이 많을 겁니다. (사실 제가 그렇습니다...🙋‍♂️) 이번 글에선 자주 사용되는 HTML 태그들의 풀네임과 기능을 정리해보겠습니다. ( 이미 n년차 웹 개발자들에겐 아주 친숙한 태그들이기 때문에 대략적인 의미를 알고 있더라도 재미 삼아 읽어보는 것도 좋을 것 같습니다.) 태그 풀네임 뜻 기능 HTML Hypertext Markup Language 하이퍼텍스트 마크업 언어 a (href) Anchor (Hypertext reference) 닻(참조 하이퍼텍스트) 참조 하이퍼텍스트로 이동 b Bold 굵은 활자체 텍스트를 굵..

해결방법 방법 1. inputmode="numeric" 혹은 inputmode="decimal" 속성 추가 방법 2. input type을 tel로 변경 input type tel은 기본적으로 넘버 키패드를 지원하지만, 숫자 외 문자 입력을 허용하기 때문에 number type처럼 숫자만 입력받기 위해선 자바스크립트 등에서 추가 처리를 해주는 것이 좋다.