웹의 화면을 구성하는 것에 대한 관심도 유행에 따라 변하게 되는듯 하다. 예전에는 메뉴 버튼이나 스크롤 효과들에 관심이 많았는데 이제 그 관심이 다른곳으로 이동했다.
요즘 블로그를 하면서 나의 가장 큰 관심사는 본문 글을 다양하게 구성해보는 것과 이미지들을 배치하는 방법들을 찾아보고 있다. 포털 사이트의 이미지 배치를 유심히 살펴보기도 하고 여러 웹사이트를 봐도 내 관심사들만 눈에 들어온다.
예전에는 별로라고 생각했던 3D 효과들이나 시도해보다 실패했던 것들을 다시 찾아 시도해보고 있다.
얼마전 웹사이트들을 구경하다 좋아보이는 이미지 그리드 화면 구성이 있어 이 블로그에 시도해 보았다. 비슷하게 만들어 보려고 했지만 이미지 배치가 생각처럼 잘 되지는 않는다.
예전에 시도했던 지그재그 이미지 배치와 비슷하긴 하지만 좀 더 복잡하다.
일단 썸네일 이미지 그리드 화면을 구성해 보았다. 그리고 각 이미지에 3D 마우스 오버 효과를 추가했다.
마우스를 이미지로 이동하면 이미지가 마우스가 움직이는 방향으로 기울어지는 틸트 효과를 적용했다.
각 이미지는 3n+1, 3n+2 에 각각 다른 마진값을 적용하여 높이를 다르게 조절했다.
현재는 맨소니를 사용중이지만 나중에 블로그 스킨의 인덱스에 삽입하여 첫화면이나 카테고리 선택 화면에 적용하면 꽤 괜찮은 모양이 될듯 하다.
아쉽지만 아직 모바일과 반응형 화면 구성도 못해서 바로 적용하기는 어렵다.
