자동박스
자동박스 스킨 예약어 / 설계방법등의 구성방법을 소개합니다.
Class
| Class | 비고 | ||
|---|---|---|---|
| .auto-article | 부모 영역 (옵션 보기) | ||
| 관련 |
|
||
| 옵션 |
|
||
| .auto-titles | 제목 (옵션 보기) | ||
| .auto-subtitles | 부제목 (옵션 보기) | ||
| .auto-sums | 요약문 (옵션 보기) | ||
| .auto-section | 섹션명 (옵션 보기) | ||
| .auto-name | 기자명 (옵션 보기) | ||
| .auto-date | 날짜 및 시간 (옵션 보기) | ||
| .auto-info | 정보 (옵션 보기) | ||
| 관련 |
.auto-info-item
|
||
| .auto-images | 이미지 (옵션 보기) | ||
| 관련 |
|
||
| 옵션 |
|
||
| .auto-mov | 영상 | ||
| 관련 |
|
||
| .auto-relation | 관련기사 (옵션 보기) | ||
| 관련 |
|
||
| .auto-valign | 콘텐츠 배열 | ||
| 관련 |
|
||
| .auto-font[A ~ L] | 색상 | ||
| 옵션 |
A
B
C
D
E
F
G
H
I
J
K
L
|
||
| .photo-titbg | 사진형제목 (옵션 보기) | ||
| 옵션 |
|
||
| .photo-btn | 슬라이드 버튼 | ||
| 관련 | .btn-inner |
||
| 옵션 |
|
||
| .auto-btn | 슬라이드 버튼 (옵션 보기) | ||
| 옵션 |
|
||
| .auto-pager | 슬라이드 점 (옵션 보기) | ||
| 관련 |
|
||
| 옵션 |
|
||
Folders
| D | P | V | M | H | T | |
|---|---|---|---|---|---|---|
| A | 일반기본 | 포토기본 | 영상기본 | 중요기본 | 헤드기본 | 모바일기본 |
| R | 일반롤링 | 포토롤링 | 영상롤링 | 중요롤링 | 헤드롤링 | 모바일롤링 |
예약어
| # | 변수명 | 비고 |
|---|---|---|
| 1 | $idxno | 기사 고유번호 |
| 2 | $link_url | 링크 |
| 3 | $link_sec | 섹션링크 |
| 4 | $title | 제목 |
| 5 | $sub_title | 부제목 |
| $sub_title_br v11.21.0.22 | 부제목 (BR태그 포함형) | |
| 6 | $user_name | 기자명 |
| 7 | $sectionName / $sectionLink | 섹션명 / 링크(1차만) |
| $subSectionName / $subSectionLink | 섹션명 / 링크(2차까지) | |
| $serialName / $serialLink | 섹션명 / 링크(모두) | |
| 8 | $flash_tag | 동영상 |
| 9 | $oriImgFileUrl / $oriImgWidth / $oriImgHeight | 이미지원본 / 이미지원본넓이 / 이미지원본높이 |
| 10 | $thumbImgFileUrl / $thumbImgWidth / $thumbImgHeight | 썸네일 / 썸네일넓이 / 썸네일높이 |
| 11 | $textLength | 요약문 길이(자동박스 설정 기본값) |
| 12 | $strLen | 요약문 길이 (이미지가 있는 자동박스 - ※주의: 이미지가 없으면 설정된 값만큼 길어짐, 0으로 설정시 요약글노출 안됨) |
| 13 | $summary | 요약문 문장 (※주의: 이미지가 없으면 설정된 값만큼 길어짐, 0으로 설정시 요약글노출 안됨) |
| 14 | $ymdhis1 ~ 3 | 년월일 시간분초 (1:-, 2:., 3:한글) |
| 15 | $ymdhi1 ~ 3 | 년월일 시간분 |
| 16 | $ymdh1 ~ 3 | 년월일 시간 |
| 17 | $ymd1 ~ 3 | 년월일 |
| 18 | $display_time | 현재시간에서 지난 시간표기(예: 타임라인) |
| 19 | $represent_link_name | 대표 박스명 |
| 20 | $represent_link_url | 대표링크 |
폰트
| font-size | 0px | 10px | 20px | 22px | 31px |
|---|---|---|---|---|---|
| line-height | 1.5 | [font-size] + 8px | [font-size] + 10px | ||
| letter-spacing | -0.5px | -0.75px | -1px | ||
HTML v11.21.0.0
CSS Loader
텍스트
("예약어", "Class", "태그", "주소")
이미지
("예약어", "Class", "대체이미지", "태그", "주소")
관련기사
("Class", "Item Class", "노출개수")
배열변수
Grouping
Accessibility v11.21.0.0
Slick slider "dots"의 크기가 24px 이하 일 경우
Slick slider "slidesToShow"가 2이상 일 경우
Short Code
shortCodeCustom을 이용한 slick js문서 작성시 주의사항입니다.
infinite: true로 설정된 경우,
복제된 자동박스의 css(style)을 인식하지 못하는 문제가 있어 아래와 같이 수정해주세요.
1. autobox.php내에 아래 내용으로 수정합니다.
2. 해당 폴더 내에 autobox.css 내용을 복사합니다.
3. slick js로 작업 된 shortCodeCustom내의 shortCodeSource.php에 아래 예시와 같이 내용을 작성합니다.
Custom Functions
.auto-boll
.auto-titles
.auto-subtitles
.auto-sums
.auto-section
.auto-name
.auto-date
.auto-info
.auto-images
.auto-relation
.auto-relation-container
.photo-titbg
.photo-titbg.gradient
.auto-btn
.auto-btn.absolute
.auto-btn-icon
.auto-btn-backdrop
.auto-pager
.auto-pager.absolute
.auto-pager.absolute.top
.auto-pager.absolute.right
.auto-pager.white 지정위치사용
Older version patch v11.21.0.0
v11.21.0.0 ~ v11.21.0.4 slick dots 아이콘 없이 숫자로 나올 경우
(접근성 이슈로 인한 수정)