• 에비뉴 완전 정복 - 2 번을 잘 따라 하셨다면 이제 생성한 서브 용 레이아웃을 설정해보겠습니다. 

     

    'KSO 에비뉴 레이아웃 서브 사이드 좌측' 설정 버튼 클릭!

     

    다른 것은 볼 것 없이 <레이아웃 구성>에 <서브 A (사이드 왼쪽)> 선택 후 저장

     

    manual_04.jpg

     

    * 나머지 서브 용 생성한 것도 마찬가지로 <서브 B (사이드 오른쪽)>, <서브 C(단독 1단)>으로 선택한 후 저장을 합니다.

     

    * 출력되는 모습을 확인 하기 위해서 생성한 페이지나 게시판에 가서 서브 페이지 특정 메뉴에 서브 용 레이아웃을 연결하고 페이지 모습을 확인해 봅니다. 

     

    서브 스타일에 사이드 영역이 좌측, 우측, 단독 1단으로 출력되는 것을 확인 할 수 있을 것입니다. 

     

    이제 세부 설정 및 팁에 대해 알아보겠습니다.

     

    ◈ 서브 설정 - 탭을 클릭!

     

    1) 서브 탑 세로

     

    세로 사이즈를 입력합니다. 기본 300, 숫자만 입력합니다.

     

     

    2) 배경 컬러와 탑 이미지

     

    사용할 배경 컬러를 넣는데 서브 탑 이미지를 가로 풀 사이즈로 입력할 경우 의미가 없습니다만, 스타일리시하게 이미지와 배경 컬러를 매칭 시키기 위해 사용합니다.

     

    manual_03.jpg

     

    http://ksostudio.com/project/ave_crea_article

     

    샘플 사이트처럼 사용할 이미지에 핵심 컬러를 탑 배경 컬러에 입력하고 사용할 이미지는 1200x300 사이즈로 양쪽 면에는 포토샵에서 배경 컬러 값으로 그라데이션 처리를 하였습니다. 

    이미지가 기본 가운데 정렬이 되므로 이렇게 사용하면 이미지와 배경이 잘 매칭이 됩니다. 

    또한 이미지 사이즈를 줄일 수 있어 파일 용량도 줄일 수 있습니다. 

     

    * 샘플 PSD 파일 첨부 되어있습니다. PSD 참고해서 만들어보세요.

     

    * 가로 풀 사이즈 이미지를 사용할 경우 1920x세로 사이즈로 맞추면 됩니다.

    * 이미지 편집 시 이미지 퀄리티가 저하 되지 않는 선에서 파일 용량을 줄여 사용하세요. 

     

     

    3) 사이드 이미지 

     

    <서브 세로형 메뉴> 위에 위치해 있으며, 이미지를 업로드 할 수 있습니다.

    페이지 안내, 배너 등으로 활용해보세요. 비워두면 출력하지 않습니다.

     

    http://ksostudio.com/project/ave_board_list

     

    * 서브 페이지 PSD도 제공합니다. 참고해서 제작해보세요.

     

     

    5) 서브 메뉴

     

    가로형, 세로형 사용안함 중 선택할 수 있습니다.

    * 세로 형은 일반적인 형태이고 가로 형은 새로운 스타일이며 타블렛에서 사이드 영역이 사라지기 때문에 세로 형은 데스크 탑 전용이라고 볼 때 가로 형은 타블렛까지 출력되므로 기능적으로도 향상 되었다고 볼 수 있습니다. 

     

    * 모바일에서는 셀렉트 메뉴로 자동 전환됩니다.

     

    product_avenue07.jpg

     

     

    6) 사이드 이미지

     

    서브 세로 형 메뉴 아래에 위치하며, 4번 사이드 이미지와 같은 형식입니다.

     

     

    7) 사이드 영역 1,2,3

     

    빈 공간을 3개까지 지원하며, 최근 게시물, 소셜 위젯, 동영상 등 소스 코드를 사용하여 꾸밀 수 있습니다.

     

     

     

     

     

    자! 서브 페이지에 대해서 알아 봤습니다. 당장 웹 사이트를 완성하지 않더라도 용도와 활용 방법만 배우시고 차차 사이트를 완성해 보시기 바랍니다. 

     

    다음, 메인 컨텐츠 설정만 남았으며, 차근 차근 배워보시기 바랍니다.

     

     

     

    페이스북 트위터 미투데이 요즘 마이피플