• 샘플 사이트를 비교해서 확인해 보세요 : http://ksostudio.com/project/ave_crea_main

     

    * 미디어 

     

    이미지나 동영상(비메오, 유투브)의 경우 소스 코드만 넣으면 출력이 되는데, 반응형에 대응하기 위한 방법입니다.

     

    * 이미지에 경우 아래 코드를 추가하면 빈 공간에도 이미지를 삽입할 수 있습니다.

    * 위젯 페이지에 이미지 추가 후 모바일 등에서 이미지가 잘릴 때 아래처럼 코드를 수정하면 됩니다.

    <img src="경로" width="100%" height="100%class="img-responsive" />

     

    * 동영상의 경우 반응형에 대응 하기 위해서는 

    소스 코드에서 width="100%" height="100%"  가로 세로 값만 수정하면 됩니다. 혹은 세로 값만 고정해도 됩니다.

     

    <iframe src="//player.vimeo.com/video/13216490?title=0&byline=0&portrait=0" width="100%" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

     

    * 슬라이드에 동영상 추가하기

     

    방법은 간단합니다. 코드를 추가하고 가로/세로 값만 100%로 수정하면 됩니다. 

     

    예시) 비메오 영상

    <iframe src="//player.vimeo.com/video/89711963?title=0&byline=0&portrait=0&badge=0&color=f43ef7&" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

     

    * 비메오 영상은 <iframe>...<iframe>외에 ~ 뒤에 붙는 코드는 제거 하시면 됩니다. 

     

    예시) 유투브 영상

    <iframe width="100%" height="100%" src="//www.youtube.com/embed/fLe_qO4AE-M?wmode=opaque" frameborder="0" allowfullscreen></iframe>

     

    * 유투브 영상에 경우 소스를 그대로 넣을 경우 depth가 높아서 메뉴보다 위로 올라오게 됩니다. 메뉴가 보이게 하고 싶다면 유투브 링크 뒤에 ?wmode=opaque 코드를 추가하면 됩니다.

     

    * 주의사항

     

    동영상을 사용하더라도 슬라이드 이미지를 사용해야 합니다. 섬네일이 먼저 출력되고 바로 영상으로 넘어가므로 영상을 추가한 후 스크린 샷을 찍어 슬라이드 이미지로 사용하거나 영상 안내 이미지를 따로 제작하여 사용하도록 하세요. 

     

     

    * 메인 슬라이더 캡션

     

    제목, 내용을 입력할 수 있는데, 제목을 아래처럼 응용할 수 있습니다.

     

    KSODEISGN STUDIO<br />
    <small>CREATIVE DESIGN STUDIO</small>

     

    br 태그로 줄바꿈을 시키고, small 태그를 사용하면 제목 폰트 사이즈 대비 75% 사이즈의 사이즈로 출력이 됩니다.

    * 큰 제목, 아래에 작은 제목을 사용하고자 할 때 사용하시면 됩니다.

     

     

     

    * 섹션 3 쇼케이스

     

    프로젝트 섹션으로 1 컬럼, 2 컬럼 중 선택할 수 있으며... ... <br /><br />
    <i class="icon-check"></i> 2 개의 컬럼 선택 가능<br />
    <i class="icon-check"></i> 이미지 업로드 & 빈 공간 활용<br />
    <i class="icon-check"></i> 동영상 또는 위젯 활용<br />
    <i class="icon-check"></i> 태그 활용 가능

     

    br 을 두 번 사용하여 두 칸을 띄우고, 아이콘 코드를 사용하여 리스트로 출력한 형태입니다.

     

     

     

    * 추가 영역

     

    추가영역 1, 2를 패럴랙스 위, 아래로 제공하고 있는데 총 4 개의 컬럼을 선택해서 사용할 수 있습니다. 

    반응형 구조로 컬럼을 활용하시라고 만들어 놓았습니다. 

     

    추가영역 2(구간 패럴랙스 아래)에 1 컬럼으로 선택하고 갤러리 위젯을 넣었는데 제목을 출력하는 방법입니다. 

     

    <h2 class="conceptColor text-center">PORTFOLIO</h2>
    <div class="line-point conceptBgColor center-block"></div>
    <img class="zbxe_widget_output" widget="content" skin="KSO_contentSkin" colorset="layout" content_type="document" module_srls="195" list_type="gallery" tab_type="none" markup_type="table" list_count="4" cols_list_count="4" page_count="1" subject_cut_size="30" content_cut_size="100" option_view="thumbnail,title,nickname,content,regdate" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" order_target="regdate" order_type="desc" thumbnail_type="crop" thumbnail_width="262" thumbnail_height="150" />

     

    <h2>PORTFOLIO</h2>  : 제목을 h2 태그로 감싸줍니다. (h1 ~ h6)

    clas="conceptColor" : 컨셉 컬러를 사용하고자 할 경우 클래스 태그에 conceptColor를 넣어줍니다.

    클래스 생략 = text-center : 텍스트를 가운데 정렬하고자 할 때 사용합니다.

     

    <div class="line-point"></div> : 이 태그는 제목 아래에 라인 처리를 해줍니다.

    conceptBgColor : 컨셉 배경 컬러를 적용할 때 사용합니다.

    center-block : 텍스트가 아닌 엘리먼트에 가운데 정렬할 때 사용합니다.

     

    * center-block 은 이미지 태그에 사용할 때 이미지가 가운데 정렬을 하게 됩니다.

     

     

     

     

    * 반응형 구조 짜기

     

    * 페이지든 게시판이든 html 편집기를 이용해서 활용이 가능합니다.

    * 문서 스킨 (어드밴스)용에 활용해 보세요. 샘플 : http://ksostudio.com/project/ave_crea_article

     

    예제) 탭 엘리먼트 2단 나누기

     

    <div class="row mBottom30">

    <div class="col-md-6">

    단순히 고통이라는 이유 때문에...

    </div>

    <div class="col-md-6">

    단순히 고통이라는 이유 때문에...

    </div>

     

    </div>

     

    * row 로 먼저 감싸고 col-md-6 으로 블럭을 나눌 수 있습니다. 부트스트랩이 12 컬럼으로 짜여져 있어 숫자 합이 총 12만 만족시키면 됩니다. 

    col-md-6 을 두 번 사용했으므로 2 개의 블럭으로 나눠지며, 

    col-md-4 를 세 번 사용하면 3개의 블럭으로 나뉩니다.

     

    * mBottom30은 하단 간격을 조정할 수 있습니다. 10 ~ 60 까지 사용할 수 있습니다.

     

    예제) 이미지와 텍스트로 나누기

     

    <div class="row mBottom30">

    <div class="col-md-6">

    <img src="http://ksostudio.com/layouts/KSO_Avenue/img/business_img.jpg" class="img-responsive" />

    </div>

    <div class="col-md-6">

    단순히 고통이라는 이유 때문에...

    </div>

     

    </div>

     

    * 2개의 블럭으로 나누고 이미지 태그만 추가하였습니다. 

     

     

    예제) 컬럼을 나누지 않고 이미지와 텍스트 나누기 (블럭 엘리먼트 참고)

     

    <img src="http://ksostudio.com/layouts/KSO_Avenue/img/business_img2.jpg" class="pull-left img-responsive" />

    12 30억불 수출의 탑 수상<br />

    03 예산 건자재공장 준공(건자재 사업)<br />

    02 여수고무제2공장 준공<br />

     

    * pull-left 클래스를 추가하면 왼쪽으로 붙습니다. 아래 텍스트는 자동으로 우측으로 붙습니다.

    * pull-right 클래스를 추가하면 오른쪽으로 붙습니다.

     

     

     

    * html, CSS를 알고 있다면 다양하게 활용하시면 됩니다.

    * 부트스트랩을 파악하면 더 많이 활용할 수 있습니다. http://bootstrapk.com/BS3/getting-started

     

     

    * 좌측 아이콘 사이즈 조정 방법

    ./css/kso-layout.css 파일 68번째 줄, width, height 및 font-size 값 조정

     

    * 추가적으로 빈 공간 활용 방안에 대해 질문 주시면 계속해서 추가하도록 하겠습니다.

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