Sunnyside agency page 3. 헤더 및 개고생

Sal Jeong·2022년 8월 30일
0

세상에, 무언가를 설계하고 적으면서 코딩하는게 이렇게 어려운 일이었던가???

결국 지금까지 혼자서 뭐든 만들어왔고 앞으로 무엇이든 만들 수 있다고 생각했던 나에겐 정말 자존심 상하는 일이었다...

사실 지금 생각하니 개발자들에게 있어 협업이라는 것이 얼마나 중요한가, 생각을 잘못해서 해결하지 못하는 일에 솔직하게 도움을 요청하는 것이 얼마나 중요한 지 새삼 생각하게 된다.

정말 아쉽게도, 경력 동안 이렇게 의견을 나누면서 개발할 기회가 없었다. 성장하는 스타트업의 단 한명의 프론트 개발자, 내 코드가 잘못된지도 모르고 있는 그런 사람이었기 떄문에,(물론 카카오톡은 가능하지만... 웹 아니라 RN의 경우에는 물어볼 사람도 없었다...)

하지만 지금이라도 계획하고 작업하는 방법을 공부하지 않으면 안된다고 생각한다.

1. 가장 필수적으로 이해해야 하는것 - Image/next

  1. Next/Image

문제는 기존에 img태그를 next에서는 next/image를 써야한다는 것이다.

내가 알던 것은

absolute 한 이미지를 relative 부모의 크기에 width 100% height 100%을 줘서 맞추는 것이거나, width 100% height auto를 줘서 width에 맞게 이미지의 height 를 해당 aspect ratio에 맞게 추가하는 방법이었다.

넥스트에서는 어떻게 하느냐...

width
The width property can represent either the rendered width or original width in pixels, depending on the layout and sizes properties.

When using layout="intrinsic" or layout="fixed" the width property represents the rendered width in pixels, so it will affect how large the image appears.

When using layout="responsive", layout="fill", the width property represents the original width in pixels, so it will only affect the aspect ratio.

The width property is required, except for statically imported images, or those with layout="fill".

넓이는 렌더되는 너비이거나, 오리지널한 픽셀 값을 말하며, 이것은 레이아웃 prop과 size prop에 의해 결정된다.

layout='intrinsic'이거나(기본값) 'fixed'일 경우, 넓이는 width에 넘긴 pixel 값으로 렌더되고 이미지의 사이즈를 결정하게 된다.
-> 따라서 이 방법은 기본적인 img태그를 사용하는 방법과 가장 비슷하다고 생각한다.

layout ='responsive', 'fill'일 경우 너비는 픽셀로 정한 오리지널 너비 값에 영향을 받아 가로세로 비율에 영향을 주게 된다.

width는 fill 이거나, static image가 아닐 경우 항상 필요하다.

따라서, 기본 렌더되고 싶은 비율을 width, height로 넣어주면 그 부분이 aspect ratio prop으로 넘어가 맞춰서 렌더를 해준다... 이것인데 더 알아보아야 겠다.

https://www.w3schools.com/Css/css_rwd_images.asp

지금까지 이미지를 위해 쓰던 방법은

https://codepen.io/jihyeonjeong11/pen/wvmVvNv

  1. width: 100% height: auto -> 이미지의 aspect ratio를 지키기 위한 방법 (이미지가 300px이면, 가로세로비에 따라 가변적으로 height가 변하는 방법)
  2. relative div안에 position absolute 이미지를 넣는 방법(object-fit: cover) relative div에 꽉 채울 때 사용.
    이 주였는데, 따라서

next/image에서는,

a. layout=intrinsinc에 width=100% height=auto(1 방법)
b. layout=fill 에 width=100% 을 사용할 수 있을 것으로 보인다.(2 방법)

반응형 웹이므로, 이미지 자체의 aspect ratio를 지키는것이 무엇보다 중요하다고 생각한다. 따라서

    <header>
      // 배경그림
      // absolute 헤더를 위한 relative 태그.
      <Relative>
        <NextImg
          display="block"
          lgdisplay="none"
          src="/images/mobile/image-header.jpg"
          alt="..."
          // 상술한 대로 width 100% height auto로처리함
          imgwidth="100%"
          imgheight="auto"
          // 이미지 자체의 가로세로 비를 그대로 넣어주었음.
          width={375}
          height={900}
          priority
        />
        <NextImg
          display="none"
          lgdisplay="block"
          src="/images/desktop/image-header.jpg"
          alt="..."
          imgwidth="100%"
          imgheight="auto"
          width={1440}
          height={900}
          priority
        />
        // 이하 헤더 내용이 들어감
        <AbsoluteDiv top="0">
        ...

이러한 방식으로 작업을 해 나가기로 했다.

2. 그렇다고 안할 수는 없다.

이 그림에서 헤더 부분만 생각했을 때, 내가 만들어야 할 컴포넌트는 무엇이 있는가?

  1. 배경그림
    -> 배경 이미지를 먼저 렌더하고, header와 흰 텍스트와 화살표는 absolute로 처리하자.

  2. 헤더
    -> display: flex 적용해서 왼쪽 로고, 오른쪽 버튼들을 추가하고, mediaquery를 추가해서 햄버거 버튼으로 바꾸자.

  3. absolute가 있으려면 뭐가 필요하지? position:relative가 상위에 필요하다.

  4. 반응형 헤더의 경우,

    안에 든 ul을 모바일 레이아웃에서 modal처럼 absolute로 재활용했던 것으로 기억한다.

3. 1차 완성본

모바일 부분 헤더: 헤더와 글자, 화살표는 모두 absolute 사용함

PC 버전 헤더

모바일 부분 가변형 header.

으로 만족스럽지는 않지만, 일단 만들어 보았다.

다음에는, 카드 두개 부분의 ui를 만들 차례이다.

  1. pc에서는 flex-row, 모바일에서는 flex-column으로 표현하고,
  2. 이미지의 가로세로비는 동일하다
  3. 글은 해당 이미지의 height및 width에 따라가면 된다.
  4. b. layout=fill 에 width=100% 을 사용할 수 있을 것으로 보인다.(2 방법) 을 사용해서 이미지를 처리하고, 나머지 컨텐츠(글)은 같은 크기로 처리한다.
참고한 url

https://stackoverflow.com/questions/36229356/whats-the-equivalent-of-the-container-bootstrap-class-in-purecss-io

https://nextjs.org/docs/api-reference/next/image
profile
행복하기 위해 코딩합니다. JS 합니다.

0개의 댓글