중앙정렬
좌우 맨끝을 정확하게 맞춘다. 좌정렬
좌우 맨끝을 정확하게 맞춘다. 좌정렬
.clearfix 하단은 안되니 스타일 추가 필요
좌우 맨끝을 정확하게 맞춘다. 중앙정렬
좌우 맨끝을 정확하게 맞춘다. 우정렬
좌우 맨끝에 여백을 만든다.
상하좌우 여백을 동일하게 만든다.
좌우 간격 오차 :
퍼센트 계산에서 .even-grid 와 .column 은 각각 부모로 부터 계산되므로..
.gap4pct 인 경우 전체 가로폭 좌우가 2% 차이 나므로 2 - 2*(100/(2+100+2)) = 0.07692307692307692307692307692308% 의 오차가 발생한다.
가로 폭이 1000px 이라면 0.8px 정도 차이가 이므로 소수점 계산에서 1px 오차가 생긴다.
보통 화면에서 잘 감지되지 않으므로 그대로 사용하여도 무방하지만, 더 견고한 배치를 위해..
정확한 계산 값을 만들었다.
그리고, .gap2px ~ .gap40px 도 추가하였다.
갭(padding 값)이 % 이면 내포 깊이에 따라 부모의 width 에 상대적이므로 간격이 달라진다.
자식 .even-grid 와 .column 의 상하 여백은 0 으로 렌더링 된다. ( 20181105~ 기존 상하 갭 유지되게 수정함! )
부모 .column 은 정의된대로 padding-top 과 padding-bottom 값을 가진다.
자식 .even-grid 와 .column 의 상하 여백은 0 으로 렌더링 된다.
2줄 이상 표현될 경우 맨위 맨아래 여백은 줄간의 1/2 크기이다.
줄간격이 없으므로 2줄 이상 표현될 경우는 적당하지 않다.
그리드 스타일에 .large-offset-1{margin-left:8.333%;} 형태의 스타일을 정의하지 않았음.
필요하면 <div class="large-3 column hide-all show-large"></div> 등을 추가하여 만들 수 있다.
단, 그리드 컬럼 래퍼는 class="even-grid float-left" 이어야 한다.
그리드 스타일에 .end{float:right;} 형태의 스타일을 정의하지 않았음.
필요하면 .hide-all, .show-large 등을 이용하여 만든다.
단, 그리드 컬럼 래퍼는 class="even-grid float-left" 이어야 한다.
이거까지 하려면.. 스타일이 복잡해지므로.. 보류!
그리드 스타일에 .medium-collapse, .large-uncollapse 등의 스타일을 정의하지 않았음.
필요하면 스타일을 추가하여 만든다.
.even-grid 요소에 medium-uncollapse large-collapse 클래스가 있다면,
.column 요소에 대응하는 medium-6 large-6 클래스가 있어야 바르게 동작합니다.
<style>/*<![CDATA[*/
@media all and (min-width:640px){
.even-grid.medium-collapse{margin:0;}
.even-grid.medium-collapse>.column{padding:0;}
.even-grid.float-left.medium-collapse>.column{float:left;margin:0;padding:0;}
}
@media all and (min-width:1000px){
.even-grid.large-uncollapse{margin:1% -1%;}
.even-grid.large-uncollapse>.column{margin:0 -.25em 0 0;padding:1%;}
.even-grid.float-left.large-uncollapse{margin:1% -1%;}
.even-grid.float-left.large-uncollapse>.column{margin:0;padding:1%;}
}
/*]]>*/</style>
이거까지 하려면.. 스타일이 복잡해지므로.. 보류!
그리드 스타일에 .large-push-4, .large-pull-8 등의 스타일을 정의하지 않았음.
필요하면 스타일을 추가하여 만든다.
left 값이 이용된다.
<style>/*<![CDATA[*/
.even-grid>.small-push-2{left:16.666%;}
.even-grid>.small-push-7{left:58.333%;}
.even-grid>.small-pull-5{left:-41.666%;}
.even-grid>.small-pull-10{left:-83.333%;}
@media all and (min-width:640px){
.even-grid>.medium-push-5{left:41.666%;}
.even-grid>.medium-push-6{left:50%;}
.even-grid>.medium-pull-6{left:-50%;}
.even-grid>.medium-pull-7{left:-58.333%;}
}
@media all and (min-width:1000px){
.even-grid>.large-push-3{left:25%;}
.even-grid>.large-push-4{left:33.333%;}
.even-grid>.large-pull-8{left:-66.666%;}
.even-grid>.large-pull-9{left:-75%;}
}
/*]]>*/</style>
History : 20170413~ 20220223. 20200608. 20171105. 20170628. 20170626. 20170623. 20170414.