nav들 위치 이동?

마이페이지, 네트워크, 로그아웃 세개의 메뉴를 우측 끝으로 이동시키고 싶었다..

 

react-bootstrap은 보통 container, Col, Row, Stack 4개의 컴포넌트로 레이아웃을 잡는 편이다.

그런데 Nav 같이 이미 자체적으로 layout이 잡혀져 있는 것도 있다!

1. px-3
   1. padding-right, padding-left, Nav 전체적으로 내부 자식에게 간격을 주기 위함
2. ms-auto
   1. margin-left: auto 를 의미함. auto 는 부모의 여백공간만큼을 왼쪽으로 밀어내는 느낌이다, 자주 쓰이는 속성이니 숙지하기!
   2. Nav.item 태그 3개를 Nav 태그 하나로 묶어서 덩어리때 내려가게 한다.

 

 

결국 display: flex;를 사용했는데 , CSS 레이아웃을 잡을 땐 flex를 많이 사용하므로 알아두는 게 좋다.

flex 를 공부하기 좋은 사이트 → 개구리 꽤나 귀여워  Flexbox Froggy

 

const navigationInformations = [
  { title: '마이페이지', link: '/' },
  { title: '네트워크', link: '/network' },
];


<div
    style={{
    backgroundColor: '#D9DDFF',
    display: 'flex',
    alignItems: 'center',
    padding: '34px 56px',
    }}
>
    <div style={{ fontSize: '2em' }}>MY PORTFOLIO</div>
    <ul
        style={{
            margin: '0 0 0 auto',
            listStyleType: 'none',
            padding: 0,
            display: 'flex',
            gap: 30,
            padding: 0,
        }}
    >
    {navigationInformations.map((navigationItem) => (
        <li
            onClick={() => {
                navigate(navigationItem.link);
        	}}
            style={{
                borderRadius: '10px',
                padding: '6px 14px',
                backgroundColor: '#989CFD',
                color: 'white',
            }}
        	key={navigationItem.title}
        >
        {navigationItem.title}
        </li>
    ))}
    </ul>
</div>