[React MUI 5] 인스타그램 클론코딩 - Header 만들기 (mobile)

결과물

모바일 및 데스크탑 반응형 Header

 

 

Header.js 구현 과정

1. header.js 파일 다음과 같이 수정

......
          {/* logo */}
          <Box sx={{ width: '96px', display: { xs: 'none', sm: 'block' } }}>
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Instagram_logo.svg/320px-Instagram_logo.svg.png"
              alt="logo"
              width={'100%'}
            />
          </Box>
......

MUI 기본 breakpoints는 xs, sm, md, lg, xl 로 구성되 있음

 

display: { xs: 'none' } 은 display: 'none'과 같음

 

display: { sm: 'block' } 은 sm(600px) 이상이면 display: 'block'으로 해달라는 말

 

따라서 600px 보다 작으면 로고가 사라지게 해줌

모바일에서 로고 사라진 화면

 

 

---

2. 작은 인스타그램 로고 이미지 넣기

          {/* logo */}
......

          {/* mobile logo */}
          <Box sx={{ width: '40px', display: { sm: 'none' } }}>
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Instagram_simple_icon.svg/240px-Instagram_simple_icon.svg.png"
              alt="mobile_logo"
              width={'100%'}
            />
          </Box>

          {/* search */}
......

인스타그램 모바일 로고 보이는 화면

---

 

3. 검색바 길이 줄여주기

          {/* search */}
          <Box sx={{ maxWidth: { xs: '180px', sm: '220px' } }}>
......
          </Box>

모바일 화면 실행 결과