[워드프레스] jQuery를 사용하여 블로그를 포트폴리오 레이아웃으로 만들기

[워드프레스] jQuery를 사용하여 블로그를 포트폴리오 레이아웃으로 만들기

이전 글에서 CSS를 사용하여 블로그 글 목록을 Masonry 그리드 형식으로 표시하는 방법을 살펴보았습니다. 앞의 방법은 크롬에서는 제대로 표시되지만 IE에서는 약간 이상하게 표시됩니다. 이 글에서는 jQuery를 사용하여 Masonry를 구현하는 방법을 간략히 살펴보겠습니다. salvattore 사이트에 공개된 jQuery 소스를 가지고 테스트해보았습니다. 방법은 이 사이트의 맨 위에 있는 jQuery 소스나 js 스크립트 중 하나를 복사하여 테마 폴더 혹은 플러그인 폴더...
[워드프레스] CSS를 사용하여 Masonry 그리드 형식으로 블로그 글 목록 표시하기

[워드프레스] CSS를 사용하여 Masonry 그리드 형식으로 블로그 글 목록 표시하기

Masonry는 JavaScript 그리드 레이아웃 라이브러리로서 마치 돌로 벽을 만들 때 돌을 벽돌공(Mason)이  쌓아올리듯이 적절한 수직 간격을 두면서 빈틈이 없게 배치하는 형식입니다. 도식화하면 아래 그림과 같이 나타낼 수 있습니다. 이러한 형식으로 그림이나 글+그림 요약문을 배치하는 사이트가 많습니다. 이 웹사이트에서 Masonry 레이아웃의 사이트 샘플을 확인해볼 수 있습니다. 그리고 이 글에서 그리드 형식의 워드프레스 테마를 살펴볼 수 있습니다. (현재 사용...