CSS 용어 모음

#UNIT(CSS의 단위)
1. Absolute length (절대값)
  예) px, cm, ...

2. Relative length (상대값)
  예) rem, em, %, vh, vw, ...
  -rem을 기본으로 많이 쓴다

단어 줄바꿈으로 변경
word-break: break-all;

relative 부모 element를 기준으로 위치한다
부모 : position: relative [기준점 잡기]
position: absolute; [그 안에서 움직이기]

translate(x,y)
item이 원래 위치를 기준으로 이동한다
transform:translate(25px, 50px)

X축을 기점으로 이동
transform:translateX(25px);

y축을 기점으로 이동
transform:translateY(25px);

%로 사용할 경우 element 자신의 크기에 상대적이다
transform:translateX(50%);

자신 element의 크기 기준
transform:translate(-50%, -50%);

10% 커진다
transform: scale(1.1, 1.1);

45도 돌림(로딩할때 많이 씀)
transform:rotate(45deg);

skew(x,y)
transform:skew(20deg,10deg);
transform:skewX(20deg);
transform:skewY(20deg);

fr (fraction, 분수)
minmax(최소, 최대)
grid-template-columns: repeat(4, minmax(0,1fr));

반응형 시스템 확인
https://tailwindcss.com/docs/reusing-styles

Background Image
https://tailwindcss.com/docs/background-image

기본값
border-collapse: separate;

하나로 합쳐주기
border-collapse: collapse;

Table 속성

table{
    border-collapse: collapse;
  }
border가 적용이 안됨 기본값으로 많이 설정함

:nth-child() odd(홀수), even(짝수) 테이블 속성넣을때(색상 홀수, 짝수로 설정하기)

같은 너비로 지정할 수 있음
table-layout: fixed; 

사이트 공유 - css 
https://www.free-css.com/
https://mdbootstrap.com/docs/standard/data/tables/

Selector: element, .class, #id, children, direct children, Pseudo :class and ::element, unit: [absolute: px, cm | relative: rem, em, %, vh, vw]

font: color, style, weight, size text: align, letter(word) spacing, line-height, ... border: width, style, color, direction, shorthand outline: basic and input width focus color: Name, RGB, RGBA, HEX

padding: direction margin: direction, positive and negative, margin-collapse box-sizing Display: inline, inline-block, block, none;

white-space: wrap, nowrap, pre-line; visibility: visible, hidden, Overflow: visible, auto, scroll, hidden, width, height: width/height, min-width, min-height, max-width, max-height

Position: static, relative, absolute, fixed and z-index(except for static) Transform: none, translate, scale, rotate, skew

CSS Layout: float, flex, grid @media with min-width and max-width image: img, background-image