-
해당 요소는 absolute 요소와 유사하게 작동한다
-
단위가 백분율일 경우 부모상자의 width를 기준으로 한다.
- margin-top, margin-bottom도 단위가 백분율일 경우 기준은 부모상자의 width다.
-
negative margin값을 이용한 그리드 시스템 basic idea
-
width와 height가 고정값인 부모상자 밑에
-
모든 자식이 float: left, margin-right: -100% 를 가지면
-
부모의 top-left 위치에 모두 겹친다.
-
absolute 요소 처럼...
-
이때 margin-left: [positive value]로써 위치를 옮길 수 있다.
/* 모든요소 margin과 padding의 초기값이 0이라 가정 */ 부모요소 { width: 400px; height: 400px; } 자식요소 { width: 100px; height: 100px; float: left; margin-right: -100%; } .to-right-[n] { margin-left: [value]; }
-
-
border를 이용한 가짜 가운데 여백 트릭.
-
width와 height가 서로 동일한 고정값인 부모요소밑에
-
width와 height가 부모의 50%인 자식요소 4개를
-
부모요소의 네 모서리에 각각 정렬시킨듯한 효과.
부모요소 { width: 500px; height: 500px; /* 음수 마진값 때문에 부모요소 밖으로 튀어 나간 자식요소의 border를 안보이게 한다 */ overflow: hidden; } 자식요소 { width: 50%; height: 50%; float: left; /* 이 border가 여백과 같은 역할을 한다 */ border: 10px solid red; /* 음수 마진값 */ margin: -10px; }
-
-
isolate grid 고정형
-
HTML 구조
<body> <div class="wrapper"> <div class="row"> <div class="column"></div> <!-- many other columns here --> </div> <!-- many other rows which have columns in each here --> </div> </body> -
CSS
.wrapper { width: [number]px; margin: 0 auto; } .row { width: 100%; background: yellow; } .row::after { /* 자식 요소들이 absolute처럼 작용하게 되므로 부모요소의 높이를 잃지 않기 위해 이 가상요소가 필요하다. */ content: ""; display: table; clear: both; } .col { /* 전체 행 너비로 초기화 한다 */ width: [number]px; /* 아래 두 프로퍼티로 absolute 요소처럼 작동하게 된다 */ float: left; margin-right: -100%; } .column-[x] { /* 1 <= x <= n, n은 최대 칼럼 수 */ /* 칼럼너비를 설정하는 스타일로 최대 n개의 시리즈를 이룬다 */ width: (1column너비*x + 1gutter너비*(x-1))px; } .column-offset[x] { /* 1 <= x <= n, n은 최대 칼럼 수 */ margin-left: (1column너비*x + 1gutter너비*(x))px; } -
div.col tag에 필요한 스타일을 class의 값으로 붙이고 떼서 사용한다.
-
-
유연한 isolate grid
-
html 구조는 고정형과 같다.
-
CSS
.wrapper { /* 너비를 백분율로... */ width: [number]%; margin: 0 auto; } .row { width: 100%; background: yellow; } .row::after { content: ""; display: table; clear: both; } .col { /* 너비를 백분율로... */ width: [number]%; float: left; margin-right: -100%; } .column-[x] { /* 1 <= x <= n, n은 최대 칼럼 수 */ /* calc 내부의 백분율 단위 표현식은 부모요소의 너비에 대한 부분으로 계산 될 것이다.*/ width: calc(1colum너비의백분율값% * x + 1gutter너비의백분율값% * (x-1)); } .column-offset[x] { /* 1 <= x <= n, n은 최대 칼럼 수 */ /* calc 내부의 백분율 단위 표현식은 부모요소의 너비에 대한 부분으로 계산 될 것이다.*/ width: calc(1colum너비의백분율값% * x + 1gutter너비의백분율값% * x); } -
div.col tag에 필요한 스타일을 class의 값으로 붙이고 떼서 사용한다.
-
- scss문법
-
변수 선언
$[variable name]: [value]; -
컴파일된 css문서와 원본 scss 문서사이의 상관관계를 브라우저 개발자도구에서 표시하는 법.
- terminal명령 : node-sass sass/ -o css/ --source-map true
-
변수 단순 할당(삽입)시 사용법
#{$[variable name]} /* 단순 할당 표현 내에선 변수끼리 연산시킬수 있다. */ #{$[variable name] + $[variable name]} -
$base-color: #AD141E; /* 명도를 어둡게, 밝게 */ darken( $base-color, 10% ) lighten( $base-color, 10% ) /* 채도를 높게, 낮게 (선명하게, 탁하게) */ saturate( $base-color, 20% ) desaturate( $base-color, 20% ) /* HSL 모델의 H 값을 변경 */ adjust-hue( $base-color, 20% ) /* 알파 값 변경 */ rgba( $base-color, .7 ) /* tint(흰색을 섞어 밝게... 즉 명도가 올라가고 채도가 떨어짐) */ /* shade(검은색을 섞어 밝게... 즉 명도가 내려가고 채도가 떨어짐) */ tint( $base-color, 10% ) shade( $base-color, 10% ) /* 인자1과 인자2의 색을 섞는다. 투명도도 고려된다. */ /* 세번째인자만큼 인자1색을, 100-세번째인자 만큼 인자2색을 섞는다. */ mix($color1, $color2, $weight:50%) /* 아래와 같이 하나의 base-color를 설정해 놓고 테마가 통일된 다양성을 줄 수 있다. */ border: 1px solid darken($base-color, 20%); text-shadow: 0 -1px 0 darken($base-color, 10%); @include box-shadow(inset 0 1px 0 lighten($base-color, 20%)); -
같은 이름의 sass변수 선언시 마지막에 선언한 것으로 이전 것들이 덮인다.
$base-font-size: 16px; $base-font-size: 24px; /* $base-font-size는 24px 값을 갖는다. */ -
디폴트 값으로 선언한 변수는 선언 순서에 상관없이 우선순위가 가장 낮다.
$base-font-size: 16px $base-font-size: 24px !default; /* $base-font-size는 16px 값을 갖는다. */ -
지역변수 : {} 안에서 선언한 변수는 {} 밖에선 참조할 수 없다.
-
{} 안에 스타일을 지정하면 부모-자식 관계를 의미한다. (nested)
$brand-color: red; .wrapper { $brand-color: yellow; /* wrapper scope 내에선 brand-color가 지역변수로 덮인다 / clear: both; ul { list-style: none; padding-left: 0; margin: 0; } li { background: $brand-color; / 값은 yellow / } } .container { color: $brand-color; / 값은 red */ }
-
-
파일 import
/* 통합 파일 내에 선언 */ @import [path]/[filename] /* 확장자는 붙이지 않는다. */- import 파일 내용이 통합 파일 내의 선언문 위치에 복사된다.
- import파일 이름이 [file name].scss 형태면 output 위치에 import 파일들도 빌드 한다. (import 파일이 하위 폴더에 있다면 output 위치에도 하위 폴더가 만들어진다.)
- _[파일이름].scss 형태면 output 위치에 부분 파일들을 생성하지 않고 통합 파일에 코드가 전부 합쳐져 빌드 된다.
-
@mixin과 @include
/* mixinEle 스타일은 CSS 결과파일엔 존재하지 않게 된다. */ @mixin mixinEle { [property]: [value]; [property]: [value]; [property]: [value]; } some-element { some-property : some-value; @include mixinEle; /* 빌드 후 css파일을 보면 include 자리에 mixinEle의 내용이 교체되어 있다.*/ } -
@extend
/* my-class 스타일은 CSS 결과파일에도 실존한다. */ .my-class { border: 1px solid #aaa; border-radius: 10px; padding: 10px; background: #eee; } .event { margin: 10px; @extend .my-class /* CSS 결과 파일에서 위의 ".my-class" 뒤에 ".event"가 추가된다. */ } -
placeholder selector
/* 위와 같은 코드에서 ".my-class"를 "%my-class"로 바꾼다. */ %my-class { border: 1px solid #aaa; border-radius: 10px; padding: 10px; background: #eee; } .event { margin: 10px; @extend %my-class; } .favorite { box-shadow: 1px 1px 0 0 #000; @extend %my-class; } /* CSS 결과 파일에서 my-class 키워드가 사라지고 event와 favorite이 그 자리를 차지한다. */ -
단위 추가/제거
$width: 100; $height: 200px; .search { /* 단위 붙이기*/ width: $width * 1px; /* 단위 빼기*/ height: $height / 1px; } -
for문
@for $i from 1 to 5 { /* 1~4. to 대신 through 쓰면 1~5 */ .col-#{$i} { width: 100px; } }result:
.col-1 { width: 100px; } .col-2 { width: 100px; } .col-3 { width: 100px; } .col-4 { width: 100px; } -
isolate grid에 for문 응용하기
@for $i from 1 through 13 { .col-#{$i} { width: (100% / 12) * $i; } .col-offset-#{$i} { margin-left: (100% / 12) * $i; } }
-