CSS

⭐️ 크기 단위

px - 절대값
em,% - 상대값
cm mm inch ...

⭐️ Box

width,height : content 사이즈 설정
padding : content와 border 사이의 여백 설정
border** : border 설정 - style, color, size;
border - style : none, solid, dotted, dashed ...
border - color : rgb(0, 0, 0), #fff ...
border-radius : border 굴곡률 설정
margin : 요소와 요소 사이 간격

속기형 (상 우 하 좌)

margin : 1px 2px 3px 4px;

-> top: 1px, right: 2px, bottom: 3px, left: 4px

padding: 0 auto;

-> top, bottom : 0 right, left : auto

⭐️ display

Element 속성 설정 ->
none : 표시 안 함
block : 같은 라인에 다른 요소 block
inline : 같은 라인에 다른 요소 가능, width, height 설정 불가
inline-block : 같은 라인에 다른 요소 가능, width, height 설정 가능
table :
table-cell :

기본 속성이 block

div p ul li dl dt dd h1~h6 form ...

기본 속성이 inline

span img a input mark strong em abbr ...

⭐️ float

content size는 box size가 되고 다른 요소 위에 배치 (떠 있지만 위치는 보장)
none : 기본 설정
inherit : 부모 Element에 상속
inline-start inline-end : 부모 요소의 시작 or 끝에 위치
left right : 왼쪽 or 오른쪽에 밀착

⭐️ overflow

hidden, auto, scroll ...
clear : float된 Element를 인식
left, right, both ->> 왼쪽 or 오른쪽 or 양쪽에 있는 모든 Element들을 인식

pseudo Element

.className::before {
}

.className::after

flex

position

* { }

전체 요소에 적용될 기능

* {
	box-sizing: border-box;
}

가운데 정렬

⭐️ table

.parent {
  display: table;
  width: 100%;				
  table-layout: fixed;		⭐️ 모두 일정한 width값으로 100%
}
.child {
  display: table-cell;		
  text-align: center;		텍스트 가운데 정렬
  vertical-align: middle;	수직 가운데 정렬
}

⭐️ flex

.parent {
  display: flex;
  flex-direction: row;			기본값(row)
  justify-content: space-between;	row방향-같은margin값으로 스트래치
  align-items: center;			column방향 가운데 정렬
}
.child {
  width: 설정값;				⭐️ 별도의 width값 설정
  display: flex;			
  justify-content: center;	 
  align-items: center;
}