[React] 반응형 Header 만들기 - ① Logo

아래 사진과 같은 헤더를 만들어 보자.

우선 Header를 크게 자르면 로고, 로고 텍스트, 사이드바 아이콘, 검색바 , 알림 드롭박스, 채팅 드롭박스, 사용자 프로필 드롭박스로 구성된다. 여기서 우리는 로고, 로고 텍스트, 햄버거 아이콘을 합쳐서 로고 컴포넌트로 만들 것이다!

import React from "react";
import './header.css';
import Logo from "./Logo";
import SearchBar from "./SearchBar";
import Nav from "./Nav";

function Header() {
    return (
        <header 
            id='header' 
            className="header fixed-top d-flex align-items-center">
                {/*logo*/}
                <Logo/>
                {/*searchBar*/}
                <SearchBar/>
                {/*nav*/}
                <Nav/>
        </header>
    )
}

export default Header;

Logo 컴포넌트

Logo 컴포넌트에는 로고 이미지와 사이드 바를 토글할 수 있는 사이드바 토글 버튼이 들어가 있다.

Logo.jsx

import React from 'react'
import './logo.css'

export default function Logo() {

    return (
        <div className='d-flex align-items-center justify-content-between'>
            <a href="/" className='logo d-flex align-items-center'>
                {/* 로고 이미지 */}
                <img src="logo_light.png"alt="logo"/>
                {/*로고 텍스트*/}
                <span className="d-none d-lg-block">zeus</span>
            </a>
            {/* 햄버거 버튼 */}
            <i className='bi bi-list toggle-sidebar-btn'>
            </i>
        </div>
    )
}

이 때, Bootstrap 스타일 클래스를 사용해 아래와 같은 스타일을 적용한다.

<div>

• d-flex: div 태그를 flex 요소로 만들어준다.
• align-items-center: flex 내부 요소들이 한 줄일 경우 상하 정렬 기준을 center로 한다.
• justify-content-between: flex 내부 요소들의 가로 정렬 기준을 좌우로 가장 끝에 위치하게 한다.

<a> : 로고 링크

• d-flex: a 태그를 flex요소로 만든다.
• align-items-center: flex 내부 요소들이 한 줄일 경우 상하 정렬 기준을 center로 한다.

span : 로고 텍스트

• d-none: 모든 화면 크기에서 로고 텍스트를 숨긴다.
• d-lg-block: 화면 크기가 large (lg) 이상일 때, 즉 화면 너비가 992px 이상일 때 해당 요소를 block 요소로 표시한다.

<i
    className='bi bi-list toggle-sidebar-btn' 
    onClick={handleToggleSideBar}
>
</i>

i태그를 사용해 아이콘을 표시한다.

• bi bi-list: Bootstrap Icons에서 제공하는 햄버거 아이콘이다.

logo.css

.logo {
    line-height: 1;    
}

@media (min-width: 1200px) {
    .logo {
        width: 280px;
    }
}

.logo img {
    max-height: 26px;
    margin-right: 6px;
}

.logo span {
    font-size: 26px;
    font-weight: 700px;
    color: #012970;
    font-family: 'Nunito', sans-serif;
}

• line-height: 1을 사용해 텍스트와 이미지가 같은 줄에 있을 때, 높이가 서로 어긋나지 않고 정렬되게 한다.
• 미디어 쿼리를 사용해 1200px 이상일 때에만 width를 280px로 설정한다.