[워드프레스] jQuery를 사용하여 전면 페이지/카테고리 페이지를 그리드 레이아웃으로 바꾸기

[워드프레스] jQuery를 사용하여 전면 페이지/카테고리 페이지를 그리드 레이아웃으로 바꾸기

위의 그림은 워드프레스 Attitude 테마의 전면 페이지에 표시되는 블로그(최신 글)을 2 컬럼 형식의 그리드로 배열한 모습니다. 이런 모양으로 만드는 방법은 다양하며, 이 블로그의 다른 글에서도 다루고 있습니다. 단순히 CSS로 조정하는 것도 가능하지만 그럴 경우 여백 문제 등을 처리하기가 조금 까다로워집니다. 이런 문제를 보다 수월히 수행하려면 개별 글을 둘러싸는 요소(예: div 또는 section)에 별도의 클래스를 추가하면 좋습니다. 예를 들어, 2단으로 구성하려면...
[워드프레스] CSS를 사용하여 Masonry 그리드 형식으로 블로그 글 목록 표시하기

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

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

Attitude 테마로 워드프레스 무작정 시작하기

이 글에서는 워드프레스의 무료 테마인 Attitude 테마를 사용하여 전면 페이지와 메뉴를 설정하고 홈페이지 슬라이드를 표시하는 방법까지 간략히 살펴보도록 하겠습니다. 처음 워드프레스를 시작하는 경우 이 글을 보시면 어떻게 시작해야 할지를 대략적으로 파악할 수 있을 것입니다. Attitude 테마 소개 Attitude 테마는 매우 단순하고 깔끔한 반응형 워드프레스 테마로서 관리자 페이지(대시보드)의 외모 > 테마 > 새로 추가를 선택한 다음 Attitude를...