가이드
🌹레이아웃
※ 콘텐츠의 구조는 기본적으로 section.sec > div.inner 순으로 하며 .inner의 넓이에 따라 클래스를 추가한다 (하단 참고)
※ 서브 페이지의 .contents-wrap 에는 .sub 클래스를 추가한다.
※ !!.inner 사용에 유의!!
.inner (w 1800)
.inner.slim (w 1496)
.inner.board (w 1242)
.inner.board-slim (w 986)
.inner.info (w 732)
.form-wrap (w 478)
🌹텍스트
.tit01: 폰트 사이즈 - 40px
.tit02: 폰트 사이즈 - 36px
.tit03: 폰트 사이즈 - 32px
.txt01: 폰트 사이즈 - 28px
.txt02: 폰트 사이즈 - 24px
.txt03: 폰트 사이즈 - 20px
.txt04: 폰트 사이즈 - 16px
.m: 폰트 굵기 - 500 Medium (기본 설정)
.sb: 폰트 굵기 - 600 Semi Bold
.b: 폰트 굵기 - 700 Bold
.eb: 폰트 굵기 - 800 Extra Bold
.h: 폰트 굵기 - 900 Heavy
.text-l: 텍스트 왼쪽 정렬 (기본 설정)
.text-c: 텍스트 가운데 정렬
(단, .sec-tit 내에서 가운데 정렬을 원할 시 .sec-tit에 .c 클래스를
추가한다.)
.text-r: 텍스트 오른쪽 정렬
.c-red: 텍스트 색상 레드 var(--color-red): #E2151E
.c-yellow: 텍스트 색상 옐로우 var(--color-yellow): #F6A40E
타이틀 내 숫자가 들어가는 경우 span.num을 추가한다.999
🌹기타 텍스트
-
레드 배지
.badge.red -
화이트 배지
.badge.wh
-
00
.label.red -
00
.label.red -
00
.label.gray
- 앞에 점이 붙는 리스트 ul.dot-txt-list > li
- 앞에 점이 붙는 리스트 ul.dot-txt-list > li
- 앞에 점이 붙는 리스트 ul.dot-txt-list > li
- 앞에 점이 붙는 리스트 회색 ul.dot-txt-list.gray > li
- 앞에 점이 붙는 리스트 회색 ul.dot-txt-list.gray > li
- 앞에 점이 붙는 리스트 회색 ul.dot-txt-list.gray > li
🌹아이콘
※ 기본 설정: i.ico
※ 검은색 아이콘을 사용할 시 .bk 클래스를 추가한다.
- .ico-search
- .ico-search.bk
- .ico-close
- .ico-close.bk
- .ico-close-sm
- .ico-close-sm.bk
- .ico-plus
- .ico-plus.bk
- .ico-arrow-top-right
- .ico-arrow-top-right.bk
-
.ico-arrow-toggle
해당 아이콘 사용 시 부모 클릭하면
.open 클래스를 토글시킨다. -
.ico-arrow-toggle.bk
해당 아이콘 사용 시 부모 클릭하면
.open 클래스를 토글시킨다. - .ico-user
- .ico-user.bk
- .ico-alarm
- .ico-alarm.bk
🌹버튼
※ 기본 설정: button.btn + 스타일(fill/line), 색상(wh/bk) 등을 지정한다.
※ 버튼 비활성화 처리시 button 태그에 disabled 속성을 추가한다.
※ mo에서 .btn은 full-size가 된다. 원하지않으면 .no-full 클래스를 추가한다.
※ mo, pc 항상 full-size를 원하면 .sz-full 클래스를 추가한다.
- .btn.btn-fill.wh
- .btn.btn-fill.bk
- .btn.btn-fill.gr
- .btn.btn-fill.red
- .btn.btn-line.wh
- .btn.btn-line.yellow
- .btn.btn-line.bk
- .btn.btn-line.mo-noline
- .btn.md
- .btn.lg
- .btn.wide
- .btn.btn-ico
- .btn.btn-underline
-
더보기/접기 버튼은 .txt랑 같이 사용한다.
텍스트가 4줄 이하시 버튼은 보이지 않는다. -
더보기/접기 버튼은 .txt랑 같이 사용한다.
텍스트가 4줄 이하시 버튼은 보이지 않는다.
반대의 경우 버튼이 생성된다.
더보기를 클릭해보세요.
안녕하세요?
👽 버튼 위 간격이 필요할때에는 버튼 묶음을 사용한다.
기본형(margin-top: 60px)
👽 버튼 묶음 좁은형(margin-top: 30px): .narrow 클래스를 추가한다.
👽 버튼 묶음 멀티형: .multi 클래스를 추가한다.
👽 버튼 묶음 반전형: .reverse 클래스를 추가한다. (pc에서는 순서가 반대, mo에서는 원래 순서대로 보임)
🌹탭
👽 탭 전환형: .tab-move 클래스를 추가한다.
👽 탭 메뉴 full-size형: .w-full 클래스를 추가한다
👽 탭 스크롤형: .tab-sc 클래스를 추가한다. (현재 페이지 상단 참고)
🌹필터
🌹카드 리스트
※ 기본 구조: .card-wrap > .card-list > .card-item
※ 슬라이드가 아닌 리스트 형식으로 사용할 시 .list-style 클래스를 추가한다.
👽 세로형: .vertical 클래스를 추가한다.
👽 가로형: .horizon 클래스를 추가한다.
.txt-wrap에 .lg 클래스를 추가하면 메인 텍스트 사이즈가
커진다. (아래의 리스트 중 a:nth-child(3),(4))
👽 hover시 상세보기 버튼 생성
👽 hover시 video 아이콘
👽 hover시 크게 보기 아이콘: .card-list에 .view-popup 클래스를 추가한다.
크게 보기
카드 클릭 시 크게 보기 팝업이 나온다.
a.card-list > .img-wrap에 .layer.reverse 클래스를 추가하고, .preview-wrap을 추가한다.
크게 보기
카드 클릭 시 크게 보기 팝업이 나온다.
이 때 a태그 href 속성에 이미지 경로를 넣어준다.
크게 보기
카드 클릭 시 크게 보기 팝업이 나온다.
a.card-list > .img-wrap에 .layer.reverse 클래스를 추가하고, .preview-wrap을 추가한다.
크게 보기
카드 클릭 시 크게 보기 팝업이 나온다.
이 때 a태그 href 속성에 이미지 경로를 넣어준다.
👽 이벤트형: .card-list에 .card-event 클래스를 추가한다.
👽 텍스트박스가 내부에 있는 유형: .card-list에 .card-contain 클래스를 추가한다.
🌹토글
토글 컨텐츠
토글 컨텐츠
🌹슬라이드
※ 밝은 배경에서는 .slide-control과 .slide-dot-wrap에 .bk 클래스를 추가한다.
※ .slide-control과 .slide-dot-wrap이 pc에만 보이게 하려면 .pc 클래스를, mo에서만 보이게 하려면 .mo 클래스를 각 원하는 태그에 추가한다.
👽 기본 control: .slide-wrap에 .circle-arrow 클래스를 추가한다.
👽 pc에서는 슬라이드, mo에서는 리스트형식으로 변경하는 유형: .swiper에 .mo-list 클래스를 추가한다.
🌹레이어 팝업
- 공유하기 팝업 아이콘형
- 공유하기 팝업 .btn형
🌹알럿
🌹폼
👽 기본형
네이버에 연결되어 있습니다.
에러 텍스트
하이라이트 텍스트
유효한 인증번호를 입력해주세요.
👽 두 줄 이상인 유형
mo에서 full-size를 원하지않으면 .mo-full 클래스를 제거한다.
👽 폼 사이에 컨텐츠 넣을 때 .form-con 을 추가한다.
- 신청 시간 기준 1시간 이내의 방송은 알림 신청이 불가합니다.
- 방송 알림 시간은 당사의 방송 편성에 따라 변경될 수 있습니다.
- 방송 알림은 방송 10분 전 발송되며, 심야/새벽 시간에도 동일하게 방송 알림이 발송됩니다.
- 방송 알림은 카카오 알림톡으로 발송됩니다.(알림톡 수신 불가 시 1회에 한해 SMS로 발송됩니다.)
👽 폼 컨텐츠 안에 약관동의를 넣을 때
방송 알림톡 서비스 신청 및 이용을 위한 개인정보 수집∙이용동의
수집∙이용목적 : 방송 알림톡 신청 및 알림톡 서비스 이용(편성 최초 1회), 문의사항 응대
수집 항목 : 이름, 휴대폰 번호
보유기간 : 방송 알림톡 서비스 신청일로부터 최대 1개월
정보 주체는 방송알림 서비스 신청∙이용을 위한 개인정보수집을 거부할 권리가 있습니다.
단, 개인정보수집 • 이용을 거부할
경우 방송 알림 서비스 이용이 불가합니다.
👽 텍스트와 폼이 inline일 경우
티캐스트 패밀리 사이트의 평생회원으로 가입하시겠습니까?
🌹테이블
👽 th 가로형: .horizon 클래스를 추가한다.
설치 |
설치대수 |
설치위치 |
촬영범위 |
|---|---|---|---|
| CCTV | 2대 | 본사 엘리베이터 홀 | 출입인원 식별이 가능한 범위로 촬영 |
👽 th 세로형: .vertical 클래스를 추가한다.
|
수집∙이용 |
홈페이지 회원 가입 및 서비스 이용, 본인확인 및 서비스에 대한 안내 또는 고지사항 전달, 불량 회원 또는 부정이용 방지, 서비스 관련 문의 및 민원대응, 서비스 개선 및 최적화 계발을 위한 통계분석 및 연구조사 |
|---|---|
|
수집항목 |
(필수) 아이디, 비밀번호, 이름, 생년월일, 이메일, 휴대전화번호 |
|
보유기간 |
회원 탈퇴 시점으로부터 최대 7일 이내 또는 정보주체의 동의 철회 요청일로부터 영업일 기준 5일 이내 |
👽 테이블 스크롤형: .scrollable 클래스를 추가한다.
위탁처리 정보 |
수탁업체의 명칭 |
위탁하는 업무의 내용 |
보유 및 이용기간 |
|---|---|---|---|
회원가입 필수정보 및 선택정보 전체 |
㈜티시스 |
회원관리, 회원제 서비스 이용에 따른 본인확인, 불만처리 등 민원처리, 고지사항 전달, 웹사이트 및 시스템 관리 |
회원탈퇴 시 혹은 위탁계약 종료 시까지 |
이름, 아이핀번호, 휴대전화번호, 신용카드번호 |
㈜나이스신용평가정보 |
본인인증, 아이핀발급/인증 |
본인확인기관에 이미 보유하고 있는 개인정보이기 때문에 별도로 저장하지 않음 |
댓글 작성하기
{{ opentalkContent.length }}/500