Styleguide>Other | 울산광역시 탄소중립지원센터

Styleguide

Other

Styleguide

Other

Other>Styleguide

INPUT,CHECKBOX

c-tab01

c-tab02

01. 컬러 & 폰트

컬러

.cbg-sp1 .cbg-p1 .cbg-dp1 .cbg-p2 .cbg-dp2 .cbg-p3 .cbg-dp3 .cbg-p4 .cbg-dp4
.c-sp1 .c-p1 .c-dp1 .c-p2 .c-dp2 .c-p3 .c-dp3 .c-p4 .c-dp4

폰트

기본

NotoSans - Regular / letter-spacing : -25(-0.04em) / color : #555 / line-height: 30px / font-size : 18px

국문

font-family:Noto Sans KR, sans-serif
DemiLight / Regular / Medium / Bold

영문

font-family:roboto, sans-serif
Light / Regular / Medium / Bold

02. 타이틀

타이틀 스타일1 : .c-tit01

타이틀 스타일2 : .c-tit02

타이틀 스타일3 : .c-tit03

내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.내용이 시작됩니다.

03. 리스트

c-list01

.tit :리스트 스타일 1
긴제목일 경우 제목과 줄바꿈 할 경우 텍스트를 span.txt 로 감싸주면 됨
- ul > ul 리스트 스타일 1-1
- ul > ul 리스트 스타일 1-2
제목없는 리스트
- ul > ul 리스트 스타일 1-1
- ul > ul 리스트 스타일 1-2

c-list02.han

제목 :ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목
ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목없는 리스트
- ul > ul 리스트 스타일 1-1
  내용이 길어지는 경우 일케 출력됨
- ul > ul 리스트 스타일 1-2

c-list02.num

제목 :ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목
ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목없는 리스트
- ul > ul 리스트 스타일 1-1
  내용이 길어지는 경우 일케 출력됨
- ul > ul 리스트 스타일 1-2

c-list02.snum

제목 :ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목
ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목없는 리스트
- ul > ul 리스트 스타일 1-1
  내용이 길어지는 경우 일케 출력됨
- ul > ul 리스트 스타일 1-2

c-list03

제목 :ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목
ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목없는 리스트
- ul > ul 리스트 스타일 1-1
  내용이 길어지는 경우 일케 출력됨
- ul > ul 리스트 스타일 1-2

c-list03.cor

제목 :ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목
ul 리스트 스타일 변형
내용이 길어지는 경우 이렇게 출력됨
제목없는 리스트
- ul > ul 리스트 스타일 1-1
  내용이 길어지는 경우 일케 출력됨
- ul > ul 리스트 스타일 1-2

c-list04

리스트 스타일
리스트 스타일
리스트 스타일

c-list04.cor

리스트 스타일
리스트 스타일
리스트 스타일

04. 안내문

기본 설명인 경우 : .info-ex (기본 block)

중요 설명인 경우 : .info-ex02 (기본 block)

잘못된 설명인 경우 : .info-ex03 (기본 block) : 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우 글자가 길어질경우

기본 설명인 경우 : .info-ex01 (확장 .inline) 중요한 설명인 경우 : .info-ex02 (확장 .inline) 잘못된 표기인 경우 : .info-ex03 (확장 .inline)

박스없이 여러줄 안내문 .info-list
박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.
박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.

박스없이 여러줄 안내문 .info-list.ico02
박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.
박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.

여러줄 안내문 .info-list.ico03
여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.
박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.

안내박스 .info-box (.ico01~.ico04)

타이틀 .info-tit

여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다. 박스없이 여러줄 안내문 용도로 사용가능한 안내문입니다.

ico01
ico02
ico03
ico04

안내박스 .info-box02

타이틀 .info-tit

안내박스 .info-box03

박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용

.ico02 박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용

.ico03 박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용
박스없이 여러줄 안내문 사용

입시 안내박스 .top-info-type1

DIT

2008학년도부터 학사학위 전공심화과정을 마치면 일반 4년제 대학과 동등한 학사학위가 수여됩니다.

링크버튼

입시 안내박스 .top-info-type2

글로컬대학

담대한 혁신으로 지역의 산업·사회 연계 특화 분야에서 세계적 경쟁력을 갖추고 혁신을 선도하는 대학

입시. 교과목 개요 공통

01 타이틀이 들어옵니다. .head-sec.color1

제목 리스트 스타일
긴 제목 리스트 스타일
- ul > ul 리스트 스타일 1-1
- ul > ul 리스트 스타일 1-2

02 타이틀이 들어옵니다. .head-sec.color2

최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.

03 타이틀이 자리

작은 타이틀 1

작은 타이틀 2

작은 타이틀 3

최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다. 최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.최소 한줄이상의 제목과 내용으로 구성되어서 나오는 안내문 입니다.

05. 테이블 : tbl-type01

구분

제목1-1

제목1-2

tfoot 왼제목1-1

내용1-1

내용1-2

왼제목1-1

내용1-1

내용1-2

왼제목1-1

내용1-1