최근 프로젝트를 하면서 페이스북, 인스타그램 등 여러 트렌디한 서비스들이 쉼머라는 새로운 로딩 애니메이션을 도입하고 있다는 걸 알게 되었습니다. 관련해 UX 및 개발 자료를 찾으면서 쉼머에 관련된 한국어로 된 콘텐츠가 많이 없는 것 같아서 괜찮게 본 글을 번역해봤습니다. 의역이 포함되어 있고 원작자의 허가를 받고 번역했습니다. 원본 링크는 https://dev.to/dhilipkmr/the-loading-shimmer-29dc 입니다. Loading Shimmer를 접했을 때, 전 그게 웹 개발에 새롭게 도입된 끝내주는 기술이라고 생각했습니다. 하지만 Loading Shimmer는 이미 인터넷에서 많이 알려져 있었습니다. 느린 네트워크 접속 환경 때문에 DOM 로드에 시간이 걸릴 때면, 우리는 로딩 아이..

만약 여러분이 제작하는 서비스에서 input[type=text]의 값 유무를 판단해 "입력되었습니다"라는 문구를 표시해야 한다면 어떻게 구현할 수 있을까요. 아마 가장 처음으로 떠오르는 방법은 JavaScript로 input DOM의 value값을 받아오는 것일 것입니다. 아마도 위 기능은 다음과 같은 코드로 구현할 수 있습니다. 값이 입력되었습니다. 그러나 이렇게 JavaScript를 이용하지 않고도 HTML과 CSS만을 이용해 비슷하게 구현할 수 있습니다. 바로 가상 클래스 요소 :placeholder-shown과 css의 선택자를 이용하면 훨씬 간단하게 구현할 수 있습니다. 값이 입력 되었습니다. 가상 클래스 요소 :placeholder-shown은 input과 textarea에서 placehold..

CSS (가상요소)의 content에 개행이 필요한 경우 보통 JavaScript에서 콘텐츠에 개행이 필요한 경우 ES6의 Template literals을 이용해 편하게 개행을 하는데 CSS에서도 될 줄 알고 했다가 전혀 되지 않았다. \A 키워드를 이용하면 쉽게 개행(줄바꿈, 엔터, new line)할 수 있습니다. 대소문자 무관하게 적용되며 가상요소가 아니어도 상관없이 content에 모두 쓸 수 있습니다. JavaScript의 \n과 동일하게 기능합니다. 코드와 결과물은 아래에 있습니다. .className::after{ content: "클릭하여 이미지 변경"; /*...연관없는 스타일은 주석처리...*/ } 여기에 \A와 white-space 속성을 추가해줍니다. .className::afte..