1. 카테고리 간격 조정을 할 때 여백으로 조정하는 방법, 사이즈로 조정하는 방법이 있는데

여백으로 조정하는 방법은 카테고리 간격을 일정하게 줄 수 있지만 카테고리 개수가 작거나 카테고리명이 짧을 때에는 한쪽에 치우쳐져있는 형태가 되고 카테고리가 많아지거나 카테고리명이 길어졌을 때에 영역 밖을 벗어나서 레이아웃이 깨지게 되는 단점이 있고

사이즈로 조정하는 방법은 카테고리 개수를 체크해서 영역 안에 알맞게 보여지도록 사이즈를 줘서 레이아웃에 영향이 없도록 하는 방법인데요
예를 들어 카테고리가 8개라면 영역 사이즈를 100%로 잡고 100/8을 하여서 그 사이즈 안에 카테고리 글자를 위치 시키고 가운데 정렬이 되도록 하는 것입니다.

그래서 카테고리 추가를 자유롭게 할 수 있는 저희 솔루션 특성상 일정 여백을 주는 방법 보다는 카테고리 개수에 맞게 영역 사이즈를 잡아주는 것이 더 효율적이기 때문에 그렇게 작업이 되어 있는 것이구요.

현재 PC화면 기준으로 카테고리 하나당 영역이 112.5px로 잡혀있습니다. 카테고리 간격이 불규칙한 것은 카테고리 글자 길이가 각자 다르기 때문에 그렇게 보이는 것이구요. 만약 간격을 일정하게 하고 싶으시다면 카테고리 사이즈 관련 css를 수정해 주시면 됩니다.

 

2. 링크가 없어서 마우스 오버 효과가 되지 않은 것이구요. 링크가 없어도 마우스 오버 효과가 되도록 수정해 드렸습니다.

3. 메인 슬라이드 이미지의 용량이 크기 때문에 로딩하는 데에 시간이 걸립니다. 그래서 메인 슬라이드가 바로 표시되지 않고 페이지 로딩이 끝난 난 뒤에 보여지기 때문에 그렇게 보이는 것이구요. 메인 슬라이드 밑의 아코디언 슬라이드 역시 페이지 로딩 시간때문에 js 적용이 바로 안되고 있다보니 이미지들이 나열되고 보여지고 있는 것인데 페이지 로딩이 끝나기 전에는 이미지가 나열되지 않도록 소스를 수정해 드렸습니다.

 

감사합니다.