자동박스
| D | P | V | M | H | T | |
|---|---|---|---|---|---|---|
| A | 일반기본 | 포토기본 | 영상기본 | 중요기본 | 헤드기본 | 모바일기본 |
| R | 일반롤링 | 포토롤링 | 영상롤링 | 중요롤링 | 헤드롤링 | 모바일롤링 |
| 1차 | 2차 | 비고 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| .auto-article | .item | 자동박스의 기본선언 | |||||||||
| .auto-boll | 제목 앞 점표기 (예 : class="auto-article auto-boll") | ||||||||||
| .auto-reset | 제목 앞 점표기 미사용 (auto-boll 선언 내 .auto-titles클래스 부모에 사용하면 앞점표기가 나오지 않음) | ||||||||||
| .tiles-갯수 |
기사 가로 배치 박스형 / 자식요소에 .item를 같이 이용 (예 : class="auto-article tile-2x")
|
||||||||||
| markup 속성 |
기본요소가 되는 속성들을 구성한 class
|
||||||||||
| 컨텐츠 정렬 |
컨텐츠 요소가 사진과 본문글이 좌우로 배치 될 경우 상하 정렬 속성
<a class="auto-valign">
|
||||||||||
| .frame | 기본요소 | 이미지 가로 위치/사이즈 조정 (auto-images 부모레이어 / 예 : class="frame float-left width-120") | |||||||||
| .line | 이미지 외곽선 (예 : class="frame line") | ||||||||||
| .width-크기 | 가로크기 | ||||||||||
| .height-크기 | 세로크기(※ 지정시 이미지크기는 고정값으로 변경) | ||||||||||
| .auto-images | [style*="background-image"] | 이미지클래스 (예 : class="auto-images" style="background-image:url(이미지주소)") | |||||||||
|
.ratio-32 (3:2) .ratio-43 (4:3) .ratio-11 (1:1) |
- 기본 비율 16:9
|
||||||||||
| .line | 이미지 외곽선 (예 : class="auto-images line") | ||||||||||
| .contain | 이미지 비율에 따라 노출 (예 : class="auto-images contain") | ||||||||||
| .radius | 둥근 이미지 (예 : class="auto-images radius") | ||||||||||
|
.photo .photo-2 |
포토 아이콘 (예 : class="auto-images photo") | ||||||||||
|
.movie .movie-2 .movie-3 |
동영상 아이콘 (예 : class="auto-images movie") | ||||||||||
| .grayscale |
- 흑백표기 (예 : class="auto-images grayscale") - IE10이상부터 적용. |
||||||||||
| .thumb | background대신 img태그 이용시 사용 (예 : class="auto-images thumb") | ||||||||||
| .auto-mov | 동영상 노출 (태그가 iframe 또는 object일 경우 부모에 class="auto-mov"를 감싸는 형태[16:9로 노출]) | ||||||||||
| .auto-relation | 관련기사 앞 └ 표기 | ||||||||||
| .auto-pager | 롤링형 박스 이동 점 | ||||||||||
| .photo-btn | 롤링형 박스 화살표 | ||||||||||
| .over | 마우스 오버시 화살표 노출형 (autobox.style.css 문서 참조) | ||||||||||
| .photo-titbg | 사진 위 반투명 제목 | ||||||||||
| .onload | a 태그에 색상(auto-font)과 같이 사용 / 마우스오버시 밑줄표기 | ||||||||||
| .auto-font(색상) | A | #292728 | |||||||||
| B | rgba(0,0,0,.55) | ||||||||||
| C | rgba(0,0,0,.7) | ||||||||||
| D | #006f97 | ||||||||||
| E | rgba(0,0,0,.75) | ||||||||||
| F | #fff | ||||||||||
| G | #344289 | ||||||||||
| H | #242961 | ||||||||||
| I | #496579 | ||||||||||
| J | rgba(255,255,255,.65) | ||||||||||
| K | rgba(0,0,0,.4) | ||||||||||
| L | #29aba5 | ||||||||||
| # | 변수명 | 비고 |
|---|---|---|
| 1 | $idxno | 기사 고유번호 |
| 2 | $link_url | 링크 |
| 3 | $link_sec | 섹션링크 |
| 4 | $title | 제목 |
| 5 | $sub_title | 부제목 |
| 6 | $user_name | 기자명 |
| 7 | $sectionName / $sectionLink | 섹션명 / 링크(1차만) |
| $subSectionName / $subSectionLink | 섹션명 / 링크(2차까지) | |
| $serialName / $serialLink | 섹션명 / 링크(모두) | |
| 8 | $flash_tag | 동영상 |
| 9 | $oriImgFileUrl | 이미지원본 |
| 10 | $thumbImgFileUrl | 썸네일 |
| 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 | 현재시간에서 지난 시간표기(예: 타임라인) |