inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

무비앱 시리즈 #4 Landing Page 만들기 (1) ( 따라하며 배우는 리액트 노드 )

NavBar Logo 수정 질문!

426

HyundaiCanI?

작성한 질문수 7

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 { DrawerButtonIcon } from 'antd';
import './Sections/Navbar.css';
import mainlogo from '../../../assets/images/mainlogo.png';

function NavBar() {
  const [visiblesetVisible] = useState(false)

  const showDrawer = () => {
    setVisible(true)
  };

  const onClose = () => {
    setVisible(false)
  };

  return (
    <nav className="menu" style={position: 'fixed'zIndex: 5width: '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

navbar react image 이미지넣기 mongodb express 웹앱 nodejs

답변 1

0

John Ahn

안녕하세요 ! 
보니깐 잘 적용하셨구요 !  
width: 를 조정해서 사이즈를 늘려주세요 ~  
한 30 40 정도 하시면 되겠네요 ~!

0

HyundaiCanI?

감사합니다 강사님 !! 강사님 혹시 실례가 안된다면 실습과정에서 지속적으로 질문사항이 발생하는데 혹시 개인적으로 메일로 여쭤봐도 되는지 알고싶습니다! 

에러서 요렇게만 해보세요

0

228

1

antd Menu 질문

0

260

1

movieTitle

0

219

1

npm run dev 연결이 안됩니다ㅜㅜ

0

411

1

npm run dev 오류

0

855

1

403 forbidden error

0

1068

2

npm run dev 오류

0

696

1

모듈이 없다는데요

0

1278

1

npm run dev 실행시 오류

0

5373

1

504 Gateway Timeout Error

0

1449

1

컴파일 에러 관련 문의

0

504

1

npm run dev 오류

0

760

1

이미지가 안떠요...

0

370

2

npm run dev 실행하고 인증이 안되는거 같아요

0

532

1

cd client에서 npm install 오류

0

1418

1

npm run dev시 localhost가 자꾸 3000으로 연결됩니다

0

972

1

Netlify + AWS Elastic Beanstalk 를 이용한 배포

1

1785

1

[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법

0

461

0

지금 듣기엔 안되는 강의일까요?

0

718

1

사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ

0

428

1

비동기 처리가 영상과 다르게 됩니다..

0

248

0

#2강 npm install

0

771

4

LandingPage.js 내 useState(null) 이용하는 이유

0

226

0

client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?

0

385

1