[개인프로젝트] styled Component(css 다지기 1.)

네비게이션 컴포넌트 스타일링

1. NavWrapper : Nav 컴포넌트의 최상위 styled component

   • semantic tag : nav
   • position : fiexd 를 작용하여, Nav가 고정되도록 설정
   • z-index : 3 / 네비게이션 컴포넌트가 최상단으로 고정되도록 설정
   • display: flex / Flex 아이템이 자신의 width 만큼 공간을 차지한 채, 가로 방향으로 배치
   • Justify-content : space-between / 3개의 flex item이 가장자리에서 부터 동일한 여유 공간을 가지도록 배치
   • align-items: center / flex item이 가운데 정렬 될 수 있도록 설정(이후 하위 styled component로 상속 됨)
   • letter-spacing : 16px / 텍스트 사이 간격 지정

     export const NavWrapper = styled.nav`
       position: fixed;
       z-index: 3;
       top: 0; /* top,left,right => Nav Component 위치 지정  */
       left: 0;
       right: 0;
       height: 70px;
       background-color: #090b13;
       display: flex; /* flex item 고유 width 만큼 가로로 배치 */
       justify-content: space-between;
       align-items: center;
       padding: 0 36px;
       letter-spacing: 16px;
     `;

   기초 중의 기초!!
   block element의 특징 : 좌우공간을 모두 차지함
   따라서, NavWrapper 에 width 지정 의미 없음!!!

2. Logo

   • semantic tag : a / 로고 클릭시 root 경로로 이동
   • display: inline-block / 이웃한 flex item 과 같은 줄 위치 + width,height 설정
   • img tag : Logo 컴포넌트와 동일한 크기로 설정

   	export const Logo = styled.a`
       padding: 0;
       width: 80px;
       margin-top: 4px;
       max-height: 70px;
       font-size: 0;
       display: inline-block; /* 이웃한 flex item과 한 줄에 위치 + width,height 사용 */
   
       img {
         display: block;
         width: 100%; /* img와 Logo 컴포넌트 크기 일치 */
       }
   	`;

네비게이션 컴포넌트 스크롤 구현

1. 색상 : 배경색이 #090b13(검은색)이며, 실제 색은 투명하다.

2. 따라서, 일정 구간으로 스크롤 되면, 투명을 유지하다가 다시 배경색으로 덮히는 설정을 하려고 한다.

   방법

   1. [상태 설정] show 라는 state를 만들고, show 가 true 일때, #090b13, false 일때 투명(transparent)하게 색을 전환 한다.
   2. [조건 설정] 색이 변경되는 위치 값을 얻기 위해, window.scrollY 를 적용하여 스크롤 위치가 50을 초과한 구간부터 #090b13, 이하 일때, 투명하게 색을 전환하는 조건을 설정한다.
   3. [이벤트 리스너] 설정된 조건은 "scroll" 이벤트가 발생될 때, 호촐되엉 하므로, window 객체에 이벤트를 등록한다.
   4. [useEffect] 설정된 이벤트 리스너는 Nav 컴포넌트가 렌더링 될 때, 한번 발생해야하며, 더 이상 Nav 컴포넌트를 사용하지 않을 때, 해당 이벤트 리스너가 호출되지 않도록, 지워주는 코드가 필요하다.
   5. [색상 변경] show state가 변경됨에 따라, 색상 전환이 필요하다. 이는 styled component에 props로 전달하면 해결된다.

import React, { useEffect, useState } from "react";
import { Logo, NavWrapper } from "./Nav.styled";

const Nav = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 50) {
        setShow(true);
      } else {
        setShow(false);
      }
    });
    return () => {
      /* Nav 컴포넌트를 사용하지 않을 시, 불필요한 이벤트를 제거해줌 */
      window.removeEventListener("scroll", () => {});
    };
  }, []);

  return (
    <NavWrapper show={show}>
      <Logo>
        <img
          alt="Disney Plus Logo"
          src="/images/logo.svg"
          onClick={() => (window.location.href = "/")}
        />
      </Logo>
    </NavWrapper>
  );
};

export default Nav;

추가 학습

CSS 클래스 네이밍 container vs wrapper 차이는 무엇인가?

• container 는 하나 이상의 요소를 포괄하는 개체를 지칭하는 의미를 지닌다.
• wrapper 는 하나의 개체만을 포함하는 것을 뜻한다.

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기

[CSS] wrapper에 대한 간단한 설명

[CSS] 레이아웃 Wrapper 만들기 를 인용함.

위 이미지는 다음 과 같은 코드로 구성되어 있다

	<div class="wrapper">
     <aside>...<aside/>
     <main>...<main/>
   <div/>

그런데 이 때, aside와 main 요소를 감싸는 wrapper 요소가 없다면,
하위 요소인 aside와 main 요소가 화면 가장자리에 달라붙게 되어(block 요소의 특징이므로), 의도와 다른 결과를 얻게 된다.

아래 이미지는 하위 요소를 감싸는 상위 요소(여기서는 wrapper)가 없을 경우 요소의 너비가 늘어난 상황을 보여준다.

정리

wrapper는 3가지 이점을 가질 수 있다.
1. 콘텐츠의 가독성을 높여준다.
a. 텍스트 및 이미지와 같은 콘텐츠가 늘어나서 화면 전체 너비를 채우는 상황을 방지 하여, 원래 의도대로 디자인 할 수 있다.
2. 디자인 요소를 그룹화 하여, 간격을 추가하는데 유용하다.
3. 디자인 요소를 열로 나누는 작업은 래퍼 없이 수행하기 어렵다.