본문 컨텐츠 타이틀(h4)
본문 컨텐츠 타이틀(h5)
본문 컨텐츠 타이틀(h6) - 01
본문 컨텐츠 타이틀(h6) - 02
본문 컨텐츠의 기본 텍스트입니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo posuere elit, eget tristique orci fringilla sit amet. Nulla blandit eget tortor sit amet tristique. Quisque in ultrices nulla. Sed sed enim a dui tristique egestas. Nulla euismod elit in libero posuere lacinia. Phasellus ornare dui non felis malesuada imperdiet. (www.yu.ac.kr) Mauris et blandit ante. Quisque id imperdiet augue. Aenean non ultricies odio. Donec metus dui, gravida eget pretium vel, maximus accumsan enim. Mauris scelerisque consequat urna, eu facilisis magna sodales at. Fusce tempor est quis commodo vehicula. Morbi lacinia pharetra sem sit amet vulputate.
리스트 불릿
기본형
- 리스트 타입01-01
-
리스트 타입01-02
- 리스트 타입02-01 / 서브 목록에는 pd-tb10 부여
- 리스트 타입02-02
- 리스트 타입02-03
- 리스트 타입02-04
-
리스트 타입01-03
- 리스트 타입02-01 / 마지막 서브 목록에는 pd-t10 부여
- 리스트 타입02-02
- 리스트 타입02-03
- 리스트 타입02-04
Column 2 (.col02)
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
Column 3 (.col03)
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
- 리스트 타입01-01
배경이 있는 박스 컨텐츠
배경색이 있는 박스
본문 컨텐츠 내에서 배경색으로 분리되는 박스가 필요할 시 사용합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo posuere elit, eget tristique orci fringilla sit amet. Nulla blandit eget tortor sit amet tristique. Quisque in ultrices nulla. Sed sed enim a dui tristique egestas. Nulla euismod elit in libero posuere lacinia. Phasellus ornare dui non felis malesuada imperdiet. Mauris et blandit ante. Quisque id imperdiet augue. Aenean non ultricies odio. Donec metus dui, gravida eget pretium vel, maximus accumsan enim. Mauris scelerisque consequat urna, eu facilisis magna sodales at. Fusce tempor est quis commodo vehicula. Morbi lacinia pharetra sem sit amet vulputate.
배경색과 이미지가 있는 박스 (.type01)
본문 컨텐츠 내에서 배경색으로 분리되는 박스가 필요할 시 사용합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo posuere elit, eget tristique orci fringilla sit amet. Nulla blandit eget tortor sit amet tristique. Quisque in ultrices nulla. Sed sed enim a dui tristique egestas. Nulla euismod elit in libero posuere lacinia. Phasellus ornare dui non felis malesuada imperdiet. Mauris et blandit ante. Quisque id imperdiet augue. Aenean non ultricies odio. Donec metus dui, gravida eget pretium vel, maximus accumsan enim. Mauris scelerisque consequat urna, eu facilisis magna sodales at. Fusce tempor est quis commodo vehicula. Morbi lacinia pharetra sem sit amet vulputate.
배경색과 이미지가 있는 박스 (.type02)
본문 컨텐츠 내에서 배경색으로 분리되는 박스가 필요할 시 사용합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo posuere elit, eget tristique orci fringilla sit amet. Nulla blandit eget tortor sit amet tristique. Quisque in ultrices nulla. Sed sed enim a dui tristique egestas. Nulla euismod elit in libero posuere lacinia. Phasellus ornare dui non felis malesuada imperdiet. Mauris et blandit ante. Quisque id imperdiet augue. Aenean non ultricies odio. Donec metus dui, gravida eget pretium vel, maximus accumsan enim. Mauris scelerisque consequat urna, eu facilisis magna sodales at. Fusce tempor est quis commodo vehicula. Morbi lacinia pharetra sem sit amet vulputate.
배경색과 이미지가 있는 박스 (.type03)
본문 컨텐츠 내에서 배경색으로 분리되는 박스가 필요할 시 사용합니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo posuere elit, eget tristique orci fringilla sit amet. Nulla blandit eget tortor sit amet tristique. Quisque in ultrices nulla. Sed sed enim a dui tristique egestas. Nulla euismod elit in libero posuere lacinia. Phasellus ornare dui non felis malesuada imperdiet. Mauris et blandit ante. Quisque id imperdiet augue. Aenean non ultricies odio. Donec metus dui, gravida eget pretium vel, maximus accumsan enim. Mauris scelerisque consequat urna, eu facilisis magna sodales at. Fusce tempor est quis commodo vehicula. Morbi lacinia pharetra sem sit amet vulputate.
Table
테이블 기본형
반응형 시 각 컬럼이 갖고있는 비율대로 너비가 줄어듭니다. (column 수가 적을 시)
| 등급 | 평점 | 수업료 |
|---|---|---|
| A급 | 3.5이상 | 50% 감면 |
| B급 | 3.0~3.5 미만 | 40% 감면 |
테이블 모바일 스크롤형
반응형 시 모바일 디바이스(768px 이하)에서 너비가 일정 크기로 고정되고 가로스크롤이 생성되며, 스크롤 안내 아이콘이 활성화됩니다. (column 수가 많을 시)
| 종류 | 세부내역 | 수업료 | 비고 | |
|---|---|---|---|---|
| 면학장학금 | A급 | 평점 3.5이상 | 60% 감면 | 재학생은 직전학기 평점평균 (교학팀 일괄 확인 예정) 신입생은 직전학위과정 총 평점평균 (교학팀 일괄 확인 예정) |
| B급 | 평점 3.0~3.5 미만 | 40% 감면 | ||
| 조교장학금 | 교육조교 | 전액 감면 | 학부 학과 정원배정에 따름, 수강학기 4개월*20만원(교비) | |
| 연구조교 | 전액 감면 | 연구과제의 연구보조원(해당학기 6개월간) [3월~8월/9월~2월] | ||
링크버튼
기타 버튼들
버튼이 모바일에서 떨어지는 형태
감싸는 클래스 명 : title-btn-wrap
타이틀과 버튼이 모바일에서 가운데로 정렬되는 형태
감싸는 클래스 명 : title-btn-right-wrap, 내부 요소를 display:inline-block으로 vertical-align:middle할 수 있도록 했습니다.
우측 버튼 크기를 영문 사이트에서 자주 쓰이는 Site Link에 맞춰서 width를 고정했기 때문에 버튼 내 텍스트가 길어지면 width조절이 따로 필요합니다.
추가 안내 관련
텍스트 또는 테이블 등의 컨텐츠 하단에 추가 안내 사항 관련 텍스트 표시 형태 Type01
텍스트 또는 테이블 등의 컨텐츠 하단에 추가 안내 사항 관련 텍스트 표시 형태 Type02
텍스트 또는 테이블 등의 컨텐츠 하단에 추가 안내 사항 관련 텍스트 표시 형태 Type03 (컬러는 별도 지정)
이미지 박스
꾸미기 요소 (.corner)
