CSS_new knowledge

 *display : flex ; 

: float, inlin-block 등의 단점을 보완한 속성이다.

: clear:both를 하거나, 여백을 걱정할 필요 없다.

 

 *justifyContent  ( IE11 이상 지원 )

-속성값

-flex-start (컨테이너 시작 부분에 아이템 위치 / default 값)

-flex-end (컨테이너 끝에 아이템이 위치)

-center (컨테이너 중앙에 아이템이 위치)

-space-between (아이템 세로열 간 사이에만 공백 존재)

-space-around (아이템 세로열의 앞, 사이, 뒤 모두에 공백 존재)

-initial (이 속성의 기본값으로 설정)

-inherit (부모요소의 속성값 상속)

 

 *alignItems  ( IE11 이상 지원)

-stretch (플렉스 아이템들이 컨테이너에 맞게 상하로 쭉 늘어남 / default 값)

-center (플렉스 아이템이 컨테이너 중단에 위치)

-flex-start (플렉스 아이템이 컨테이너 시작부분에 위치)

-flex-end (플렉스 아이템이 컨테이너 끝 부분에 위치)

-baseline (플렉스 항목이 컨테이너 기준선에 위치 / flex-start와 유사)

-inherit

-initial

 

 

 *flex 

-속성 : 1, 2, 3...

 

 *flexDirection 

-속성 : column, row, row-reverse(3,2,1 순), column-reverse(3,2,1 순)

 

 

 onSubmit   <form onSubmit={  }>

: form태그에서 내부적으로 처리해야할 데이터가 있을 경우 사용

: submit을 누르면 onsubmit이 실행되어 특정함수가 실행된다.

: 특정 함수의 return값이 true일 경우에만 폼을 전송한다.

 

 onChange   <input onSubmit={  }>

: 변화가 감지되었을 때 특정함수{ }를 실행시킴