웹 페이지 레이아웃에서 "header"는 일반적으로 페이지 상단에 위치한 영역으로, 페이지의 로고, 메뉴, 검색 창 등 중요한 내용을 담고 있습니다. 이를 통해 사용자가 웹 사이트에서 어디에 있는지, 그리고 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다.
Header는 일반적으로 사이트의 브랜드, 제목, 로고 등과 같은 정보를 제공하며, 일반적으로 메뉴와 검색 기능이 포함됩니다. 일부 웹 사이트에서는 헤더 영역에서 사용자가 많이 찾는 정보를 제공하기도 합니다.
이전까지 Layout 을 통해서 헤더-컨텐츠-푸터로 이루어지도록 만들었습니다.
이번에는 Header를 좀더 원하는 방향으로 완성 시켜 보려고 합니다.
3부분으로 이루진 Layout에 상간에 위치한 Header에는 최종적으로 로고 + 사이드바 버튼이 들어 가게 됩니다.
1. 로고 이미지 import
2. 좌측 으로 배치
3. 사이드바 버튼 import
4. 우측으로 배치
이 순서대로 진행 되지 않을까 싶네요.
먼저 로고 이미지를 배치 시켜 보겠습니다.
// components/Header/index.js
import "./header.css";
import logo from "../../resources/svg/logo.svg";
export default function Header() {
return (
<header>
<div id="logo">
<img src={logo} alt="logo" />
</div>
<div id="gnb"></div>
</header>
);
}
이미지가 header보다 커서 맞지가 않네요.
이미지 크기를 조정 시켜 줍니다.
header {
height: var(--headerHeight);
width: 100%;
}
header > #logo {
height: calc(100% - 32px);
padding: 16px;
}
header > #logo > img {
max-height: 100%;
}
padding을 줘서 간격을 주고 max-height 로 높이를 조절해 줬습니다.
알맞게 들어간 듯?
이제 사이드바 버튼을 추가 해 봐야겠습니다.
icon은 font-awesome을 사용하려고 합니다.
설치해 줍니다.
https://fontawesome.com/docs/web/use-with/react/
npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome@latest
FontAwesome 컴포넌트에 icon props 의 값으로 faBars를 넣어서 div#gnb 태그 안에 넣어 줍니다.
// components/Header/index.js
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import logo from "../../resources/svg/logo.svg";
import "./header.css";
export default function Header() {
return (
<header>
<div id="logo">
<img src={logo} alt="logo" />
</div>
<div id="gnb">
<FontAwesomeIcon icon={faBars} />
</div>
</header>
);
}
그런데 로고 밑에 붙어 버려서 내려가 버렸습니다.
float 속성을 줘서 오른쪽에 붙여 봅니다.
header {
height: var(--headerHeight);
width: 100%;
}
header > #logo {
height: calc(100% - 32px);
padding: 16px;
}
header > #logo > img {
max-height: 100%;
}
header > #gnb {
float: right;
}
오른쪽으로 이동하긴 했지만, 헤더 아래로 위치 해 있습니다.
float:left 값을 #logo에 추가해 줍니다. 주고 div#gnb에도 padding 과 height 값을 줍니다.
header {
height: var(--headerHeight);
width: 100%;
}
header > #logo {
height: calc(100% - 32px);
padding: 16px;
float: left;
}
header > #logo > img {
max-height: 100%;
}
header > #gnb {
float: right;
padding: 16px;
height: calc(100% - 32px);
}
잘나오는 것 같습니다만, 사이즈가 맞질 않네요
font-size 를 24px로 줘봅니다.
header {
height: var(--headerHeight);
width: 100%;
}
header > #logo {
height: calc(100% - 32px);
padding: 16px;
float: left;
}
header > #logo > img {
max-height: 100%;
}
header > #gnb {
float: right;
padding: 16px;
height: calc(100% - 32px);
font-size: 24px;
}
원하는 데로 잘 들어 간 것 같습니다 !
다름은 사이드바를 한번 작업해 봐야겠습니다.
PortFolio : https://hiio420.com
Figma: https://www.figma.com/file/WJVwsW99LwZ2B1W3PKDASM/Hiio420?node-id=0%3A1&t=W1IV0P9M12hXOVpp-1
