React router 질문

[윤주훈]

안녕하십니까. 선생님
리액트 공부중에 질문이 있습니다.


보시는 것처럼 상세페이지와 메인페이지 css디자인을 부트스트랩을 사용하지 않고 직접 짜서 하고 있는데
크롬의 도구를 열어 찍어보면 메뉴바까지 선택이 되어집니다. Navbar를 포지션 fixed로 지정해놓았습니다. 이 상태에서 코드를 추가하여 
Navbar 아래에 넣는건 어떻게 해야합니까? 
코드 첨부해드립니다.

<div className='App'>

<NavbarMain></NavbarMain>

<Routes>
<Route path="/" element={
<>
<div className='main-bg'>
<div className='sub-bg' width='40%'></div>
</div>
<div>
<div className='image-container'>
{ shoes.map((a,i) => {
return (
<Card shoes={shoes[i]} i={i+1}></Card>
 )
})
}
</div>
</div>
</>
}/>
<Route path="/detail" element={
<DetailBox />
}
 
/>
</Routes>
 
</div>
 );
}

function Card(props) {
return(
<div className='image-box1'>
< img src={'https://codingapple1.github.io/shop/shoes' + props.i + '.jpg'}></img>
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content}</p>
<p>{props.shoes.price}</p>
</div>
 )
}

function NavbarMain() {
return(
<div>
<div className='Navbar'>
<div className='container'>
<div className='first'>Hoon's Mall</div>
<Link className="Link" to="/">Home</Link>
<Link className="Link" to="/detail">상세페이지</Link>
</div>
</div>
</div>
 )
}

function DetailBox() {
return(
<div>
<div className="detailContainer">
<div className="box1"></div>
<div className="image-box">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%;"></img>
</div>
<div className="box-detail">
<h4 className="name">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="button-detail">주문하기</button>
</div>
</div>
</div>
 )
}

[codingapple]

신발사진들어있는 박스 위쪽 마진을 적절히 줍시다

[글쓴이]

글