이 문서는 완성본이 아니며 작성 중입니다.
페이지 가이드
시작하기
HTML5, CSS3, jQuery,
브라우저와 디바이스 지원
페이지는 HTML5와 CSS3를 기반으로 구성이되어있습니다. 아래와 같이 브라우저와 디바이스 또는 브라우저의 버전에 따라 호환이 달라질 수 있습니다.
브라우저 지원
아래에 명시된 브라우저는 최신버전을 지원합니다. 윈도우의 인터넷 익스플로러는 9-11까지를 지원합니다. (8지원은 미결정)
| 크롬 | 파이어폭스 | 인터넷 익스플로러 | 오페라 | 사파리 | |
|---|---|---|---|---|---|
| 안드로이드 | 지원 | 지원 | 해당사항 없음 | 미지원 | 해당사항 없음 |
| iOS | 지원 | 해당사항 없음 | 해당사항 없음 | 미지원 | 지원 |
| 윈도우 | 지원 | 지원 | 지원 | 지원 | 해당사항 없음 |
인터넷 익스플로러 8, 9
인터넷 익스플로러 8과 9 또한 지원합니다. 하지만 몇몇 HTML5, CSS3 요소들은 완전히 브라우저에 구현되지 않을 수 도 있습니다.
외부 라이브러리 지원
접근성
CSS
색상
색상은 흰색, 회색, 파란색, 녹색, 노란색, 빨간색, 검정색 총 6가지를 지원한다.
#FFFFFF
#777777
#337ab7
#5cb85c
#f0ad4e
#d9534f
#000000
배경색 변경하기
테두리색 변경하기
폰트색 변경하기
그리드 시스템
그리드 시스템이 다양한 디바이스에서 어떻게 작동하는에 대한 설명
그리드 옵션
| 아주 작은 디바이스 스마트폰 (<768px) | 작은 디바이스 테블릿 (≥768px) | 중간 디바이스 데스크탑 (≥992px) | 큰 디바이스 테스크탑 (≥1200px) | |
|---|---|---|---|---|
| 컨테이너 넓이 | 100% (자동) | 750px | 970px | 1170px |
| 클래스 접두사 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 칼럼의 갯수 | 12 | |||
| 칼럼의 넓이 | 자동 | ~62px | ~81px | ~97px |
| 칼럼간 수평 간격 | 30px (칼럼 양 옆 15px씩) | |||
디바이스 크기 정보
디바이스 크기 정보예시: 일반
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
예시: 모바일과 데스크탑 대응
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
칼럼 시작위치 변경
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
칼럼 순서 변경
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9