전용뷰어로 보기

페이지 가이드

시작하기

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

구성 요소

아이콘 폰트

아이콘 폰트 확인하기