Susy Settings 기본 설정 #2

Susy Settings(gutters, Column-width, debug, etc..)

이전 포스팅 다음으로 계속 Susy Settings 에 대해 살펴보겠습니다.

Column Width

column-width [@type setting]

column-width 는 명시적인 컬럼의 넓이를 지정할 수 있습니다.

ㆍ key :       column-width

ㆍ Scope :    global, local

ㆍ Options : <length> | false / null

ㆍ Default :  false

<length> 는 유효한 unit(단위)를 사용하여 컬럼의 너비를 지정하고 일반적으로 정적(고정) 레이아웃에서 모든 그리드의 너비를 계산하기 위해 사용할 수 있습니다.

또한, 유동(fluid) 레이아웃에서도 컨테이너의 outer 최대 넓이를 계산하기 사용할 수도 있습니다.

false/null 은 fluid layout 에서는 대개 명시적인 column-width 가 필요치 않기 때문에 기본값이 false 입니다.( $susy 의 기본 글로벌 설정의 math 가 fluid 이므로)

Gutter Position

gutter-position [@type setting]

gutter-position 은 거터를 레이아웃 엘리먼트에 마진이나 패딩을 추가,설정하는 방법입니다.

ㆍ key :      gutter-position

ㆍ Scope :   global, local

ㆍ Options : before | after | split | inside | inside-static

ㆍ Default :  after

before 는 레이아웃 엘리먼트에 거터(gutters)를 margin-left 를 설정하고 after 는 margin-right 를 설정하게 됩니다. 

split 는 레이아웃 엘리먼트의 양쪽에 각각 margin 좌우값을 설정하게 되고 그리드의 edges(가장자리)는 제거되지 않습니다.

inside 는 레이아웃 엘리먼트의 양쪽으로 padding 을 설정합니다.

before, after 는 문서 흐름방향이 ltr 일 경우 위의 설정값이 기본이지만 flow: rtl 일 경우에는 그 반대가 됩니다.

inside-static 은 inside 와 비슷하지만 정적 레이아웃에서 사용하는 듯 합니다. 

inside-static 일 때 column-width 가 설정되어 있지 않으면 컴파일 에러가 나는 걸로 보아 static layout 과 연관이 있을 것으로 판단되어집니다.(정확하지 않음)

거터 포지션을 기본값으로 사용할 시 after 이기 때문에 레이아웃 배치에 행의 마지막 엘리먼트의 거터(margin-right)를 제거할 필요가 있을 것이고,

before 라면 첫번째 엘리먼트의 거터(margin-left)를 제거할 필요가 생길 여지가 있습니다.(대부분의 디자인을 보았을 때...)

Global Box Sizing

global-box-sizing [@type setting]

Susy 는 전역적으로 박스모델(border-box, content-box)을 변경할 수 있습니다.

ㆍ Key :      global-box-sizing

ㆍ Scope :   global

ㆍ Options : border-box | content-box

ㆍ Default :  content-box

content-box 는 사용자가 구체적 설정을 하지 않는 한 대부분의 브라우저에서 기본으로 사용되는 박스모델입니다.

border-box 는 width 가 padding 과 border 까지 포함하는 하는 박스모델로써, Susy2 의 border-box-sizing 믹스인을 사용하여 변경할 수 도 있습니다.

다음의 CSS 박스모델 참고하세요.

MDN box-sizing-documentation 둘러보기

Last Flow

last-flow [@type setting]

last-flow 는 float(레이아웃 배치기법)를 사용할 때 행의 마지막 엘리먼트의 플롯 방향을 의미합니다.

ㆍ key :       last-flow

ㆍ Scope :   global

ㆍ Options : from | to

ㆍ Default :  to

Debug

debug [@type setting block]

Susy2 는 레이아웃 설계시에 사용자의 레이아웃을 가시적으로 볼 수 있도록 도움을 주기 디버깅을 지원하고 있습니다.

이러한 디버깅 설정은 그리드 시스템 환경을 제어하는데 도움이 됩니다.

ㆍ key : debug

ㆍ Scope : global, local(cotainer only)

ㆍ Options : <map of sub-settings>

$susy: (
        debug: (
                image: show,
                color: blue,
                output: overlay,
                toggle: top right,
        ),
);

! 주의

Susy 그리드 이미지는 완전 정확하지는 않습니다. 브라우저마다 여분의 서브 픽셀로 인해 백그라운드 이미지에 오차가 있을 여지가 있습니다.

그래서 디버깅 이미지는 러프하게 사용하시길 바랍니다.

debug image [@type setting]

디버그 그리드 이미지는 on, off 로 토글(전환)하여 사용할 수 있습니다.

ㆍ key :       debug image

ㆍ Scope :   global, local[container only]

ㆍ Options : show | hide | show-columns | show-baseline

ㆍ Default :  hide

show 그리드 이미지는 디버깅 목적을 위해 컨테이너 요소의 배경에 그리드 이미지를 보여줍니다.

만약 사용자가 Compass vertical rhythms 이나 $base-line-height 을 설정한다면 Susy 는 베이스라인(baseline) 그리드도 보여줄 것입니다.

hide 는 디버깅 이미지를 숨겨주고 기본 설정값은 hide 입니다.

show-columns 는 baseline 그리드를 설정하더라도 수평 그리드 컬럼만 나타납니다.

show-baseline 은 $base-line-height 변수를 이용하면 베이스라인 그리드만 보여줄 것입니다.

debug output

디버그 이미지는 컨테이너의 배경(bg) 또는 overlay 효과로 출력할 수 있습니다.

ㆍ Key :      debug output

ㆍ Scope :   global, local[container only]

ㆍ Options : background | overlay

ㆍ Default :  background

Jaehee's WebClub