[React] Footer 스타일링 with Flexbox, 웹에 Footer 적용해보기!

Footer란?

최근에 외주를 하면서 Footer을 적용해보는 경험을 했다.

Footer는 웹페이지의 최하단에 위치하는 영역으로, 사이트의 기본 정보와 네비게이션 링크를 포함하는 중요한 구조적 요소다.

특히 회사 정보, 저작권 표시, 연락처 등 핵심적인 정보를 담고 있어 UX적으로 매우 중요한 역할을 한다는 것을 알게 되었다.

---

Flexbox를 활용한 Footer 구현

Flexbox는 요소들을 유연하게 배치할 수 있게 해주는 CSS 레이아웃 모델이다.

Footer 구현에 있어 Flexbox를 사용하면서 요소들을 효과적으로 정렬하고 배치할 수 있었다.

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #222;
    color: #fff;
    width: 100%;
    height: 446px;
    max-width: 1920px;
    margin: 0 auto;
    margin-top: 219px;
}

위 코드를 함께 살펴볼까? 정리해보자면 아래와 같다.

• 이 코드에서 display: flex는 Footer를 Flexbox 컨테이너로 만들어주며,
• justify-content: space-between은 자식 요소들을 컨테이너 내에서 균등하게 분배한다.
• align-items: center는 요소들을 세로축 기준으로 중앙에 배치한다.

---

반응형 디자인 적용

Footer의 콘텐츠를 모든 디바이스에서 적절하게 표시하기 위해 반응형 디자인을 적용해보았다.

.footer-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-info {
    flex: 1;
    text-align: left;
    font-family: "Apple SD Gothic Neo";
    font-size: 24px;
    letter-spacing: -1.2px;
    line-height: 1.6;
}

• max-width를 설정하여 큰 화면에서도 콘텐츠가 적절한 너비를 유지하도록 했고,
• flex: 1을 사용하여 요소가 가용 공간을 모두 활용하도록 설정했다.

---

스타일 컴포넌트 구조화

다음으로느 Footer를 여러 섹션으로 나누어 구조화했다.

로고 섹션, 정보 섹션, 링크 섹션으로 구분하여 각각의 역할과 스타일을 명확히 했다.

.footer-logo {
    width: 247px;
    height: 87px;
    margin-left: 273px;
    margin-right: 1400px;
}

.footer-links {
    margin-left: 1509px;
    margin-right: 277px;
    margin-top: -110px;
    text-align: right;
    width: 120px;
}

이 코드는 로고와 링크 섹션의 정확한 위치 지정을 보여준다고 할 수 있다.

margin 값들을 통해 요소들 간의 간격을 조절하고, 텍스트 정렬을 통해 시각적 균형을 맞추었다.

---

전역 스타일 설정하기

Footer는 보통 프로젝트 전반적으로 존재하지 않을까?

이럴땐 전역으로 스타일을 설정해주어야하는데 가장 일반적인 방법은 App.js에서 Footer 컴포넌트를 import하여 사용하는 것이다.

// App.js
import Footer from './components/Footer';

function App() {
  return (
    <div className="App">
      {/* 다른 컴포넌트들 */}
      <Footer />
    </div>
  );
}

CSS 스타일을 전역으로 적용하기 위해서는 index.css나 App.css에 스타일을 정의할 수 있다.

하지만 더 체계적인 관리를 위해 별도의 styles 폴더를 만들어 관리하는 것이 좋다!!

// styles/GlobalStyle.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  #root {
    width: 100%;
    overflow-x: hidden;
  }
`;

export default GlobalStyle;

이렇게 생성한 GlobalStyle을 App.js에서 불러와 아래와 같이 적용하면 된다! 😉

// App.js
import GlobalStyle from './styles/GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      <div className="App">
        {/* 컴포넌트들 */}
        <Footer />
      </div>
    </>
  );
}

 

Footer 컴포넌트는 별도의 파일로 분리하여 관리하면 된다.

// components/Footer/index.jsx
import React from 'react';
import './Footer.css';  // 스타일 import

const Footer = () => {
  return (
    <footer className="footer">
      <div className="footer-content">
        <div className="footer-logo">
          <img src="/logo.png" alt="로고" />
        </div>
        <div className="footer-info">
          <p>회사 정보</p>
        </div>
        <div className="footer-links">
          <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

필자는 프로젝트의 구조를 더 체계적으로 관리하기 위해 컴포넌트별로 폴더를 만들고, 그 안에 관련된 파일들을 모아두는 방식을 사용했다!

(참고하실 분은 아래 구조를 대략적으로 참고하면 좋을 것 같다!)

src/
├── components/
│   └── Footer/
│       ├── index.jsx
│       └── Footer.css
├── styles/
│   └── GlobalStyle.js
└── App.js

---

구현화면