본문 바로가기

디자인 개발

display: none에 애니메이션 추가하기 display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법입니다. 다만 CSS transition이 적용되지 않기 때문에 자연스러운 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요로 합니다. 간단한 클래스 추가 과정을 통해서 display: none을 활용한 show/hide 처리에 애니메이션을 추가하는 방법을 알아보고자 합니다. 기본적으로 animation을 display 개체에 추가해서 애니메이션을 추가함과 함께 display: none 속성을 애니메이션 재생 이후에 딜레이를 주어 추가함으로써 자연스러운 트랜지션이 가능하게 하는 방식입니다. HTML 클릭하면 display: none을 block으로 변경합니다. I'm hidden CSS ..
맥OS에서 언어전환(한영전환) 단축키 shift + enter로 변경하기 2016년경부터 맥OS에서 언어전환 단축키 기본값은, 영문의 대문자 고정용으로 사용되던 CAPS LOCK키가 사용되기 시작했습니다. 버튼의 위치나 크기는 큼직해서 누르기 좋아 보일 수 있으나, 어떤 이유에서인지 CAPS LOCK키를 사용하는 경우에는 언어전환에 있어서 딜레이가 발생하는 이슈가 있었습니다. 이것은 아마 오래 누르고 있으면 대문자 고정 기능을 수행해야 되는 기능 중복으로 인한 문제가 아닌가 싶습니다. 그래서 예전부터 사용되어 오던 CMD + ENTER나 CTRL + ENTER를 통해서 언어전환을 하시는 분들이 많습니다. 다만 CMD는 스포트라이트와 기능이 중첩되고, CTRL는 버튼이 작아서 누르기가 힘들며 키보드마다 CTRL의 위치가 달라 적응이 힘들기도 합니다. 그래서 제가 추천드리는 언어..
맥에서 프리뷰 앱으로 이미지 사이즈 조절하기 이미지의 직접 편집보다 사이즈만을 수정하는 경우는 굉장히 빈번하게 발생합니다. 이런 경우 이미지 리사이징만을 위해 포토샵을 켜는 것도 다소 리소스를 과잉하는 것이라고도 볼 수 있습니다. 물론 포토샵을 통해서 이미지 리사이징을 하면 리사이징 방식에서부터 압축율 최적화 등에까지 상세한 설정이 가능합니다. 다만 인스턴트하게 이미지 리사이징만을 하는 경우라면 맥에서는 기본 이미지 뷰어 앱은 프리뷰에서 쉽게 할 수 있습니다. 이미지를 프리뷰 앱을 통해서 실행한 후 Tools 메뉴에서 Adjust Size... 메뉴를 확인하실 수 있습니다. 이 메뉴를 통해서 DPI까지 설정할 수 있는 등 비교적 상세하게 이미지 리사이징 옵션을 설정할 수 있습니다. 별도의 써드파티 앱을 설치하지 않고 이미지 리사이징을 간단하게 수행..
간단한 웹스크롤애니메이션 라이브러리 AOS 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다. AOS (Animate on Scroll) AOS 소개 페이지 AOS AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS 깃헙 페이지 michalsnik/aos michalsnik/aos Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub. github.co..
VSCODE에서 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 VSCODE는 2019년 기준 가장 많은 프론트엔드 개발자들이 사용하는 텍스트에디터라고 볼 수 있는 Visusal Studios Code의 약자입니다. 화면을 나누어서 파일 열기 화면을 나누어서 파일을 여는 방법은 기본적으로 가장 쉬운 방법을 파일을 오픈할 때 드래그를 통해서 원하는 공간에 배치하면, 자동으로 스플릿 뷰를 만들어서 배치할 수 있게 VS Code가 도와줍니다. 또 다른 방법은 Control+P를 통해서 파일을 서치해서 여는 경우나, 사이드바의 파일탐색기를 통해서 파일을 여는 경우 파일이 선택된 상황에서 Control+Enter를 하면 자동으로 오른쪽 공간에 스플릿 뷰를 만들어서 파일이 열리는 것을 확인하실 수 있습니다. 맥의 경우는 Control이 아닌 CMD를 눌러야 합니다. 나누어지 열..
HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) 미디어쿼리 없이 테이블로 반응형 레이아웃을 구성이 가능하다는 걸 알고 계셨나요? 아니 그것보다 왜 그런 방법을 써야 하냐고 물으실 거 같습니다. 사실 미디어쿼리를 쓰면 되기 때문에 이 방법은 딱히 효용이 없다고 느끼실 수도 있습니다. 다만 레가시한 환경에서 반응형 구성이 필요할 때 유용한 방법이 될 수 있습니다. 미디어쿼리가 적용되지 않는 예전 Ie 브라우저에 최적화를 해야 하는 웹페이지이거나, 특히 '이메일' 템플릿을 구성하는 데 있어서 여러 클라이언트와 아웃룩 등의 독특한 랜더링 환경에서 정상적으로 웹페이지를 표시하는 데에 있어서 특히 유용할 수 있습니다. 반응형 테이블: 이메일 템플릿 제작에 유용 용도에 대해 앞서 말씀드렸는데 사실 주된 용도는 바로 이 이메일 템플릿 제작에 활용하는 것이라고 볼 수..
[SEO] 웹페이지 프리뷰이미지(썸네일) 디자인가이드 메타데이터를 통해 웹페이지에 대한 정보로 등록되는 항목 중 이미지는 각종 소셜미디어나 인스턴트메신저 등을 통해서 웹페이지에 대해서 표시되는 주요 정보 중 하나입니다. 보통 open graph에서 제공되는 하나의 항목 중 하나로 취급됩니다. 다만 서비스 또는 클라이언트 별로 이 프리뷰 이미지를 표기하는 방식이 다르기 때문에 최대한 적응성이 높은 웹페이지 메타데이터 이미지를 디자인하는 방법에 대해서 알아 보고자 합니다. 메타데이터 상에서는 'image'라고 불리우지만 실질적으로 '프리뷰이미지', '썸네일이미지' 등의 이름으로 더욱 자주 불리기에 이하 글에서는 프리뷰이미지라고 부르도록 하겠습니다. 정사각형 또는 직사각형 선택 웹페이지 메타데이터는 표준화되어 있다고 보기가 애매하고, 서비스와 클라이언트 별로 표..
[SEO] 페이스북의 프리뷰 이미지/정보 강제 갱신하기 웹페에지와 관련된 정보를 나타내 주는 메타데이터는 특정 클라이언트나 서비스 종속적인 코드가 존재합니다. 이 중 가장 표준적인 형태의 메타데이터는 title, description, favicon과 같은 기본적인 요소들 외에 og라고 불리우는 open graph를 들 수 있습니다. 페이스북 프리뷰 이미지/정보에 사용되는 메타데이터는 open graph 정보를 토대로 작성이 됩니다. 페이스북은 자체 캐싱 서버를 가지고 있어서 프리뷰 정보를 캐싱처리합니다. 그래서 이전에 이미 공유한 적이 있는 경우 캐싱 데이터를 토대로 프리뷰를 표시합니다. 이같은 페이스북에서 긁어가는 메타데이터 정보를 강제로 갱신하는 방법은 다음 페이스북 쉐어링 디버거를 사용하는 것입니다. 페이스북 쉐어링 디버거 해당 디버거를 통해서 URL..