layout default

grid
grid 및 전체 스타일 가이드는 기본적으로 다음 페이지를 참조해 주세요.
12 분할 grid를 사용하며, 컨텐츠 영역 내부에서 2분할까지 default.
메뉴에서 3영역까지 사용함. 컨텐츠 영역은 8영역 사용하고 1영역은 여백으로 남김.
3분할 시 8분할 내에서 3분할을 하기 때문에 전체 12분할에 맞지는 않습니다.
content 2분할시 샘플
content 3분할시 샘플

레이아웃 variables

breakpoints
xs: 0
sm: 600px
md: 1020px (980px + 40)
lg: 1320px (1280px + 40)
xl: 1960px (1920px + 40)
container-max-widths
md: 1320px ($grid-breakpoints.lg)
lg: 1320px ($grid-breakpoints.lg)
xl: 1960px ($grid-breakpoints.xl)
grid-gutters
gutters 는 일반적으로 8 * @ 형태로 잡습니다. heybit는 8 x 2, 8 x 5를 기준으로 잡았습니다.
xs: 16px
sm: 16px
md: 40px
lg: 40px
xl: 40px

레이아웃 variables

breakpoints
xs: 0
sm: 600px
md: 1020px (980px + 40)
lg: 1320px (1280px + 40)
xl: 1960px (1920px + 40)
container-max-widths
md: 1320px ($grid-breakpoints.lg)
lg: 1320px ($grid-breakpoints.lg)
xl: 1960px ($grid-breakpoints.xl)

레이아웃

single-page
로그인과 같이 컨텐츠 량이 적은 경우에 사용하는 레이아웃
PC 일때 width: 320px
mobile 일때 padding: 20px
main-page
index(투자하기), 회사소개 등 sub menu가 없는 페이지를 위한 가이드.

메뉴가 없는 경우, section간의 기본 margin, padding 이 차이가 있음.
split-flex
content 내부에서 grid를 사용하는 경우 split-flex 를 선언해서 브라우저 호환성 개선
현재 음수마진을 이용해 grid 레이아웃을 잡고 있는데,
content 영역에서 grid를 사용 하는 경우 mobile 화면에서 스크롤 버그가 생김. (음수마진: 크롬 제외, negative margin)
split-flex의 경우, 모바일에서는 음수 마진을 사용하지 않습니다.
content-tabs
내부에서 사용하는 tab bar