Modal

position

fixed:ブラウザ画面の相対位置であるため、画面が変更されても固定位置を設定でき、親要素の影響を受けません.
トップ、left、bottom、rightを個別に指定して位置を設定できます
不透明度ふとうめいど:不透明度ふとうめいど
z-index:位置要素とそのサブアイテムまたはサブアイテムのz軸順序を指定する
より大きなz-index値を持つ要素は、より小さな値の要素の上に上書きされます.

Toggle

ex)

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

>記号の使用

클래스네임 {
  CSS 문법

CSSはToggleContainerという名前のコンポーネントに直接作成でき、backticでは>をサブセレクタとして使用できます.&記号の使用

 &.toggle--checked {
CSS 문법
}

&を使用すると、同治演算子を使用するように使用できます.
条件付きレンダリング

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

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

条件付きレンダリングとbackticを使用して元のクラス名を指定すると、イベントが発生したときにクラス名を変更および追加できます.

Tab

コンポーネントでmapを使用する場合は戻る必要があります

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

flexbox
Justify-content
align-itmes
flex-direction:row;ローカロードを基準にすれば
Justidy-コンテンツの水平方向の配置
align-itmesは垂直に整列しています
Justity-contentは標準ソート、align-itmesは標準の逆ソートです
flexboxは後で再配置されます