그누보드 아미나 테마 최근글(latest) 목록 가로 정렬 및 CSS 레이아웃 커스터마이징
페이지 정보

본문
그누보드 아미나 테마 최근글(latest) 목록 가로 정렬 및 CSS 레이아웃 커스터마이징
그누보드 아미나 테마 환경에서 세로로 길게 출력되는 최근글 목록을 가로 방향으로 정렬하고, CSS 속성을 조정하여 원하는 너비와 레이아웃을 구성하는 방법을 안내합니다.
아미나(Amina) 테마 환경에서 세로로 출력되는 최근글 목록을 가로 방향으로 정렬하려면 CSS 스타일을 추가해야 합니다. CSS 파일에 .la-list 클래스를 대상으로 float 속성을 적용하여 가로 배치를 구현할 수 있습니다.
CSS 추가 코드
아래 코드를 CSS 파일에 추가하여 적용합니다.
.la-list {
float: left;
width: 25%;
}
- 적용 효과: 위 예시는
width를25%로 설정하여 한 줄에 4개의 항목이 가로로 출력되도록 합니다. 사이트의 레이아웃 구성에 따라width값을 조정하여 한 줄에 표시할 개수를 변경할 수 있습니다.
최근글 목록 가로 정렬 및 CSS 레이아웃 커스터마이징
아미나(Amina) 테마 환경에서 최근글 목록이 세로로 길게 출력될 때, CSS 스타일을 수정하여 가로 방향으로 나열하고 한 줄에 표시되는 개수를 조절할 수 있습니다.
가로 정렬 및 너비 조절 방법
최근글 목록의 요소에 float 속성과 width 값을 부여하면 가로로 균등하게 배치할 수 있습니다.
- 적용 예시:
.la-list { float: left; width: 25%; } - 설명:
.la-list클래스에float: left;를 지정해 가로로 흐르게 만들고,width: 25%를 설정하면 한 줄에 4개의 항목이 균등하게 표시됩니다. 필요에 따라width값을 조절하여 한 줄에 표시되는 개수를 변경할 수 있습니다(예: 2개씩 배치하려면50%, 3개씩 배치하려면33.33%).
상황별 안내
| 내 상황 | 우선할 판단 | 다음 행동 |
|---|---|---|
| 아미나(Amina) 테마 환경에서 최근글 목록이 세로로 길게 출력됨 | .la-list 클래스에 float 속성이 적용되지 않았는지 확인 | CSS 파일에 .la-list { float: left; width: 25%; } 코드를 추가하여 가로 정렬 및 너비 조정 |
실전 FAQ
Q. CSS를 추가했는데도 최근글이 가로로 정렬되지 않고 여전히 세로로 출력됩니다.
- 예외 및 대안: 사용 중인 아미나 테마의 스킨이나 버전에 따라 최근글을 감싸는 부모 요소의 너비(
width)나 레이아웃 구조가 다를 수 있습니다. 부모 컨테이너의 너비가 부족하거나clear속성이 충돌하는지 확인하고, 브라우저 개발자 도구를 열어.la-list클래스에 다른 CSS가 우선 적용(오버라이드)되고 있는지 점검하세요.
함께 보면 좋은 글
- 그누보드4 게시판 카테고리 가로 정렬 커스터마이징 방법과 주의사항
- 그누보드 기본 테마 레이아웃 전체 가로 폭 변경 방법
- 그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법
참고자료
기타 참고자료
- 이전글아미나 테마 탭 메뉴 구현 및 latestamina 활용 가이드 26.11.06
- 다음글그누보드5 스마트에디터2 툴바 아이콘 SVG 교체 및 UI 개선 방법 26.11.04
댓글목록
등록된 댓글이 없습니다.