Modal

position

fixed : 브라우저 화면의 상대 위치, 따라서 화면이 바뀌어도 고정된 위치를 설정 할 수 있고, 상위 요소에 영향을 받지 않는다.

top, left, bottom, right 들을 독립적으로 따로 지정하여 위치를 설정할 수 있다

---

opacity: 불투명도

z-index: 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정
더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다

Toggle

ex)

const ToggleContainer = styled.div`
CSS 문법그대로 작성
`

> 기호 사용

클래스네임 {
  CSS 문법

ToggleContainer라는 컴포넌트에 직접 CSS작성이 가능하고, 백틱 안에 > 를 사용하여 자식 선택자로 만들 수 있다

& 기호 사용

 &.toggle--checked {
CSS 문법
}

&를 사용하여 동치연산자 처럼 사용할 수 있다

조건부랜더링

<div className={`toggle-container ${isOn ? "toggle--checked" : ""}`}></div>

<div className={`클레스네임 ${ 조건부 랜더링 }`}></div>

조건부 랜더링과 백틱을 이용하여 원래 클래스네임을 지정 후 이벤트 발생시 className을 변경 및 추가 가능하게 만들 수 있다

Tab

컴포넌트 안에서 map사용시 return을 해줘야 한다

menuArr.map(el => {
return (<li className="submenu"> {el.name}</li>)
})

flexbox

Justify-content
align-itmes

만약 flex-direction: row; 로 가로를 기준으로 둔다면

Justify-content는 가로 정렬
align-itmes는 세로 정렬 이된다

즉, Justify-content는 기준정렬, align-itmes는 기준의 반대 정렬

flexbox는 추후 따로 재정리