반응형 너비
전체 반응형 콘텐츠 컨테이너
전체 화면의 적절한 너비와 위치를 설정해줍니다. 기본은 아무것도 설정하지 않으면 vc-body-s로 자동 적용됩니다. 모바일에서 변화를 느끼실 수 없습니다.
- vc-body-fill: 가능한 크게
- vc-body-s: 1280px까지 가능한 크게
- vc-body-m: 1920px까지 가능한 크게
- vc-body-l: 1920px까지 가능한 크게
개별 반응형 콘텐츠 컨테이너
개별 요소의 적절한 너비와 위치를 설정해줍니다. 모바일에서 변화를 느끼실 수 없습니다.
- vc-responsive-fill: 가능한 크게
- vc-responsive-s: 1280px까지 가능한 크게
- vc-responsive-m: 1920px까지 가능한 크게
- vc-responsive-l: 1920px까지 가능한 크게
Display
Display
From PC
To PC
Grid & Flex
Grid 컨테이너
Flex 컨테이너
요소에 flex를 적용하려면 vc-flex-container 클래스를 사용합니다. vc-flex-column-container을 이용하면, 세로 방향의 flex를 바로 만들 수 있습니다. flex에 속성을 설정하려면 vc-flex-container [flex속성]-[값] 형식의 클래스를 추가합니다. 지원하는 flex 속성은 justify, align, wrap, direction 입니다. flex 자식 요소의 비율을 설정하려면 vc-flex-[값] 형식의 클래스를 추가합니다. 값은 1부터 4까지 허용됩니다.
1
4
4
1
1
4