브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. .img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s : 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-funct..

Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고... 이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다. XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다! Overflow 툴 소개 The world's first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story. 오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다. 스토리를 말해주는 아름다운 유저플..

파비콘(Favicon)이란? 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 최근 네이버 검색 결과에 파비콘이 노출되면서 파비콘의 중요성이 더 높아진 것 같다. 단순히 16*16 사이즈로 ico를 만들어서 적용할 수 도있지만, 디바이스 크기가 다양해진 만큼 어느부분에 파비콘이 어떻게 보여질지 몰라 획일화된 사이즈 보다는 다양한 사이즈로 등록해두는 것이 좋을 것 같은 개인적인 생각이 든다. 파비콘 사이즈를 직접 사이즈별로 만들지 않아도, 다양한 사이즈로 자동으로 파비콘을 만들어주는 사이트를 추천하고자한다. 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-ge..

커서는 보이는데 아무리 입력해도 글자가 안보이는 경우 해결방법 일부 웹폰트의 경우 input[type=password]를 지원하지 않는다. 따라서 input[type=password]의 폰트를 변경해주면 된다. 위의 캡쳐본의 경우에는 홈페이지 전체적으로 나눔스퀘어 폰트를 사용하고 있었는데 나눔스퀘어 또한 password에 폰트를 지원하지 않는 경우였다. css에 한 줄 추가해서 간단히 해결 가능하다. input[type=password] {font-family:'Malgun gothic', dotum, sans-serif;} [팁] 위와 같이 변경하면 패스워드 입력칸의 placeholder 폰트도 변경이 되는데, placeholder 부분에 한번 더 별도로 웹폰트를 지정해주면 된다. ::placehold..