-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
NavBar Logo 수정 질문!
21.08.29 00:04 작성 조회수 274
0
안녕하세요 강사님! 다름이 아니라 알려주신대로 image 를 import 하여 NavBar.js 파일에서 사용해보려고 했는데 , 다음과 같이 사용했을 때 로고가 제대로 삽입되지 않고 페이지에 오류가 발생하는데 css 부분의 문제인것 같습니다. NavBar.js 파일의 가장 div 인 menu 의 style 을 이것저것 건드려보았을때 position:'fixed' 를 position:'statie' 등으로 변경하면 이미지가 때때로 나올때도 있지만, 어떻게 기존 강의영상 처럼 Movieapp이라고 적힌 로고를 그곳에 삽입 할 수 있는지 도저히 모르겠어서 질문드립니다 ㅠㅠ NavBar.js 파일 소스와 깃헙 주소 모두 첨부드리니 답변주시면 감사하겠습니다!!
https://github.com/OHYUNBEOM/React-Node_ver2
import React, { useState } from 'react';
import LeftMenu from './Sections/LeftMenu';
import RightMenu from './Sections/RightMenu';
import { Drawer, Button, Icon } from 'antd';
import './Sections/Navbar.css';
import mainlogo from '../../../assets/images/mainlogo.png';
function NavBar() {
const [visible, setVisible] = useState(false)
const showDrawer = () => {
setVisible(true)
};
const onClose = () => {
setVisible(false)
};
return (
<nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}>
<div className="menu__logo">
<a href="/">
<img src={mainlogo}/>
</a>
</div>
<div className="menu__container">
<div className="menu_left">
<LeftMenu mode="horizontal" />
</div>
<div className="menu_rigth">
<RightMenu mode="horizontal" />
</div>
<Button
className="menu__mobile-button"
type="primary"
onClick={showDrawer}
>
<Icon type="align-right" />
</Button>
<Drawer
title="Basic Drawer"
placement="right"
className="menu_drawer"
closable={false}
onClose={onClose}
visible={visible}
>
<LeftMenu mode="inline" />
<RightMenu mode="inline" />
</Drawer>
</div>
</nav>
)
}
export default NavBar
답변을 작성해보세요.
0
아웃핏
질문자2021.09.01
감사합니다 강사님 !! 강사님 혹시 실례가 안된다면 실습과정에서 지속적으로 질문사항이 발생하는데 혹시 개인적으로 메일로 여쭤봐도 되는지 알고싶습니다!
답변 1