box-shadow
- property 5개의 순서를 지켜줘야함.
box-shadow: h-offset v-offset blur spread color;
opacity
opacity: 0;,opacity: 1;
overflow
width랑 height를 잡을 수 있는 요소 안의 컨텐츠가 그 요소의 크기를 벗어날 때 어떻게 처리할지에 관한 속성.
- overflow-x, overflow-y가 있음. 그냥 overflow는 동시에 선언하는것.
visible;: 기본값. 그냥 보여주는 것.auto;: 알아서 하게 함. 스크롤 생성 등.scroll;: 스크롤 생성.hidden;: 넘치면 잘리는 부분을 아예 안 보이게 함.
transform
- 다른 요소들에게 영향을 주지 않음.
translate(x,y): 요소를 원하는 방향으로 위치시키고 싶을 때. % 값도 사용 가능. 이때 참조하는 값은 본인의 width 값, height 값.scale(x, y): N배 만큼 크기 변동. 이때도 다른 요소들에게 영향 없음.rotate(Ndeg): N도로 회전.
visibility
visibility: visible;, visibility: hidden;
- hidden; 의 경우 보이지만 않게 됨. 존재는 하고 영역도 차지하나 보이지 않음.
cf)display: none;존재 자체를 없애버림.
cf) .sr-only 같은 경우: position: absolute; width: 1px; height: 1px; overflow: hidden; 값으로 설정하면 된다.
CSS Grid
- 디자이너는 절대 랜덤하게 디자인 하지 않는다! 그리드 시스템을 이용한다.
- container: grid system이 적용되는 전체 범위
- column: 1칸. 보통은 12칸을 많이 씀. 6칸을 차지하면 col-6이 되는 식.
- gutter: 칸의 양 옆 여백
bootstrap Grid System
- 패딩 15px 기본 설정 돼있음. 즉 칸과 칸 사이에는 30px의 여백 존재.
- .container 설정.
<div class="container"> - .row 설정
<div class="row"> - .col-n(칸) 설정
<div class="col-1"> 요소 </div>
- 반드시 .container의 자식으로는 .row만, .row의 자식으로는 .col-1만.
- 만들고 싶은 클래스가 있다면 .col-n 안에 넣어야한다.
- section > .container > .row > .col-12 식으로 작성 가능.
반응형을 지원한다.
col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2;
등 화면 크기에 따라 차지하는 column을 조절할 수 있다.
