러너효방
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
'학습노트' 카테고리의 다른 글
코딩이 쉽도록 도와주는 사이트 (0) | 2023.10.19 |
---|---|
Font 모음, 디자인 참고자료 (2) | 2023.10.19 |
POSTMAN 설치 (0) | 2023.10.19 |
JWT방식으로 Auth(Authorization, 인증) (0) | 2023.10.19 |
[Backend]Application SERVER 파일과 디렉터리 알고가기 (2) | 2023.10.19 |