타이니 레이아웃 01 

2013. 09. 26 업데이트 - IE7 이하 브라우저에서 나타나는 z-index 버그 수정 (상단 메뉴 레이어가 하단 요소에 가려지는 현상)
 
 
타이니의 kimsQ Rb Lab (http://kimsq.cweb.co.kr) 홈페이지도 타이니 레이아웃 01 로 만들었으나,
운영하면서 차츰 변해갈 것이기에 별도의 데모 홈페이지 (http://kimsq.cweb.co.kr/tiny01/) 를 유지하며 캡처 이미지를 통해 설명하겠습니다.

 
jQuery 가 기본적으로 필요합니다.
킴스큐 내장 jQuery CDN 스위치를 켜시거나, 좀 더 향상된 성능의
Smart jQuery CDN (향상된 jQuery 임포트) 스위치 (http://www.kimsq.co.kr/market/410/) 를 설치하십시오.


타이니 레이아웃 01 데모 홈페이지 http://kimsq.cweb.co.kr/tiny01/ 바로가기 Click
 
 
타이니 레이아웃 01 다운로드 (kimsQ Market) Click
 


크로스브라우징 : IE 8+ / FF / CR / SF / OP
 
IE8 (인터넷익스플로러 8버전) 이상에서 제대로 동작합니다. 그런데 국내 실정상 호환성보기 설정으로 사용하는 IE 유저도 IE7 브라우저를 쓰는것과 같이 렌더링합니다.

따라서,
킴스큐설치폴더/index.php 파일의 상단 <title> 태그 바로 위에 한 줄 넣어주세요.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

이렇게 한 줄 넣어주시면 여러분의 홈페이지에 호환성보기 상태로 IE 사용자가 들어와도 최신 브라우저 엔진으로 렌더링 하게 됩니다.
관련글 : http://kimsq.cweb.co.kr/b/tinylogs/34
 
 
킴스큐 기본 레이아웃의 기능 확장 성격이 짙습니다. 기본형에서 추가/변경된 부분 위주로 설명합니다.



로그인하면 사이드메뉴로 보이는 멤버인포 부분입니다.
특이점으로 "최근쪽지" 를 표시합니다. 킴스큐 쪽지 시스템의 특성 상 새 쪽지는 바로 팝업으로 뜨므로, "읽지 않은 쪽지는 의미가 없습니다."
"최근" 이라는 기준일자를 레이아웃 꾸미기 설정페이지에서 조정하실 수 있습니다.



아울러 최근쪽지 갯수에 마우스를 올리면 설명글이 팝업됩니다.




상단 대 메뉴는 최신 유행하는 스타일로 꾸몄습니다.
레이아웃 꾸미기 설정페이지에서 Layer 뜨는 효과, Row 출력 2차메뉴 갯수 등을 설정 할 수 있습니다.





메인화면에는 메인 광고로 사용할 수 있는 캐러셀(carousel) 스타일의 이미지 슬라이드 링크가 있습니다.
레이아웃 꾸미기 설정 페이지에서 관리하실 수 있습니다.




메인화면 하단에는 최근 게시물을 추출합니다.







하단 푸터에는 주소 영역이 있고요. 이 주소는 레이아웃 꾸미기 설정 페이지에서 수정하실 수 있습니다.
또한 하단 우측에는 Top 버튼과 더불어 패밀리사이트 바로가기 기능이 있습니다. 일반적인 셀렉트박스보다 좀 더 미려합니다.
(이 부분은 푸터 파일을 하드코딩 하셔야 합니다. 관리자 설정 지원 안합니다.)





아. 레이아웃 관리자 모드 (레이아웃 꾸미기 설정페이지)는 위 캡처이미지처럼 상단 관리바의 "꾸미기" 버튼을 통해 들어가실 수 있습니다.





서브 화면들에는 현재위치를 친절히 나타내는 기능이 있으며, 메뉴 뎁스별로 링크가 적용됩니다.
또한, 만약 메뉴 이름이 무척 길어서 레이아웃을 가로 사이즈 안에 모두 안 들어가면 알아서 다이나믹하게 줄어드는 기능이 있습니다.

페이지 타이틀 글자 우측엔 소셜공유버튼 3종이 있습니다.





광고 영역은 모두 4곳을 레이아웃 꾸미기 설정 페이지를 통해 제공합니다. 꼭 광고가 아니라 홈페이지 구성요소를 넣으셔도 관리가 쉬워지십니다.
사이드 하단에 많이 본 글과 댓글 많은 글의 경우, "최근 00일내" 라는 기준을 레이아웃 꾸미기 설정페이지에서 조정 하실 수 있습니다.





따로 모듈이나 페이지/메뉴 만드실 필요없이 레이아웃 자체 추가 페이지로 Contact Us 페이지를 추가했습니다.
레이아웃 꾸미기 설정 페이지에서 대 메뉴에 링크 넣을지 말지, 연락 쪽지를 수령할 아이디를 지정 할 수 있습니다.

또한, 스팸방지 캡차 시스템을 기본 포함합니다. captcha (Completely Automated Public Test to tell Computers and Humans Apart)



아래부터는 레이아웃 꾸미기 설정 관리자 페이지의 캡처 모습입니다.
천천히 살펴보시면 킴스큐 기본 레이아웃에서 추가/변경된 내용을 확인 하실 수 있습니다.






















테마는 총 3가지가 들어있습니다. 테마 css 파일에 의한 변화는 미미하며 헤더영역만 변화합니다.
따라서, 들어있는 테마를 확인하시어 어떤 식으로 테마를 변경/추가하는지 익히시는 용도로 학습하시고 자기만의 스타일과 디자인으로 이 레이아웃을 변형 사용하시는게 좋겠습니다.









추가로, 이 레이아웃을 설치하시면 kimsQ Rb v1.2.1 기준 쪽지 버그를 코어를 안 건드리고 수정하실 수 있습니다.



많이 본 글최근 90일내 많이 본 글입니다.
댓글 많은 글최근 90일내 댓글 많은 글입니다.
Tag Cloud
등록된 태그가 없습니다.

Visits Counter
  • 53오늘 방문
  • 96어제 방문
  • 53오늘 페이지뷰
  • 97어제 페이지뷰
  • 2,643이번 달 방문
  • 2,247지난 달 방문