[TIL] 10.01

1. CSS

 

1-1 ) 인라인, 블록, 인라인블록 내용 추가 정리

 

1-1-1) 중앙 정렬

block : 중앙 정렬이 될 자신에 margin: auto (단, 너비가 100% 미만인 경우, 수평 중앙에 보낼 수 있다 )
inline / inline-block : 부모요소에 text-align: center 로 정렬

1-1-2) 좌우 정렬
float 속성으로 정렬 ( 종류 무관 )

1-1-3)  모든 요소는  position: absolute 또는 position:  fixed가 적용되면 inline 으로 display 속성이 변함  

1-1-4)  모든 요소는  float 속성을 가지면, 마진이 없는 inline 으로 display 속성이 변함

1-1-5)  display 속성을 block으로 변경하면 요소의 너비는 자동으로 100%로 변경됨.
 (단, table, img, button, input 등 인라인블록 요소는 display: block으로 바꿔도 너비가 100%로 변경되지 않으므로 width: 100%를 주어야 함)

1-1-6)  가상클래스 ::before ::after의 최초 display 속성은 inline 
(크기 값을 주려면 display: block 또는 inline-block으로 변경해야 함.
단, position: absolute 또는 fixed 있으면 자동으로 display: inline-block 속성을 넣지 않아도 inline-block으로 변경됨.)

1-1-7)  display 속성
block , inline, inline-block, none 4가지의 값이 있고 각 요소들간의 전환이 가능하도록 해준다
https://daunje0.tistory.com/149

[CSS] 3. 레이아웃 스타일 - 인라인, 블록, 인라인블록

 

2. react

2-1) 리액트 훅 호출시 규칙

1. 최상위 레벨에서만 훅을 호출해야 합니다

- 훅은 React 함수 컴포넌트의 최상위 레벨에서만 호출해야 합니다.
- 반복문, 조건문, 중첩된 함수 내에서 훅을 호출하면 안 됩니다.

2. React 함수 내에서만 훅을 호출해야 합니다

- 훅은 React 함수 컴포넌트 또는 사용자 정의 훅 내에서만 호출해야 합니다.
- 일반 JavaScript 함수에서는 훅을 사용하면 안 됩니다.