[CSS] SASS로 반응형 그리드 프레임워크 업그레이드
ej 프레임워크 사용법 살펴보기
- ej-spacing-xs-30: xs 이상에서 칼럼의 여백을 30px로 둔다.
- ej-md-1-4: md 이상에서 100% 기준으로 1/4 사용하겠다.
- ej-hidden-below-500: 500 미만의 세계에서 숨긴다.
- ej-hidden-below-xs: xs 이하의 세계에서 숨긴다.
- ej-clear-both-below-md: md 이하의 세계에서 clear both를 건다.
- ej-ratio-100-50: 너비 100% 높이 50% 비율을 가진다.
- ej-ratio-lg-100-100: lg 이상에서 너비 100% 높이 100% 비율을 가진다.
- ej-ratio-400-100-100: 화면크기 400 이상에서 너비 100% 높이 100% 비율을 가진다.
ej 프레임워크 연습
ej 프레임워크 수정
HTML
<div class="ej-container ej-spacing-xs-3">
<div class="ej-row ej-spacing-md-10 sj-spacing-sm-20 ej-spacing-xs-30">
<div class="ej-col ej-lg-4-5 ej-md-3-5 ej-sm-2-5 ej-xs-1-5"></div>
<!--
lg 이상에서 4/5 사용
md 이상에서 3/5 사용
sm 이상에서 2/5 사용
xs 이상에서 1/5 사용 -->
<div class="ej-col ej-clear-both-below-md ej-lg-1-5 ej-md-2-5 ej-sm-3-5 ej-xs-4-5">
<!-- lg 이상에서 1/5 사용
md 이상에서 줄바꿈, 2/5 사용
sm 이상에서 3/5 사용
xs 이상에서 4/5 사용 -->
</div>
</div>
</div>
CSS(SCSS)
// 라이브러리 시작
// 기본 콘테이너 최대 너비
$ej-container-max-width-px: 980px;
// 한줄에 들어갈 수 있는 그리드의 최대 개수
$ej-col-max-no: 8;
// 화면 1000 부터 300 까지 25px 간격으로 반응형 숨김 클래스 만들기
$ej-hidden-below-max-width: 500;
$ej-hidden-below-interval-width: 50;
// 칼럼의 최대 간격
// 50으로 하면 0부터 50
$ej-spacing-max-width: 30;
$ej-spacing-interval-width: 1;
$ej-ratio-max-percent_no: 250;
// 가로세로 비율에서 세로의 최대 비율
// 가로는 늘 100이고 세로는 40 ~ 250
$ej-ratio-interval-percent_no: 5;
// 가로세로 비율
$ej-ratio-avobe-min-width:300;
$ej-ratio-avobe-max-width:800;
$ej-ratio-avobe-interval-width:10;
// 화면 대역~
$band-infos: (
'xs': ('width': 767),
'sm': ('width': 991),
'md': ('width': 1199),
'lg': ()
);
// 여기서 부터 생성기!!
$band-codes: map-keys($band-infos);
$smallest-band-code: nth($band-codes, 1);
$biggest-band-code: nth($band-codes, length($band-codes));
@function getMapCounts($map) {
$count:length(map-values($amp));
@return $count;
}
.ej-container {
max-width: $ej-container-max-width-px;
margin: 0 auto;
}
.ej-container-fluid {
}
.ej-row::after {
content: "";
display: block;
clear: both;
}
.ej-row > .ej-col {
float: left;
box-sizing: border-box;
width: 100%;
}
@function initBandInfos($band-infos) {
$min-width: 0;
@each $row in $band-infos {
$band-code: nth($row, 1);
$band-info: nth($row, 2);
$width:map-get($band-info, 'width');
$band-info:map-merge($band-info, ('min-width': $min-width));
@if ( $width == null ) {
$min-width:0;
$band-info:map-merge($band-info, ('width': $min-width));
}
@else {
$min-width:$width + 1;
}
$band-infos:map-merge($band-infos, ($band-code: $band-info));
}
@return $band-infos;
}
$band-infos: initBandInfos($band-infos);
@function getBandInfoByCode($band-code) {
$row: map-get($band-infos, $band-code);
@return $row;
}
@function getBandMinWidth($band-code) {
$band-info: getBandInfoByCode($band-code);
@return map-get($band-info, 'min-width');
}
@function getBandMaxWidth($band-code) {
$band-info: getBandInfoByCode($band-code);
@return map-get($band-info, 'width');
}
@mixin makeResCols($band-code, $i) {
$min-width: getBandMinWidth($band-code);
$min-width-px: $min-width * 1px;
@if ($min-width == 0) {
@include makeCols($band-code, $i);
}
@else {
@media (min-width: $min-width-px) {
@include makeCols($band-code, $i);
}
}
}
@mixin makeResSpacing($band-code, $i) {
$min-width: getBandMinWidth($band-code);
$min-width-px: $min-width * 1px;
@if ($min-width == 0) {
@include makeSpacing($band-code, $i);
}
@else {
@media (min-width: $min-width-px) {
@include makeSpacing($band-code, $i);
}
}
}
@mixin makeSpacing($band-code, $i) {
$padding-hor-px: $i / 2 * 1px;
$margin-hor-px: $padding-hor-px * -1;
.ej-spacing-#{$band-code}-#{$i} {
& > .ej-row {
margin-left: $margin-hor-px;
margin-right: $margin-hor-px;
& > .ej-col {
padding-left: $padding-hor-px;
padding-right: $padding-hor-px;
}
}
}
div.ej-spacing-#{$band-code}-#{$i}.ej-row {
margin-left: $margin-hor-px;
margin-right: $margin-hor-px;
& > .ej-col {
padding-left: $padding-hor-px;
padding-right: $padding-hor-px;
}
}
}
@mixin makeCols($band-code, $i) {
@for $j from 1 to $i + 1 {
&.ej-#{$band-code}-#{$j}-#{$i} {
width: percentage($j/$i);
}
}
}
@for $ii from $ej-ratio-avobe-min-width to $ej-ratio-avobe-max-width + 1 {
@if ( $ii % $ej-ratio-avobe-interval-width == 0 ) {
@for $i from 0 to $ej-ratio-max-percent_no + 1 {
$min-width-px: $ii * 1px;
$height: $i;
@if ( $i % $ej-ratio-interval-percent_no == 0 ) {
@if ( $ej-ratio-avobe-min-width == $ii ) {
.ej-ratio-100-#{$height} {
position:relative;
padding-bottom:percentage($height/100) !important;
height:auto !important;
}
}
@else {
@media( min-width: $min-width-px ) {
.ej-ratio-avobe-#{$ii}-100-#{$height} {
position:relative;
padding-bottom:percentage($height/100) !important;
height:auto !important;
}
}
}
}
}
}
}
@each $row in $band-codes {
$band-code: nth($row, 1);
$band-min-width: getBandMinWidth($band-code);
$band-min-width-px: $band-min-width * 1px;
$band-max-width: getBandMaxWidth($band-code);
$band-max-width-px: $band-max-width * 1px;
.ej-row {
.ej-col {
@for $i from 1 to $ej-col-max-no + 1 {
@include makeResCols($band-code, $i);
}
}
}
@for $i from 0 to $ej-spacing-max-width + 1 {
@if ( $i % $ej-spacing-interval-width == 0 ) {
@include makeResSpacing($band-code, $i);
}
}
@for $i from 0 to $ej-ratio-max-percent_no + 1 {
$height: $i;
@if ( $i % $ej-ratio-interval-percent_no == 0 ) {
@if ( $band-min-width-px != 0 ) {
@media( min-width: $band-min-width-px ) {
.ej-ratio-#{$band-code}-100-#{$height} {
position:relative;
height:auto !important;
padding-bottom:percentage($height/100) !important;
}
}
}
}
}
@if ( $band-max-width-px == 0px ) {
.ej-hidden-below-#{$band-code} {
display:none;
}
.ej-clear-both-below-#{$band-code} {
clear:both;
}
}
@else {
@media( max-width: $band-max-width-px ) {
.ej-hidden-below-#{$band-code} {
display:none;
}
}
@media( max-width: $band-max-width-px ) {
.ej-clear-both-below-#{$band-code} {
clear:both;
}
}
}
}
@for $i from 300 to $ej-hidden-below-max-width + 1 {
@if ( $i % $ej-hidden-below-interval-width == 0 ) {
$width: $i;
$width-px: $width * 1px;
@media( max-width: $width-px - 1px ) {
.ej-hidden-below-#{$i} {
display:none;
}
}
}
}
.ej-ratio-body {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
// 라이브러리 끝
// 옵션
body{
overflow-x:hidden;
margin: 0;
padding: 0;
}
// 음수마진 때문에 스크롤바가 생깁니다.
// 프레임워크 확인용 코드
.ej-row > .ej-col::after {
content:"";
display:block;
height: 100px;
background-color: pink;
// div 안에 콘텐츠가 없으므로 배경색상과 높이를 지정해 주어야 함
}